上一次从入口文件中,我们清晰的看到了整个工程的组成,接下来就开始逐一攻破。
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成了有血有肉的骚年了