談談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()方法是對這個物件中的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;

 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！

以上就是本文的全部內容，希望對大家學習jquery有所啟發，更多相關教程請訪問jQuery視頻教程！