淺談 jQuery 核心架構設計

jQuery對於大家而言並不陌生，因此關於它是什麼以及它的作用，在這裡我就不多言了，而本篇文章的目的是想透過對源碼簡單的分析來討論jQuery 的核心架構設計，以及jQuery 是如何利用javascript中的高階特性來建立如此偉大的javascript函式庫。

1 初識jQuery

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

2 jQuery物件

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

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

$('div')執行完後回傳一個jQuery物件，each()是對這個物件中的方法是對這個物件中的方法元素進行遍歷，我們先來看看$('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 = = 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;

    init.call(obj,selector,context,root);    return typeof result === 'obj'? result : obj;

}

從上述分解過程可以看出，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 ,如有不同見解，歡迎討論！

3 jQuery 的缺陷

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