快捷導(dǎo)航

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

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

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

1. 總體架構(gòu)

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

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

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

復(fù)制代碼代碼如下:

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

4. 為什么要傳入window呢？
通過(guò)傳入window變量，使得window由全局變量變?yōu)榫植孔兞?，?dāng)在jQuery代碼塊中訪問(wèn)window時(shí)，不需要將作用域鏈回退到頂層作用域，這樣可以更快的訪問(wèn)window；這還不是關(guān)鍵所在，更重要的是，將window作為參數(shù)傳入，可以在壓縮代碼時(shí)進(jìn)行優(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是真的未定義。因?yàn)閡ndefined能夠被重寫(xiě)，賦予新的值。
undefined = "now it's defined";
alert( undefined );

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

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

復(fù)制代碼代碼如下:

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

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

1.3 下節(jié)預(yù)告

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

您可能感興趣的文章: