jQuery整體框架甚是復(fù)雜，也不易讀懂，這幾日一直在研究這個笨重而強大的框架。jQuery的總體架構(gòu)可以分為：入口模塊、底層模塊和功能模塊。這里，我們以jquery-1.7.1為例進行分析。

jquery的總體架構(gòu)

分析一下以上代碼，我們發(fā)現(xiàn)jquery采取了匿名函數(shù)自執(zhí)行的寫法，這樣做的好處就是可以有效的防止命名空間與變量污染的問題。縮寫一下以上代碼就是：

參數(shù)window

匿名函數(shù)傳了兩個參數(shù)進來，一個是window，一個是undefined。我們知道，在js中變量是有作用域鏈的，這兩個變量的傳入就會變成匿名函數(shù)的局部變量，訪問起來的時候速度會更快。通過傳入window對象可以使window對象作為局部變量使用，那么，函數(shù)的參數(shù)也都變成了局部變量，當(dāng)在jquery中訪問window對象時，就不需要將作用域鏈退回到頂層作用域，從而可以更快的訪問window對象。

參數(shù)undefined

js在查找變量的時候，js引擎首先會在函數(shù)自身的作用域中查找這個變量，如果沒有的話就繼續(xù)往上找，找到了就返回該變量，找不到就返回undefined。undefined是window對象的一個屬性，通過傳入undefined參數(shù)，但又不進行賦值，可以縮短查找undefined時的作用域鏈。在 自調(diào)用匿名函數(shù) 的作用域內(nèi)，確保undefined是真的未定義。因為undefined能夠被重寫，賦予新的值。

jquery.fn是啥？

通過分析以上代碼，我們發(fā)現(xiàn)jQuery.fn即是jQuery.prototype，這樣寫的好處就是更加簡短吧。之后，我們又看到j(luò)query為了簡潔，干脆使用一個$符號來代替jquery使用，因此，在我們使用jquery框架的使用經(jīng)常都會用到$()，

構(gòu)造函數(shù)jQuery()

圖片描述

jQuery的對象并不是通過 new jQuery 創(chuàng)建的，而是通過 new jQuery.fn.init 創(chuàng)建的：

這里定義了一個變量jQuery，他的值是jQuery構(gòu)造函數(shù)，在955行（最上面的代碼）返回并賦值給jQuery變量

jQuery.fn.init

jQuery.fn （上面97行）是構(gòu)造函數(shù)jQuery()的原型對象，jQuery.fn.init()是jQuery原型方法，也可以稱作構(gòu)造函數(shù)。負責(zé)解析參數(shù)selector和context的類型并執(zhí)行相應(yīng)的查找。

參數(shù)context：可以不傳入，或者傳入jQuery對象，DOM元素，普通js對象之一
參數(shù)rootjQuery：包含了document對象的jQuery對象，用于document.getElementById()查找失敗等情況。

默認情況下，對匹配元素的查找從根元素document 對象開始，即查找范圍是整個文檔樹，不過也可以傳入第二個參數(shù)context來限定它的查找范圍。例如：

方法jQuery.extend(object)和jQuery.fn.extend(object)用于合并兩個或多個對象到第一個對象。相關(guān)源代碼如下（部分）：

jQuery.extend(object);　為jQuery類添加添加類方法，可以理解為添加靜態(tài)方法。如：

便為　jQuery　添加一個為add　的　“靜態(tài)方法”，之后便可以在引入 jQuery　的地方，使用這個方法了，

$.add(3,4); //return 7
jQuery.fn.extend(object)，查看一段官網(wǎng)的代碼演示如下：

CSS選擇器引擎 Sizzle

可以說，jQuery是為操作DOM而誕生的，jQuery之所以如此強大，得益于CSS選擇器引擎 Sizzle，解析規(guī)則引用網(wǎng)上的一段實例：

selector："div > p + div.aaron input[type="checkbox"]"

解析規(guī)則：
1 按照從右到左
2 取出最后一個token  比如[type="checkbox"]
                            {
                                matches : Array[3]
                                type    : "ATTR"
                                value   : "[type="
                                checkbox "]"
                            }
3 過濾類型 如果type是 > + ~ 空 四種關(guān)系選擇器中的一種，則跳過，在繼續(xù)過濾
4 直到匹配到為 ID,CLASS,TAG  中一種 , 因為這樣才能通過瀏覽器的接口索取
5 此時seed種子合集中就有值了,這樣把刷選的條件給縮的很小了
6 如果匹配的seed的合集有多個就需要進一步的過濾了,修正選擇器 selector: "div > p + div.aaron [type="checkbox"]"
7 OK,跳到一下階段的編譯函數(shù)

deferred對象

開發(fā)網(wǎng)站的過程中，我們經(jīng)常遇到某些耗時很長的javascript操作。其中，既有異步的操作（比如ajax讀取服務(wù)器數(shù)據(jù)），也有同步的操作（比如遍歷一個大型數(shù)組），它們都不是立即能得到結(jié)果的。

通常的做法是，為它們指定回調(diào)函數(shù)（callback）。即事先規(guī)定，一旦它們運行結(jié)束，應(yīng)該調(diào)用哪些函數(shù)。

但是，在回調(diào)函數(shù)方面，jQuery的功能非常弱。為了改變這一點，jQuery開發(fā)團隊就設(shè)計了deferred對象。

簡單說，deferred對象就是jQuery的回調(diào)函數(shù)解決方案。在英語中，defer的意思是"延遲"，所以deferred對象的含義就是"延遲"到未來某個點再執(zhí)行。

回顧一下jQuery的ajax操作的傳統(tǒng)寫法：

