jQuery的運行機制和設計理念分析

來源:互聯網
上載者:User

其短小精悍,使用簡單方便,效能高效,能極大地提高開發效率,是開發Web應用的最佳的協助工具輔助之一。因此大部分開發人員在拋棄Prototype而選擇jQuery來進行Web開發。

一些開發人員在使用jQuery時,由於僅僅只知道jQuery文檔中的使用方法,不明白jQuery的運行原理,時常會碰到許多的問題。這些問題大部分是使用不當而產生,極少數是jQuery的Bug。如果不明白其運行機理和核心源碼,我們也很難寫出基於jQuery類庫的高效能的程式出來。

在調試基於jQuery的程式時,我們大部分時間都要跟蹤進入jQuery對象分析其啟動並執行狀態,但是jQuery代碼不像Ext,YUI那樣中規中舉,它的代碼有點晦澀,難懂。也就說如果想用好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的靜態方法中實現。這些功能細分起來,可以分成以下幾個部分:

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樣式上的擴充。

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對象的操作方法。如

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));
}

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.