【手撕jquery】之core.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成了有血有肉的騷年了