Jquery源碼分析（修改）

Jquery源碼分析
           

prk/彭仁夔    08-08-18
1、概述
jQuery是一個非常優秀的JS庫，與Prototype,YUI,Mootools等衆多的Js類庫相比，它劍走偏鋒，從web開發實用的角度出發，抛除了其它Lib中一些不實用的東西，為開發者提供了短小精悍的類庫。其短小精悍，使用簡單友善，性能高效，能極大地提高開發效率，是開發web應用的最佳的輔助工具之一。是以大部分開發者在抛棄Prototype而選擇Jquery來進行web開發。
一些開發人員在使用jquery時，由于僅僅隻知道Jquery文檔中的使用方法，不明白Jquery的運作原理，時常會碰到許多的問題。這些問題大部分是使用不當而産生，極少數是Jquery的Bug。如果不明白其運作機理和核心源碼，我們也很難寫出基于jquery類庫的高性能的程式出來。
在調試基于jQuery的程式時，我們大部分時間都要跟蹤進入jQuery對象分析其運作的狀态，但是jQuery代碼不像Ext,YUI那樣中規中舉，它的代碼有點晦澀，難懂。也就說如果想用好jQuery，一定要清楚其源碼。
Jquery的網絡資源豐富，但Baidu了很久，卻很難找到那種完全深入地分析Jquery源碼的文稿。倒是Jquery的開發者，John Resi的《Pro Javascript Techniques》對于Jquery的源碼的分析涉及了，可以看作是jQuery的源碼分析，但是其主指在于JavaScript的使用。我們并不能很明白，很細緻去了解Jquery的源碼。

2、jQuery對象
 在本節中，我們會就Jquery的運作機制和設計理念進行分析和說明。本節分成三個部分：jQuery的體系、建構及數組特性。
2.1、jQuery的設計理念
使用jQuery之前，我們都會問jQuery是什麼？jQuery是一個類庫，和prototype，mootools等類庫一樣，為Web的Js開發提供輔助功能。那為什麼要選用jQuery呢？在jQuery出現之前，Prototype，YUI都是很成熟的Js的架構，而且是各有各的特點。為什麼要抛棄它們，而使用後起之秀的jQuery，它有什麼優秀的特性吸引開發人員呢？
回答這個問題，我們得明白jQuery的設計理念。回憶或想象一下，我們在web開發中是如何使用JS？絕大多數時間都是采用getElementById在Dom文檔中找到Dom元素，然後取值或設定值，采用innerHTML取其内容或設定其内容，或進行事件的監聽(如click)，在控制樣式方面，我們會進行height,width,display等的改變，達到視覺上的效果，對于Ajax方面，也是取到資料在頁面的某元素裡面去添充内容。
綜之，我們就是在對Dom元素在進行操作。這個元素可能是一個或是多個。這個元素可能是document，window或Dom元素。這樣我們的任務就是二大部分，一是找Dom元素，二是對Dom元素進行操作。
對于用得熟練一點，不管是采用如getElementById這樣的直接查找方式還是采用如Element.lastChild這類的間接查找方式不是很難的，對于Dom元素，Dom的操作方面也是很豐富，也不是很難使用？那麼要類庫做什麼用呢？最難的一個問題就是浏覽器的相容的問題。所有的JS架構都要解決這一個問題，同時簡化JS的本身自帶的操作。
Prototype可以說是開創了Js類庫的先河，給我們耳目一新的感覺。它解決大部分的浏覽器的相容的問題。同時簡化了原始函數名長難于記憶的經常書寫出的錯的問題（采用$(xx)代替getElementById），提供了Ajax的通路方式，擴充了Array,Object,Function，Event等JS原生對象。
但是這些還是不能滿足開發的需要，比如在Dom樹中尋找dom元素，僅僅隻能是通過元素的ID，但是我們想要更友善的查找方法，同時還希望能有一個統一的入口，不要太泛，學習曲線過高或難于使用。
Jquery就是從這裡出發，把所有一切都統一在jQuery對象中。使用jQuery就是使用jQuery對象。其實jQuery開創性的工作就是如其名一樣：query。它強大的查找功能令所有的架構都黯然失色。
jQuery實質就是一個查詢器。在查詢器的基礎還提供對查找到的元素進行操作的功能。這樣說來jQuery就是查詢和操作的統一。查詢是入口，操作是結果。

