談談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;

}