當前位置:才華齋>設計>網頁設計>

jQuery 原始碼分析和Ready函式

網頁設計 閱讀(1.62W)

這個功能在 jQuery的文件中提到了三種等價的形式:

jQuery 原始碼分析和Ready函式

複製程式碼 程式碼如下:

// 定義在y

$(document)y(handler);

// 和上一個是同一個,不推薦

$()y(handler);

// 單獨在jQuery物件中處理

$(handler);

// 以上這個形式的定義:

if(nction(selector) {

return y(selector);

}

因此實際上都歸結與一個形式:y(fn)。定義如下:

複製程式碼 程式碼如下:

ready: function(fn) {

// 繫結事件到DOM上

Ready();

// 觸發回撥函式

(fn);

// 返回jQuery物件

return this;

}

實際上jQuery內部並不僅僅只有一個對fn的引用。這裡用到了 Deferred功能。在75行,為jQuery物件定義了readyList成員。而在442行在bindReady函式中初始化了這個變數:

複製程式碼 程式碼如下:

if(readyList) {

return;

}

readyList = jQuery._Deferred();

bindReady函式除了初始化readyList之外,主要處理了瀏覽器對於繫結事件的區別。IE使用attachEvent而其他瀏覽器使用addEventHandler。這兩個步驟完成後,ready函式使用lveWith 觸發回撥函式。除了這個工作外,ready還處理了holdReady。這個API 的`作用是延遲ready事件的回撥,主要目的是在ready事件前做點事情。holdReady設定了一個標誌位readyWait。當這個標誌位被設定之後,ready在呼叫lveWith之前不停地呼叫setTimeout(y, 1)。即每隔固定時間就遞迴呼叫自己(不知道hold時間久了,js引擎會不會棧溢位),這樣最後被holdReadyk16-0.html" target="_blank" >釋放的時候, setTimeout會沿著呼叫棧回來的。為了在這個棧完成之前不觸發ready回撥函式。在每次呼叫setTimeout的時候,會遞增readyWait變數。用來指示被holdReady函式延誤了幾次呼叫。

###幾個基礎輔助函式

在543行開始,定義了幾個值得注意的輔助函式:parseJSON,parseXML和globalEval。parseJSON把一個字串變成JSON物件。我們一般使用的是eval。parseJSON封裝了這個操作,但是eval被當作了最後手段。因為最新JavaScript標準中加入了JSON序列化和反序列化的API。如果瀏覽器支援這個標準,則這兩個API是在JS引擎中用Native Code實現的,效率肯定比eval高很多。目前來看,Chrome和Firefox4都支援這個API。parseJSON使用如下:

複製程式碼 程式碼如下:

// 原生JSON API。反序列化是JSON.stringify(object)

if( && e) {

return e(data);

}

// ... 大致地檢查一下字串合法性

return (new Function("return " + data))();

parseXML函式也主要是標準API和IE的封裝。標準API是DOMParser物件。而IE使用的是OM的 ActiveXObject物件。定義:

複製程式碼 程式碼如下:

if(arser) {

tmp = new DOMParser();

xml = eFromString(data, "text/xml");

} else {

xml = new ActiveXObject("OM");

c = "false";

XML(data);

}

globalEval函式把一段指令碼載入到全域性context中。IE中可以使用Script。其他瀏覽器需要使用eval。因為整個jQuery程式碼都是一整個匿名函式,所以當前context是jQuery。主要程式碼:

複製程式碼 程式碼如下:

(Script || function(data) {

window["eval"](window, data); // 在window context下執行

})(data);