$.ajax()操作完成后，如果使用的是低于1.5.0版本的jQuery，返回的是XHR對象，你沒法進行鏈式操作；如果高于1.5.0版本，返回的是deferred對象，可以進行鏈式操作。

現(xiàn)在，新的寫法是這樣的：

deferred對象的另一大好處，就是它允許你為多個事件指定一個回調(diào)函數(shù)，這是傳統(tǒng)寫法做不到的。

請看下面的代碼，它用到了一個新的方法$.when()：

這段代碼的意思是，先執(zhí)行兩個操作$.ajax("test1.html")和$.ajax("test2.html")，如果都成功了，就運行done()指定的回調(diào)函數(shù)；如果有一個失敗或都失敗了，就執(zhí)行fail()指定的回調(diào)函數(shù)。

jQuery.Deferred( func ) 的實現(xiàn)原理

內(nèi)部維護了三個回調(diào)函數(shù)列表：成功回調(diào)函數(shù)列表、失敗回調(diào)函數(shù)列表、消息回調(diào)函數(shù)列表，其他方法則圍繞這三個列表進行操作和檢測。

jQuery.Deferred( func ) 的源碼結(jié)構(gòu)：

jQuery.when( deferreds )

提供了基于一個或多個對象的狀態(tài)來執(zhí)行回調(diào)函數(shù)的功能，通常是基于具有異步事件的異步隊列。

jQuery.when( deferreds ) 的用法

如果傳入多個異步隊列對象，方法 jQuery.when() 返回一個新的主異步隊列對象的只讀副本，只讀副本將跟蹤所傳入的異步隊列的最終狀態(tài)。

一旦所有異步隊列都變?yōu)槌晒顟B(tài)，“主“異步隊列的成功回調(diào)函數(shù)被調(diào)用；

如果其中一個異步隊列變?yōu)槭顟B(tài)，主異步隊列的失敗回調(diào)函數(shù)被調(diào)用。

圖片描述

異步隊列 Deferred

解耦異步任務(wù)和回調(diào)函數(shù)

為 ajax 模塊、隊列模塊、ready 事件提供基礎(chǔ)功能。

原型屬性和方法

原型屬性和方法源代碼：

屬性selector用于記錄jQuery查找和過濾DOM元素時的選擇器表達式。
屬性.length表示當(dāng)前jquery對象中元素的個數(shù)。
方法.size()返回當(dāng)前jquery對象中元素的個數(shù)，功能上等同于屬性length，但應(yīng)該優(yōu)先使用length，因為他沒有函數(shù)調(diào)用開銷。

.size()源碼如下：

方法.toArray()將當(dāng)前jQuery對象轉(zhuǎn)換為真正的數(shù)組，轉(zhuǎn)換后的數(shù)組包含了所有元素，其源碼如下：

方法.get(index)返回當(dāng)前jQuery對象中指定位置的元素，或包含了全部元素的數(shù)組。其源
碼如下：

首先會判斷num是否小于0，如果小于0，則用length+num重新計算下標，然后使用數(shù)組訪問操作符（[]）獲取指定位置的元素，這是支持下標為負數(shù)的一個小技巧；如果大于等于0，直接返回指定位置的元素。

eg()和get()使用詳解：jquery常用方法及使用示例匯總

方法.each()用于遍歷當(dāng)前jQuery對象，并在每個元素上執(zhí)行回調(diào)函數(shù)。方法.each()內(nèi)部通過簡單的調(diào)用靜態(tài)方法jQuery.each()實現(xiàn)：

回調(diào)函數(shù)是在當(dāng)前元素為上下文的語境中觸發(fā)的，即關(guān)鍵字this總是指向當(dāng)前元素，在回調(diào)函數(shù)中return false 可以終止遍歷。

方法.map()遍歷當(dāng)前jQuery對象，在每個元素上執(zhí)行回調(diào)函數(shù)，并將回調(diào)函數(shù)的返回值放入一個新jQuery對象中。該方法常用于獲取或設(shè)置DOM元素集合的值。

原型方法.pushStack()創(chuàng)建一個新的空jQuery對象，然后把DOM元素集合放入這個jQuery對象中，并保留對當(dāng)前jQuery對象的引用。

原型方法.pushStack()是核心方法之一，它為以下方法提供支持：

jQuery對象遍歷：.eq()、.first()、.last()、.slice()、.map()。

DOM查找、過濾：.find()、.not()、.filter()、.closest()、.add()、.andSelf()。

DOM遍歷：.parent()、.parents()、.parentsUntil()、.next()、.prev()、.nextAll()、.prevAll()、.nextUnit()、.prevUnit()、.siblings()、.children()、.contents()。

DOM插入：jQuery.before()、jQuery.after()、jQuery.replaceWith()、.append()、.prepent()、.before()、.after()、.replaceWith()。
定義方法.push( elems, name, selector )，它接受3個參數(shù)：

參數(shù)elems：將放入新jQuery對象的元素數(shù)組（或類數(shù)組對象）。

參數(shù)name：產(chǎn)生元素數(shù)組elems的jQuery方法名。

參數(shù)selector：傳給jQuery方法的參數(shù)，用于修正原型屬性.selector。
方法.end()結(jié)束當(dāng)前鏈條中最近的篩選操作，并將匹配元素還原為之前的狀態(tài)

返回前一個jQuery對象，如果屬性prevObect不存在，則構(gòu)建一個空的jQuery對象返回。方法.pushStack()用于入棧，方法.end()用于出棧

靜態(tài)屬性和方法

相關(guān)源碼如下：

未完待續(xù)、、、今天就先到這里了，下次補齊。別急哈小伙伴們