淺析 jQuery 內部架構設計

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