【置頂】進入工程可以查看更詳細的注釋
上一次從入口文件中,我們清晰的看到了整個工程的組成,接下來就開始逐一攻破。
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成了有血有肉的騷年了