jQuery技術内幕：深入解析jQuery架構設計與實作原理. 1.2 總體架構

<b>1.2　總體架構</b>

jquery的子產品可以分為3部分：入口子產品、底層支援子產品和功能子產品，如圖1-1所示，圖中還展示了子產品之間的主要依賴關系。

來看看圖1-1中各個子產品的功能和依賴關系。

在構造jquery對象子產品中，如果在調用構造函數jquery()建立jquery對象時傳入了選擇器表達式，則會調用選擇器sizzle周遊文檔，查找與之比對的dom元素，并建立一個包含了這些dom元素引用的jquery對象。

選擇器sizzle是一款純javascript實作的css選擇器引擎，用于查找與選擇器表達式比對的元素集合。

工具方法子產品提供了一些程式設計輔助方法，用于簡化對jquery對象、dom元素、數組、對象、字元串等的操作，例如，jquery.each()、.each()、jquery.map()、.map()等，其他所有的子產品都會用到工具方法子產品。

浏覽器功能測試子產品提供了針對不同浏覽器功能和bug的測試結果，其他子產品則基于這些測試結果來解決浏覽器之間的相容性問題。

在底層支援子產品中，回調函數清單子產品用于增強對回調函數的管理，支援添加、移除、觸發、鎖定、禁用回調函數等功能；異步隊列子產品用于解耦異步任務和回調函數，它在回調函數清單的基礎上為回調函數增加了狀态，并提供了多個回調函數清單，支援傳播任意同步或異步回調函數的成功或失敗狀态；資料緩存子產品用于為dom元素和javascript對象附加任意類型的資料；隊列子產品用于管理一組函數，支援函數的入隊和出隊操作，并確定函數按順序執行，它基于資料緩存子產品實作。

在功能子產品中，事件系統提供了統一的事件綁定、響應、手動觸發和移除機制，它并沒有将事件直接綁定到dom元素上，而是基于資料緩存子產品來管理事件；ajax子產品允許從伺服器上加載資料，而不用重新整理頁面，它基于異步隊列子產品來管理和觸發回調函數；動畫子產品用于向網頁中添加動畫效果，它基于隊列子產品來管理和執行動畫函數；屬性操作子產品用于對html屬性和dom屬性進行讀取、設定和移除操作；dom周遊子產品用于在dom樹中周遊父元素、子元素和兄弟元素；dom操作子產品用于插入、移除、複制和替換dom元素；樣式操作子產品用于擷取計算樣式或設定内聯樣式；坐标子產品用于讀取或設定dom元素的文檔坐标；尺寸子產品用于擷取dom元素的高度和寬度。

下面來看看jquery源碼（jquery-1.7.1.js）的總體結構，如代碼清單1-1所示，其中展示了各個子產品在源碼中的位置。

代碼清單1-1　jquery源碼（jquery-1.7.1.js）的總體結構

(function( window, undefined ) {

   // 構造jquery對象

   var jquery = (function() {

       var jquery = function( selector, context ) {

               return new jquery.fn.init( selector, context, rootjquery );

           }

       return jquery;

   })();

   // 工具方法 utilities

   // 回調函數清單 callbacks object

   // 異步隊列 deferred object

   // 浏覽器功能測試 support

   // 資料緩存 data

   // 隊列 queue

   // 屬性操作 attributes

   // 事件系統 events

   // 選擇器 sizzle

   // dom 周遊 traversing

   // dom 操作 manipulation

   // 樣式操作 css（計算樣式、内聯樣式）

   // 異步請求 ajax

   // 動畫 effects

   // 坐标 offset、尺寸 dimensions

   window.jquery = window.$ = jquery;

})(window);

從代碼清單1-1可以看出，jquery的源碼結構還是相當清晰和有條理的，并不像源碼那般晦澀。