jQuery的運行機制和設計理念

jQuery的設計理念

使用jQuery以前，咱們都會問jQuery是什麼？jQuery是一個類庫，和prototype，mootools等類庫同樣，爲Web的JavaScript開發提供輔助功能。那爲何要選用jQuery呢？在jQuery出現以前，Prototype，YUI都是很成熟的Js的框架，並且是各有各的特色。爲何要拋棄它們，而使用後起之秀的jQuery，它有什麼優秀的特性吸引開發人員呢？

回答這個問題，咱們得明白jQuery的設計理念。回憶或想象一下，咱們在Web開發中是如何使用JavaScript？絕大多數時間都是採用getElementById在Dom文檔中找到DOM元素，而後取值或設定值，採用innerHTML取其內容或設定其內容，或進行事件的監聽(如click)，在控制樣式方面，咱們會進行height,width,display等的改變，達到視覺上的效果，對於Ajax方面，也是取到數據在頁面的某元素裏面去添充內容。

綜之，咱們就是在對DOM元素在進行操做。這個元素多是一個或是多個。這個元素多是Document，Window或DOM元素。這樣咱們的任務就是二大部分，一是找DOM元素，二是對DOM元素進行操做。

對於用得熟練一點，不論是採用如getElementById這樣的直接查找方式仍是採用如Element.lastChild這類的間接查找方式不是很難的，對於DOM元素，DOM的操做方面也是很豐富，也不是很難使用？那麼要類庫作什麼用呢？最難的一個問題就是瀏覽器的兼容的問題。全部的JavaScript框架都要解決這一個問題，同時簡化JavaScript的自己自帶的操做。

Prototype能夠說是開創了Js類庫的先河，給咱們耳目一新的感受。它解決大部分的瀏覽器的兼容的問題。同時簡化了原始函數名長難於記憶的常常書寫出的錯的問題（採用$(xx)代替getElementById），提供了Ajax的訪問方式，擴展了Array,Object,Function，Event等JavaScript原生對象。

可是這些仍是不能知足開發的須要，好比在DOM樹中尋找DOM元素，僅僅只能是經過元素的ID，可是咱們想要更方便的查找方法，同時還但願能有一個統一的入口，不要太泛，學習曲線太高或難於使用。

jQuery就是從這裏出發，把全部一切都統一在jQuery對象中。使用jQuery就是使用jQuery對象。其實jQuery開創性的工做就是如其名同樣：query。它強大的查找功能令全部的框架都黯然失色。jQuery實質就是一個查詢器。在查詢器的基礎還提供對查找到的元素進行操做的功能。這樣說來jQuery就是查詢和操做的統一。查詢是入口，操做是結果。

jQuery在實現上也能夠分紅兩大部分，一部分是jQuery的靜態方法，也能夠稱做實用方法或工具方法，經過jQuery.xxx()的jQuery命名空間直接引用。第二部分是jQuery的實例方法，經過jQuery(xx)或$(xx)來生成jQuery實例，而後經過這個實例來引用的方法。這部分的方法大多數是從採用靜態方法代理來完成功能。真正的功能性的操做都在jQuery的靜態方法中實現。這些功能細分起來，能夠分紅如下幾個部分：

一、Selector，查找元素。這個查找不但包含基於CSS1~CSS3的CSS Selector功能，還包含其對直接查找或間接查找而擴展的一些功能。

二、Dom元素的屬性操做。Dom元素能夠看做html的標籤，對於屬性的操做就是對於標籤的屬性進行操做。這個屬性操做包含增長，修改，刪除，取值等。

三、Dom元素的CSS樣式的操做。CSS是控制頁面的顯示的效果。對CSS的操做那就得包含高度，寬度，display等這些經常使用的CSS的功能。

四、Ajax的操做。Ajax的功能就是異步從服務器取數據而後進行相關操做。

五、Event的操做。對Event的兼容作了統一的處理。

六、動畫(Fx)的操做。能夠看做是CSS樣式上的擴展。

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對象。

舉幾個例子：

一、$($(「P」))能夠看出其參數能夠是jQuery對象或ArrayLike的集合。

二、$()是$(document)的簡寫。

三、$(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對象的操做方法。如

jQueryjQuery.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) {  
    selectorselector = 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));   
    }