解構jQuery之jQuery總體架構

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

 

jQuery源碼能夠精簡爲如下內容：

 

 1 (function( global, factory ) {
 2 
 3     if ( typeof module === "object" && typeof module.exports === "object" ) {
 4 
 5         module.exports = global.document ?
 6             factory( global, true ) :
 7             function( w ) {
 8                 if ( !w.document ) {
 9                     throw new Error( "jQuery requires a window with a document" );
10                 }
11                 return factory( w );
12             };
13     } else {
14         factory( global );
15     }
16 
17 }(typeof window !== "undefined" ? window : this, function( window, noGlobal ) {
18 
19 var    jQuery = function( selector, context ) {
20         return new jQuery.fn.init( selector, context );
21     };
22 
23     jQuery.fn = jQuery.prototype = {};
24     //核心方法
25     //迴歸調用
26     //異步隊列
27     //數據緩存
28     //隊列操做
29     //選擇器引
30     //屬性操做
31     //節點遍歷
32     //文檔處理
33     //樣式操做
34     //屬性操做
35     //事件體系
36     //ajax交互
37     //動畫引擎
38     return jQuery;
39 }));

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