jQuery 對于大家而言并不陌生，因此關于它是什么以及它的作用，在這里我就不多言了，而本篇文章的目的是想通過對源碼簡單的分析來討論 jQuery 的內部架構設計，以及 jQuery 是如何利用JavaScript 中的高級特性來構建如此偉大的 JavaScript 庫。

初識 jQuery

從核心功能來看，jQuery 僅僅做了一件簡單而又平凡的事：查詢。它的語法如此簡潔明了，以致于很多人在不知道javascript是什么的時候就已經會用jQuery了，用一個詞形容就是：大道至簡。 從設計層面來看，我們可以將jQuery提供方法分為兩大類：靜態方法和實例方法。靜態方法就是直接通過$訪問的方法，這些方法一般不對dom元素操作，而是提供了一些常用的工具，比如ajax請求、以及對字符串的一些常用操作，除此之外，jQuery還提供了對自身的擴展機制，你可以通過extend方法來編寫你需要的組件。而實例方法和靜態方法不一樣，它是用來對jQuery查詢的DOM元素進行操作，jQuery 執行$()會構建一個 jQuery 對象，這個對象以數組的方法存儲查詢出的所有DOM元素，然后在這個對象的原型鏈上實現了對這些 DOM 操作的方法，比如 each()方法就是用來遍歷每一個DOM元素的。你可能會注意到，我剛說這個對象“以數組的方式”存儲，那就是說，jQuery構建的這個對象不是數組，那這個對象到底是什么？ 其實這個對象就是 jQuery 的核心，也被稱作“jQuery對象”。因此，本文的重點就是對 jQuery 對象進行分析和討論。

 jQuery 對象

一般情況下，我們會這樣使用 jQuery：

$('div').each(function(index){
     //this ...
});

$('div')執行完后回返回一個jQuery對象，each()方法是對這個對象中的DOM元素進行遍歷，我們先看看$('div')的執行過程（本文源碼摘自jQuery 3.0）：

jQuery = function(selector, context) {
    return new jQuery.fn.init(selector, context);
}

這個方法就是$('div')的入口方法，$是jQuery的簡寫，就相當于jQuery('div') ，可以看出，這個方法只做了一件事，那就是返回jQuery.fn.init()函數的實例對象，那jQuery.fn.init 又是什么呢，我們再看下面的代碼：

init = jQuery.fn.init = function(selector, context, root) {
    //... 
   return this;
}
init.prototype = jQuery.fn;

jQuery.fn.init和init引用了同一個方法，這個方法根據selector查詢出符合條件的DOM元素，并返回，可你會發現，返回的是this，這個this是什么呢？我們待會分析，先看下面的這句話：

init.prototype = jQuery.fn;

這句話是什么意思呢，這句話是讓 init 方法的 prototype 對象指向了 jQuery.fn 對象，那 jQuery.fn 又是什么鬼？ 我們繼續看代碼：

jQuery.fn = jQuery.prototype = {

    // The current version of jQuery being used
    jquery: version,

    constructor: jQuery,

    // The default length of a jQuery object is 0
    length: 0,

    // Execute a callback for every element in the matched set.
    each: function(callback) {
        return jQuery.each(this, callback);
    },
       
    splice: arr.splice
};

為了節省篇幅，我省略了其中一些代碼，從這里可以看出，jQuery.fn 其實就是 jQuery 的原型對象，這個原型對象中定義了一些對this對象進行操作的方法。到這里，你是不是感覺到有點繞，不要著急，我們來梳理一下思路：jQuery首先定義了一個init方法，然后在 init 的原型對象 prototype上定義了一系列操作方法。最后將init方法的實例對象返回。所以上面的過程可以簡化如下(偽代碼表示)：

var init = function(selector, context, root) {
   //...
   return this;
}
init.prototype = {
   length:0,
   each:function(callback) {
      //...
   },
   splice:[].splice
}
jQuery = function(selector, context, root) {
   return new init(selector, context, root);
}

那么問題來了，jQuery.fn 中的方法為什么不直接定義在 init 的prototype上，而要定義在 jQuery 的原型對象上？

其實，這樣做的目的是為了提高 jQuery 的查詢效率，如果直接定義在 init 的 prototype 對象上，那么每執行一次查詢，就會在內存中創建這樣一個龐大的prototype對象，而如果把這個對象定義在jQuery的prototype上，在jQuery加載時，這個對象就會被初始化并一直存在于內存中，以后每次執行 $() 時，只需要將init中的prototype指向這個對象就可以了，而不用每次都去創建一遍相同的對象。

我們再來看看 init 函數中返回的 this 到底是什么，我在之前的博客中講過，函數中的 this 總是指向運行期的調用者，那 init 的調用者是誰呢？在上面代碼中似乎找不到調用者，這時我們就需要深入的理解new運算符的運行機制了，借用我之前在博客中對new運算符的描述，我們對 new init() 的執行過程進行如下分解：

new init(selector, context, root) = {
    var obj = {};
    obj.__proto__ = init.prototype;
    var result = init.call(obj, selector, context, root);
    return typeof result === 'object' ? result : obj;
}

如果對new的運行機制不理解的請參考博文：深入理解 new 操作符

從上述分解過程可以看出，JavaScript 在通過 new 來創建一個實例對象的時候，會先創建了一個普通對象 obj，然后將 obj 的內部屬性 __proto__ 指向了 init 的原型對象，因此 obj 的原型鏈將被改變，而第3步使用 call 方法調用 init()，所以 init 中的 this 指的就是這里的 obj 對象。

init() 執行以后，會將匹配到的所有 DOM 對象以數組的方式存儲到this對象中并返回，也就是返回了obj 對象，而new運算符最終也會將這個 obj 對象返回以作為新的實例對象。所以 new 運算符返回的這個實例對象具備兩個特點：一是包含了 DOM 查詢結果集，二是其原型鏈繼承了 init 的 prototype，而 init 的 prototype 又指向了jQuery.fn對象，因此實例對象也具備了這些操作方法。

jQuery 每執行一次查詢就會創建一個jQuery對象，而在同一個應用程序中，所有 jQuery 對象都會共享同一個 jQuery 原型對象。因此，jQuery 象不僅包含了 DOM 查詢結果集，還繼承了 jQuery 原型對象上的操作方法。這樣，你就可以在查詢后直接調用方法來操作這些DOM 元素了。這就是 jQuery 的核心架構設計，簡單、方便、實用！

如果你還不理解上面的講解，不要著急，我按照 jQuery 的設計思路寫了一個完整的小項目 jDate，你可以對比著理解！jDate 項目已上傳至 github，你可以點擊這里查看完整代碼：jDate ,如有不同見解，歡迎討論！

jQuery 的缺陷

通過對jQuery的核心架構分析，我們會發現，每執行一次查詢，jQuery就要在內存中構建一個復雜的 jQuery 對象，雖然說每個 jQuery 對象都共享同一個 jQuery 原型，但 jQuery 的查詢過程遠比你想象的要復雜，它既要考慮各種不同的匹配標識，同時又要考慮不同瀏覽器的兼容性。因此，如果你只是對 DOM 做一些簡單的操作，建議使用原生方法 querySelector 替代 jQuery，不過在使用原生方法時，對于不同的應用場景你可能要做一些兼容性的工作，要學會取舍，不要過度依賴 jQuery！

原創發布 @一像素 2016.01