jQuery在實作上也可以分成兩大部分，一部分是jQuery的靜态方法，也可以稱作實用方法或工具方法，通過jQuery.xxx()的jQuery命名空間直接引用。第二部分是jQuery的執行個體方法，通過jQuery(xx)或$(xx)來生成jQuery執行個體，然後通過這個執行個體來引用的方法。這部分的方法大多數是從采用靜态方法代理來完成功能。真正的功能性的操作都在jQuery的靜态方法中實作。
這些功能細分起來，可以分成以下幾個部分：
1、Selector，查找元素。這個查找不但包含基于CSS1~CSS3的CSS Selector功能，還包含其對直接查找或間接查找而擴充的一些功能。
2、Dom元素的屬性操作。Dom元素可以看作html的标簽，對于屬性的操作就是對于标簽的屬性進行操作。這個屬性操作包含增加，修改，删除，取值等。
3、Dom元素的CSS樣式的操作。CSS是控制頁面的顯示的效果。對CSS的操作那就得包含高度，寬度，display等這些常用的CSS的功能。
4、Ajax的操作。Ajax的功能就是異步從伺服器取資料然後進行相關操作。
5、Event的操作。對Event的相容做了統一的處理。
6、動畫(Fx)的操作。可以看作是CSS樣式上的擴充。

2.2、jQuery對象的建構
 生成或建構一個jQuery對象其實就是建構并運作一個查詢器（selector）。既然是查詢，肯定會查找的結果（Dom元素），之後才會有對這些結果進行操作。那麼這些查找的結果存放在哪裡呢？最好的地方當然是這個jQuery對象内面。查找的結果可能是一個元素，也有可以是多個元素如(NodeSet的集合的形式)。也就是說jQuery對象内面有一個集合。這個集合存放查找到Dom元素。
但是上一小節所提到jQuery對象是所有操作的統一入口，那麼它的建構就不能隻局限于從Dom文檔中查找到Dom元素，還有可能是從别的集合中轉移過來的Dom元素，還有可能是從html的字元串生成的Dom元素。
在Jquery文檔中提供了四種方式：jQuery(expression,[context])，jQuery(html)，jQuery(elements)，jQuery(callback)四種構尋jquery對象的方式。其中jQuery可以用$代替。這四種是經常用到。其實Jquery的參數可以是任何的元素，都能構成jquery對象。
舉幾個例子：
1、$($(“P”))可以看出其參數可以是jQuery對象或ArrayLike的集合。
2、$()是$(document)的簡寫。
3、$(3)會把3放到jQuery對象中集合中。
對于如$(3)這樣的其中元素（如ArrayLike集合的元素）不是Dom元素，最好不要建構jQuery對象，jQuery對象的方法都是針對于dom對象的。不是很清楚其使用的話，很有可能會導緻錯誤。

上面講了這麼多，還是很難明白其原理的，現在從源碼的角度細細分析：
通過jQuery(xxx)的調用實作沒有生成對象，它的this是指向window對象的。那麼jQuery的那些執行個體方法是怎樣繼承過來的呢？看一下：
var jQuery = window.jQuery = window.$ = function(selector, context) {	return new jQuery.fn.init(selector, context);                       ①
};
這是jquery的總的入口，jQuery對象實際上不是通過new jQuery（）而繼承其prototype的中的方法。jQuery對象實際是jQuery.fn.init函數生成的對象。在裡我們可以看出對于jQuery.prototype添加一些函數集的對象的意義不大。因為我們new jQuery()是可以的，但是生成的jQuery對象在return時會被抛棄。是以最好不要用new jQuery()來建構jQuery對象。
jQuery對象其實就是new jQuery.fn.init。那麼jQuery.fn.init.prototype上就是挂着jQuery對象的操作方法。如
jQuery.fn.init.prototype = jQuery.fn;
有時間可能會擔心在589行就實作了把jQuery.fn中的函數放到jQuery.fn.init.prototype上去，那麼之後的通過jquery.fn.extend的方法怎麼辦呢？這裡實際是對jQuery.fn的引用。在擴充jQuery的時候，隻要把相關的函數extend到jQuery.fn就可以了。
現在我們看一下jQuery.fn.init是怎麼完成工作的：
init : function(selector, context) {
		selector = selector || document;// 确定selector存在
		// 第一種情況 Handle $(DOMElement)單個Dom 元素，忽略上下文
		if (selector.nodeType) {                                            ②
			this[0] = selector;
			this.length = 1;
			return this;
		}		
		if (typeof selector == "string") {//selector為string           ③
			var match = quickExpr.exec(selector);			
			if (match && (match[1] || !context)) {
				if (match[1])// 第二種情況處理$(html) -> $(array)         ④
					selector = jQuery.clean([match[1]], context);
				else {// 第三種情況：HANDLE: $("#id")//處理$("#id")
					var elem = document.getElementById(match[3]);	
					if (elem) {						
// IE會傳回name=id的元素 ，如果是這樣，就document.find(s)
if (elem.id != match[3])                        ⑤
							return jQuery().find(selector); 
                        // 建構一個新的jQuery(elem)
						return jQuery(elem);                            ⑥
					}
					selector = [];
				}
			} else                                                      
			// 第四種情況：處理$(expr, [context])==$(content).find(expr)
				return jQuery(context).find(selector);               ⑦
		} else if (jQuery.isFunction(selector))                      ⑧ 	// 第五種情況：處理$(function)七Shortcut for document ready        
return jQuery(document)[jQuery.fn.ready ? "ready" : "load"](selector);
// 第六種情況：處理$(elements)
return this.setArray(jQuery.makeArray(selector));                   ⑨
	},
