jQuery整體架構

任何程序代碼不是一開始就復雜的，成功也不是一躇而蹴的，早期jQuery的作者John Resig在2005年提議改進Prototype的“Behaviour”庫時，只是想讓其使用更簡單才發布新的jQuery框架。起初John Resig估計也沒料想jQuery會如此的火熱。我們可以看到從發布的第一個1.0開始到目前最新的2.1.1其代碼膨脹到了9000多行，它兼容CSS3，還兼容各種瀏覽器，jQuery使用戶能更方便地處理DOM、事件、實現動畫效果，并且方便地為網站提供AJAX交互。

1、最新jQuery2.1.1版本的結構：
 

1. ;(function(global, factory) { 
2.     factory(global); 
3. }(typeof window !== "undefined" ? window : this, function(window, noGlobal) { 
4.     var jQuery = function( selector, context ) { 
5.         return new jQuery.fn.init( selector, context ); 
6.     }; 
7.     jQuery.fn = jQuery.prototype = {}; 
8.     // 核心方法 
9.     // 回調系統 
10.     // 異步隊列 
11.     // 數據緩存 
12.     // 隊列操作 
13.     // 選擇器引 
14.     // 屬性操作 
15.     // 節點遍歷 
16.     // 文檔處理 
17.     // 樣式操作 
18.     // 屬性操作 
19.     // 事件體系 
20.     // AJAX交互 
21.     // 動畫引擎 
22.     return jQuery; 
23. })); 

2、jQuery的模塊依賴網：

jQuery一共13個模塊，從2.1版開始jQuery支持通過AMD模塊劃分，jQuery在最開始發布的1.0版本是很簡單的，只有CSS選擇符、事件處理和AJAX交互3大塊。其發展過程中，有幾次重要的變革：

    ☑  1.2.3 版發布，引入數據緩存，解決循環引用與大數據保存的問題
    ☑  1.3 版發布，它使用了全新的選擇符引擎Sizzle，在各個瀏覽器下全面超越其他同類型JavaScript框架的查詢速度，程序庫的性能也因此有了極大提升
    ☑  1.5 版發布，新增延緩對像(Deferred Objects)，并用deferred重寫了Ajax模塊
    ☑  1.7 版發布，抽象出回調對象，提供了強大的的方式來管理回調函數列表。

每一次大的改進都引入了一些新的機制、新的特性，通過這些新的機制就造就了如今jQuery庫，一共13個模塊，模塊不是單一的，比如jQuery動畫，都會依賴異步隊列、動畫隊列、回調隊列與數據緩存模塊等。

jQuery抽出了所有可復用的特性，分離出單一模塊，通過組合的用法，不管在設計思路與實現手法上jQuery都是非常高明的。

五大塊：
jQuery按我的理解分為五大塊，選擇器、DOM操作、事件、AJAX與動畫，那么為什么有13個模塊？因為jQuery的設計中最喜歡的做的一件事，就是抽出共同的特性使之“模塊化”，當然也是更貼近S.O.L.I.D五大原則的“單一職責SRP”了，遵守單一職責的好處是可以讓我們很容易地來維護這個對象，比如，當一個對象封裝了很多職責的時候，一旦一個職責需要修改，勢必會影響該對象的其它職責代碼。通過解耦可以讓每個職責更加有彈性地變化。
我們來看看jQuery文檔針對業務層的Ajax的處理提供了一系列的門面接口：

.ajaxComplete()
.ajaxError()
.ajaxSend()
.ajaxStart()
.ajaxStop()
.ajaxSuccess()

底層接口：

jQuery.ajax()
jQuery.ajaxSetup()

快捷方法：

jQuery.get()
jQuery.getJSON()
jQuery.getScript()
jQuery.post()

業務邏輯是復雜多變的，jQuery的高層API數量非常多，而且也非常的細致，這樣做可以更友好的便于開發者的操作，不需要必須在一個接口上重載太多的動作。我們在深入內部看看Ajax的高層方法其實都是統一調用了一個靜態的jQuery.ajax方法

1. jQuery.each( [ "get", "post" ], function( i, method ) { 
2.     jQuery[ method ] = function( url, data, callback, type ) { 
3.         // Shift arguments if data argument was omitted 
4.         if ( jQuery.isFunction( data ) ) { 
5.             type     = type || callback; 
6.             callback = data; 
7.             data     = undefined; 
8.         } 
9.         return jQuery.ajax({ 
10.             url: url, 
11.             type: method, 
12.             dataType: type, 
13.             data: data, 
14.             success: callback 
15.         }); 
16.     }; 
17. }); 

在jQuery.ajax的內部實現是非常復雜的，首先ajax要考慮異步的處理與回調的統一性，所以就引入了異步隊列模塊（Deferred）與回調模塊（Callbacks）, 所以要把這些模塊方法在ajax方法內部再次封裝成、構建出一個新的jQXHR對象，針對參數的默認處理，數據傳輸的格式化等等。