分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

【手撕jquery】之core.js分析(一)

发布时间:2023-09-06 01:30责任编辑:董明明关键词:js

上一次从入口文件中,我们清晰的看到了整个工程的组成,接下来就开始逐一攻破。

1.常量和常用原生方法的声明

首先core.js引入的模块,可以罗列一下:

 ???"./var/arr", ???"./var/document", ???"./var/getProto", ???"./var/slice", ???"./var/concat", ???"./var/push", ???"./var/indexOf", ???"./var/class2type", ???"./var/toString", ???"./var/hasOwn", ???"./var/fnToString", ???"./var/ObjectFunctionString", ???"./var/support", ???"./var/isWindow", ???"./core/DOMEval"

   这里我们看到了一个非常好的编程习惯,在JavaScript中,很多变量和方法使用起来都比较冗余,而且很容易不小心就被改动,因此,可以将这些基础变量和方法单独维护成一个文件。

  首先可以看arr文件:

define( function() { ???"use strict"; ???return [];} );

  非常简单的返回一个数组直接量(空数组)。这有什么用呢?你可以再看下slice,concat,indexof,push文件:

define( [ ???"./arr"], function( arr ) { ???"use strict"; ???return arr.concat;} );

  你会恍然大悟,原来提供这个直接量,是用来返回它的类方法的。有人可能会说,这不是绕道而行么?数组可以直接调用concat方法,因为concat是数组的原型方法,所有数组都可以继承。

  这里不得不说JavaScript的灵活性带来的一个容易出错的地方,覆盖原型方法。不管你是否注意,但不能保证别人不会写出如下代码:

let arr = [];
arr.concat = function(){...};

  一旦别人不小心写出了上面的代码,你会发现你想要的方法变质了。

  为了使用原汁原味的原生api,经常出现如下写法:

//也可使用apply方法
Array.prototype.concat.call();[].concat.call();

   这样就可以使用原生的方法,并且可以绑定方法执行的上下文(call方法说明)

   其他的几个模块大同小异,可以看工程中的注释来了解(工程地址欢迎来看)

2.基本结构

  接下来把整个jquery对象的生产流程过一下:

//首先声明一个jQuery函数(其实就是一个对象的构造函数)
var jQuery = function (selector, context) {
return new jQuery.fn.init(selector, context);}

//其次定义一个扩展方法
jQuery.extend = jQuery.fn.extend = function () {
...
};

//扩展jquery对象
jQuery.extend({
...
});
//这样一波下来,jquery成了有血有肉的骚年了

【手撕jquery】之core.js分析(一)

原文地址:http://www.cnblogs.com/dzg-melody/p/8035649.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved