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

1.1 自調(diào)用匿名函數(shù) self-invoking anonymous function
打開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ù)”呢？
通過定義一個(gè)匿名函數(shù)，創(chuàng)建了一個(gè)“私有”的命名空間，該命名空間的變量和方法，不會(huì)破壞全局的命名空間。這點(diǎn)非常有用也是一個(gè)JS框架必須支持的功能，jQuery被應(yīng)用在成千上萬的JavaScript程序中，必須確保jQuery創(chuàng)建的變量不能和導(dǎo)入他的程序所使用的變量發(fā)生沖突。
3. 匿名函數(shù)從語法上叫函數(shù)直接量，JavaScript語法需要包圍匿名函數(shù)的括號(hào)，事實(shí)上自調(diào)用匿名函數(shù)有兩種寫法（注意標(biāo)紅了的右括號(hào)）：
代碼如下:
(function() {
console.info( this );
console.info( arguments );
}( window ) );
(function() {
console.info( this );
console.info( arguments );
})( window );

4. 為什么要傳入window呢？
通過傳入window變量，使得window由全局變量變?yōu)榫植孔兞浚?dāng)在jQuery代碼塊中訪問window時(shí)，不需要將作用域鏈回退到頂層作用域，這樣可以更快的訪問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能夠被重寫，賦予新的值。
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)
接下來看看在 自調(diào)用匿名函數(shù) 中都實(shí)現(xiàn)了什么功能，按照代碼順序排列：
代碼如下:
(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)畫 FX
// 坐標(biāo)和大小
window.jQuery = window.$ = jQuery;
})(window);

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

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

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

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com