快捷導航

jQuery源碼分析-01總體架構(gòu)分析

更新時間：2011年11月14日 20:04:16 作者：

從上邊的注釋看，jQuery的源碼結(jié)構(gòu)相當清晰、條理，不像代碼那般晦澀和讓人糾結(jié)

1. 總體架構(gòu)

1.1 自調(diào)用匿名函數(shù) self-invoking anonymous function
打開jQuery源碼，首先你會看到這樣的代碼結(jié)構(gòu)：

 
(function( window, undefined ) { 
// jquery code 
})(window); 

1. 這是一個自調(diào)用匿名函數(shù)。什么東東呢？在第一個括號內(nèi)，創(chuàng)建一個匿名函數(shù)；第二個括號，立即執(zhí)行
2. 為什么要創(chuàng)建這樣一個“自調(diào)用匿名函數(shù)”呢？
通過定義一個匿名函數(shù)，創(chuàng)建了一個“私有”的命名空間，該命名空間的變量和方法，不會破壞全局的命名空間。這點非常有用也是一個JS框架必須支持的功能，jQuery被應用在成千上萬的JavaScript程序中，必須確保jQuery創(chuàng)建的變量不能和導入他的程序所使用的變量發(fā)生沖突。
3. 匿名函數(shù)從語法上叫函數(shù)直接量，JavaScript語法需要包圍匿名函數(shù)的括號，事實上自調(diào)用匿名函數(shù)有兩種寫法（注意標紅了的右括號）：

復制代碼代碼如下:

 
(function() { 
console.info( this ); 
console.info( arguments ); 
}( window ) ); 
(function() { 
console.info( this ); 
console.info( arguments ); 
})( window ); 

4. 為什么要傳入window呢？
通過傳入window變量，使得window由全局變量變?yōu)榫植孔兞?，當在jQuery代碼塊中訪問window時，不需要將作用域鏈回退到頂層作用域，這樣可以更快的訪問window；這還不是關(guān)鍵所在，更重要的是，將window作為參數(shù)傳入，可以在壓縮代碼時進行優(yōu)化，看看jquery-1.6.1.min.js：
(function(a,b){})(window); // window 被優(yōu)化為 a

5. 為什么要在在參數(shù)列表中增加undefined呢？
在自調(diào)用匿名函數(shù) 的作用域內(nèi)，確保undefined是真的未定義。因為undefined能夠被重寫，賦予新的值。
undefined = "now it's defined";
alert( undefined );

瀏覽器測試結(jié)果：
瀏覽器
測試結(jié)果
結(jié)論
ie
now it's defined
可以改變
firefox
undefined
不能改變
chrome
now it's defined
可以改變
opera
now it's defined
可以改變

6. 注意到源碼最后的分號了嗎？
分號是可選的，但省略分號并不是一個好的編程習慣；為了更好的兼容性和健壯性，請在每行代碼后加上分號并養(yǎng)成習慣。
1.2 總體架構(gòu)
接下來看看在自調(diào)用匿名函數(shù) 中都實現(xiàn)了什么功能，按照代碼順序排列：

復制代碼代碼如下:

 
(function( window, undefined ) { 
// 構(gòu)造jQuery對象 
var jQuery = function( selector, context ) { 
return new jQuery.fn.init( selector, context, rootjQuery ); 
} 
// 工具函數(shù) Utilities 
// 異步隊列 Deferred 
// 瀏覽器測試 Support 
// 數(shù)據(jù)緩存 Data 
// 隊列 queue 
// 屬性操作 Attribute 
// 事件處理 Event 
// 選擇器 Sizzle 
// DOM遍歷 
// DOM操作 
// CSS操作 
// 異步請求 Ajax 
// 動畫 FX 
// 坐標和大小 
window.jQuery = window.$ = jQuery; 
})(window); 

從上邊的注釋看，jQuery的源碼結(jié)構(gòu)相當清晰、條理，不像代碼那般晦澀和讓人糾結(jié)。
后邊的章節(jié)基本將以這個順序展開。

1.3 下節(jié)預告

如果你看過jQuery源碼，很快就會發(fā)現(xiàn)這里到處充斥著正則表達式，而很多JavaScript開發(fā)人員又疏于正則基礎(chǔ)知識，為了掃清這個障礙，下一章將先溫習JavaScript正則表達式的基礎(chǔ)知識，再詳細剖析jQuery中的正則表達式。
在正式開始分析源碼之前，還有沒有要準備的基礎(chǔ)知識呢？
當然有。比如JavaScript API中的類和對象，如果你不熟練的話，至少手頭要有一本參考手冊。
除了正則，其他的知識點會在分析過程中穿插講解，不計劃辟出新的章節(jié)。

您可能感興趣的文章: