解構jQuery之jQuery整體架構

標籤：

在前端開發過程中必然繞不開jQuery庫，移動端zepto。天天用到的一個庫，很久就想通讀一下源碼，行動力不夠一直沒有執行……現在終於開始學習它，參照網上大神的博文和教程輔助自己學習。自己同時也構建一個自己的jQuery庫，體驗造輪子的整個過程。計劃就是這樣子啦，下面就是行動！

 

jQuery源碼可以精簡為以下內容：

 

方框上面的代碼是對AMD規範的支援。

jQuery整體上被包裹在一個匿名函數中，這個匿名函數再作為另一個匿名函數的參數被傳入，形參factory。

"()"圓括弧包裹函式宣告語句，解析器會將其解析為運算式，再在後面加一對圓括弧就會形成運算式調用:

(function(arg1,arg2){    //代碼}(arg1,arg2));

包裹jQuery的匿名函數相當於arg2參數，在匿名參數中被調用——factory()。

這種被稱為命名空間的函數（或自執行函數、立即調用運算式函數）在開發中應該經常用到，原理可以參考我的另一篇博文：立即調用運算式。

 

jQuery對象的建立和調用方式

jQuery並沒有使用new運算子將jQuery顯式的執行個體化，而是直接調用其函數。如：

$().ready();$().ajax();

源碼的最後部分有這樣一段代碼：

window.jQuery = window.$ = jQuery;

其實我們在平時的使用中就知道，$=jQuery,$("selector") = jQuery("selector")，$()、jQuery()直接調用自身就建立了對象。這裡有著非常精妙的設計。

 

由以上代碼可以看出，jQuery()調用自身，獲得的是jQuery.fn.init對象。接著看init和jQuery的關係

先執行jQuery.fn = jQuery.protorype，再執行jQuery.fn.init.prototype = jQuery.fn,合并後是：

jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype;

即jQuery的prototype等於init的prototype

所以，所有掛載到jQuery.fn上的方法就是掛在到了jQuery.prototype，即掛在到了jQuery函數上，相當於掛載到了jQuery.fn.init.prototype上，即相當於掛載到了一開始的jQuery函數返回的對象上，即掛載到了我們最終使用的jQuery對象上。

 

 

參考：

jQuery 2.0.3源碼分析core - 整體架構

慕課網jQuery源碼解析 ——Aaron

 jQuery源碼分析系列——nuysoft

解構jQuery之jQuery整體架構