jQuery.fn.init負責對傳進來的參數進行分析然後生成jQuery對象。它的第一個參數一般來說是必須的（為空的話，就是預設的document）。從源碼的角度第一個參數有着如下四種類型：

類型	說明
Dom Element	
第一個參數為Dom元素，第二個參數不用。直接把Dom元素存在新生成的jQuery對象的集合中。傳回這個jQuery對象。建構jQuery對象完成。

String	
第一個參數為string有三種情況：
 1、html的标簽字元串，$(html) -> $(array)，第二個參數可選。
   執行selector = jQuery.clean([match[1]], context);。該語句是把    hteml的字元串轉換成dom對象的數組。接着執行Array類型的傳回。
2、字元串為#id時$(id)
   首先通過var elem = document.getElementById(match[3]);取得elem，如沒有取到selector = [];轉到執行Array類型的傳回空集合jquery對象。
   如找到elem,通過return jQuery(elem);再次生成jquery對象，這次是Dom Element類型的jquery對象的傳回。
3、相容css1-3文法的selector字元串，第二個參數是可選的。     執行return jQuery(context).find(selector);。該語句先執行jQuery(context)。可以看出context第二參數可以是任意的值，可以是集合形式。之後就通過find(selector)找到jQuery(context)中所有dom元素都滿足selector表達式的dom元素的集合，建構新的jquery對象，并傳回。
     #id其實和這種方式是統一的，單獨出來是為了提高性能。


Fn
	
第一參數是函數。第二個參數不用。是$(document).ready(fn)的簡寫，其return jQuery(document)[jQuery.fn.ready ? "ready" : "load"](selector)是其執行的代碼。這個語句首先執行jQuery(document)，它再一次newjQuery.fn.init函數,生成jQuery對象（元素為document）。再調用這個對象的ready(fn)方法。Ready(fn)傳回目前對象。而上面的語句又是傳回這個Ready(fn)的傳回對象。
可見這個$(fn)傳回是$(document)的對象。抛棄了第一次生成的$(fn)對象。



Array	
第一參數是除上面提到Dom元素，函數，string所有其它的類型。可以為空如$()。第二個參數不用。
語句：return this.setArray(jQuery.makeArray(selector));
它首先是把第一個參數轉換數組。Selector可以是Array-like的集合，如jQuery對象，如getElementsByTag傳回的Dom元素集合等，可能支援$(this)。Selector還可能是單個任意的對象。
轉換成标準的數組之後，執行 this.setArray把這個數組中的元素全部存到目前jquery對象的集合中。之後傳回目前的jquery對象。
其實Dom Element完全可能綜合在這裡面，單獨拿起來為了提高性能。

 
從上面的代碼和上表中，我們也可以看出建構jquery對象就是往jquery對象的集合中添加元素（一般都應該是dom元素）。添加的元素有兩種形式：
一是單個元素，可能通過直接的dom元素的傳參形式，還可以通過#id從dom文檔中找元素。
二是集合，如jquery對象，還有數組，還有通過CSS Selector找到的Dom集合等Array-Like。
上表僅僅是分析傳入的參數的類型，它是怎麼做呢？在⑤處它實作CSS1~CSS3的相容的Selector的查尋器的功能。通過jQuery().find(selector);來進行分析String并查找到符合傳入的Selector文法的Dom文檔樹中的元素集合。
在④處，它實作了把html的字元串轉換成Dom元素節點的集合。這個是通過jQuery.clean([match[1]], context);來實作的。
在⑧處，它實作DomReady的jQuery對象的統一入口，我們可以通過$(fn)要注冊domReady的監聽函數。所有的調用jQuery實作的功能代碼都應該在domReady之後才運作。$(fn)是所有的應用開發中的功能代碼的入口。它支援任意多的$(fn)注冊。其是通過return jQuery(document)[jQuery.fn.ready ? "ready" : "load"](selector);來完成的。
找到元素之後就是建構集合了，在⑨處就是通過this.setArray(jQuery.makeArray(selector));來建構jquery對象内部的集合。下面一小節就專門分析它的集合是怎麼實作的。