jQuery源碼分析-01總體架構分析

1. 總體架構

1.1 自調用匿名函數 self-invoking anonymous function
開啟jQuery源碼，首先你會看到這樣的代碼結構：
複製代碼 代碼如下:
(function( window, undefined ) {
// jquery code
})(window);

1. 這是一個自調用匿名函數。什麼東東呢？在第一個括弧內，建立一個匿名函數；第二個括弧，立即執行
2. 為什麼要建立這樣一個“自調用匿名函數”呢？
通過定義一個匿名函數，建立了一個“私人”的命名空間，該命名空間的變數和方法，不會破壞全域的命名空間。這點非常有用也是一個JS架構必須支援的功能，jQuery被應用在成千上萬的JavaScript程式中，必須確保jQuery建立的變數不能和匯入他的程式所使用的變數發生衝突。
3. 匿名函數從文法上叫函數直接量，JavaScript文法需要包圍匿名函數的括弧，事實上自調用匿名函數有兩種寫法（注意標紅了的右括弧）：
複製代碼 代碼如下:
(function() {
console.info( this );
console.info( arguments );
}( window ) );
(function() {
console.info( this );
console.info( arguments );
})( window );

4. 為什麼要傳入window呢？
通過傳入window變數，使得window由全域變數變為局部變數，當在jQuery代碼塊中訪問window時，不需要將範圍鏈回退到頂層範圍，這樣可以更快的訪問window；這還不是關鍵所在，更重要的是，將window作為參數傳入，可以在壓縮代碼時進行最佳化，看看jquery-1.6.1.min.js：
(function(a,b){})(window); // window 被最佳化為 a

5. 為什麼要在在參數列表中增加undefined呢？
在 自調用匿名函數 的範圍內，確保undefined是真的未定義。因為undefined能夠被重寫，賦予新的值。
undefined = "now it's defined";
alert( undefined );

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

6. 注意到源碼最後的分號了嗎？
分號是可選的，但省略分號並不是一個好的編程習慣；為了更好的相容性和健壯性，請在每行代碼後加上分號並養成習慣。
1.2 總體架構
接下來看看在 自調用匿名函數 中都實現了什麼功能，按照代碼順序排列：
複製代碼 代碼如下:
(function( window, undefined ) {
// 構造jQuery對象
var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context, rootjQuery );
}
// 工具函數 Utilities
// 非同步隊列 Deferred
// 瀏覽器測試 Support
// 資料緩衝 Data
// 隊列 queue
// 屬性操作 Attribute
// 事件處理 Event
// 選取器 Sizzle
// DOM遍曆
// DOM操作
// CSS操作
// 非同步請求 Ajax
// 動畫 FX
// 座標和大小
window.jQuery = window.$ = jQuery;
})(window);

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

1.3 下節預告

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