jQuery 源碼分析筆記(4) Ready函數(shù)
更新時(shí)間:2011年06月02日 00:35:52 作者:
接下來(lái)回到最開(kāi)始的jQuery.extend函數(shù)(268行)中的ready(fn)的定義。這個(gè)函數(shù)用來(lái)處理DOM加載完成的事件。差不多是jQuery最常用的函數(shù)之一了。
這個(gè)功能在 jQuery的文檔中提到了三種等價(jià)的形式:
// 定義在jQuery.fn.ready
$(document).ready(handler);
// 和上一個(gè)是同一個(gè),不推薦
$().ready(handler);
// 單獨(dú)在jQuery對(duì)象中處理
$(handler);
// 以上這個(gè)形式的定義:
if(jQuery.isFunction(selector) {
return rootjQuery.ready(selector);
}
因此實(shí)際上都?xì)w結(jié)與一個(gè)形式:jQuery.fn.ready(fn)。定義如下:
ready: function(fn) {
// 綁定事件到DOM上
jQuery.bindReady();
// 觸發(fā)回調(diào)函數(shù)
readyList.done(fn);
// 返回jQuery對(duì)象
return this;
}
實(shí)際上jQuery內(nèi)部并不僅僅只有一個(gè)對(duì)fn的引用。這里用到了 Deferred功能。在75行,為jQuery對(duì)象定義了readyList成員。而在442行在bindReady函數(shù)中初始化了這個(gè)變量:
if(readyList) {
return;
}
readyList = jQuery._Deferred();
bindReady函數(shù)除了初始化readyList之外,主要處理了瀏覽器對(duì)于綁定事件的區(qū)別。IE使用attachEvent而其他瀏覽器使用addEventHandler。這兩個(gè)步驟完成后,ready函數(shù)使用readyList.resolveWith 觸發(fā)回調(diào)函數(shù)。除了這個(gè)工作外,ready還處理了holdReady。這個(gè)API 的作用是延遲ready事件的回調(diào),主要目的是在ready事件前做點(diǎn)事情。holdReady設(shè)置了一個(gè)標(biāo)志位readyWait。當(dāng)這個(gè)標(biāo)志位被設(shè)置之后,ready在調(diào)用readyList.resolveWith之前不停地調(diào)用setTimeout(jQuery.ready, 1)。即每隔固定時(shí)間就遞歸調(diào)用自己(不知道hold時(shí)間久了,js引擎會(huì)不會(huì)棧溢出),這樣最后被holdReady釋放的時(shí)候, setTimeout會(huì)沿著調(diào)用棧回來(lái)的。為了在這個(gè)棧完成之前不觸發(fā)ready回調(diào)函數(shù)。在每次調(diào)用setTimeout的時(shí)候,會(huì)遞增readyWait變量。用來(lái)指示被holdReady函數(shù)延誤了幾次調(diào)用。
###幾個(gè)基礎(chǔ)輔助函數(shù)
在543行開(kāi)始,定義了幾個(gè)值得注意的輔助函數(shù):parseJSON,parseXML和globalEval。parseJSON把一個(gè)字符串變成JSON對(duì)象。我們一般使用的是eval。parseJSON封裝了這個(gè)操作,但是eval被當(dāng)作了最后手段。因?yàn)樽钚翵avaScript標(biāo)準(zhǔn)中加入了JSON序列化和反序列化的API。如果瀏覽器支持這個(gè)標(biāo)準(zhǔn),則這兩個(gè)API是在JS引擎中用Native Code實(shí)現(xiàn)的,效率肯定比eval高很多。目前來(lái)看,Chrome和Firefox4都支持這個(gè)API。parseJSON使用如下:
// 原生JSON API。反序列化是JSON.stringify(object)
if(window.JSON && window.JSON.parse) {
return window.JSON.parse(data);
}
// ... 大致地檢查一下字符串合法性
return (new Function("return " + data))();
parseXML函數(shù)也主要是標(biāo)準(zhǔn)API和IE的封裝。標(biāo)準(zhǔn)API是DOMParser對(duì)象。而IE使用的是Microsoft.XMLDOM的 ActiveXObject對(duì)象。定義:
if(window.DOMParser) {
tmp = new DOMParser();
xml = tmp.parseFromString(data, "text/xml");
} else {
xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = "false";
xml.loadXML(data);
}
globalEval函數(shù)把一段腳本加載到全局context中。IE中可以使用window.execScript。其他瀏覽器需要使用eval。因?yàn)檎麄€(gè)jQuery代碼都是一整個(gè)匿名函數(shù),所以當(dāng)前context是jQuery。主要代碼:
(window.execScript || function(data) {
window["eval"].call(window, data); // 在window context下運(yùn)行
})(data);
復(fù)制代碼 代碼如下:
// 定義在jQuery.fn.ready
$(document).ready(handler);
// 和上一個(gè)是同一個(gè),不推薦
$().ready(handler);
// 單獨(dú)在jQuery對(duì)象中處理
$(handler);
// 以上這個(gè)形式的定義:
if(jQuery.isFunction(selector) {
return rootjQuery.ready(selector);
}
因此實(shí)際上都?xì)w結(jié)與一個(gè)形式:jQuery.fn.ready(fn)。定義如下:
復(fù)制代碼 代碼如下:
ready: function(fn) {
// 綁定事件到DOM上
jQuery.bindReady();
// 觸發(fā)回調(diào)函數(shù)
readyList.done(fn);
// 返回jQuery對(duì)象
return this;
}
實(shí)際上jQuery內(nèi)部并不僅僅只有一個(gè)對(duì)fn的引用。這里用到了 Deferred功能。在75行,為jQuery對(duì)象定義了readyList成員。而在442行在bindReady函數(shù)中初始化了這個(gè)變量:
復(fù)制代碼 代碼如下:
if(readyList) {
return;
}
readyList = jQuery._Deferred();
bindReady函數(shù)除了初始化readyList之外,主要處理了瀏覽器對(duì)于綁定事件的區(qū)別。IE使用attachEvent而其他瀏覽器使用addEventHandler。這兩個(gè)步驟完成后,ready函數(shù)使用readyList.resolveWith 觸發(fā)回調(diào)函數(shù)。除了這個(gè)工作外,ready還處理了holdReady。這個(gè)API 的作用是延遲ready事件的回調(diào),主要目的是在ready事件前做點(diǎn)事情。holdReady設(shè)置了一個(gè)標(biāo)志位readyWait。當(dāng)這個(gè)標(biāo)志位被設(shè)置之后,ready在調(diào)用readyList.resolveWith之前不停地調(diào)用setTimeout(jQuery.ready, 1)。即每隔固定時(shí)間就遞歸調(diào)用自己(不知道hold時(shí)間久了,js引擎會(huì)不會(huì)棧溢出),這樣最后被holdReady釋放的時(shí)候, setTimeout會(huì)沿著調(diào)用棧回來(lái)的。為了在這個(gè)棧完成之前不觸發(fā)ready回調(diào)函數(shù)。在每次調(diào)用setTimeout的時(shí)候,會(huì)遞增readyWait變量。用來(lái)指示被holdReady函數(shù)延誤了幾次調(diào)用。
###幾個(gè)基礎(chǔ)輔助函數(shù)
在543行開(kāi)始,定義了幾個(gè)值得注意的輔助函數(shù):parseJSON,parseXML和globalEval。parseJSON把一個(gè)字符串變成JSON對(duì)象。我們一般使用的是eval。parseJSON封裝了這個(gè)操作,但是eval被當(dāng)作了最后手段。因?yàn)樽钚翵avaScript標(biāo)準(zhǔn)中加入了JSON序列化和反序列化的API。如果瀏覽器支持這個(gè)標(biāo)準(zhǔn),則這兩個(gè)API是在JS引擎中用Native Code實(shí)現(xiàn)的,效率肯定比eval高很多。目前來(lái)看,Chrome和Firefox4都支持這個(gè)API。parseJSON使用如下:
復(fù)制代碼 代碼如下:
// 原生JSON API。反序列化是JSON.stringify(object)
if(window.JSON && window.JSON.parse) {
return window.JSON.parse(data);
}
// ... 大致地檢查一下字符串合法性
return (new Function("return " + data))();
parseXML函數(shù)也主要是標(biāo)準(zhǔn)API和IE的封裝。標(biāo)準(zhǔn)API是DOMParser對(duì)象。而IE使用的是Microsoft.XMLDOM的 ActiveXObject對(duì)象。定義:
復(fù)制代碼 代碼如下:
if(window.DOMParser) {
tmp = new DOMParser();
xml = tmp.parseFromString(data, "text/xml");
} else {
xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = "false";
xml.loadXML(data);
}
globalEval函數(shù)把一段腳本加載到全局context中。IE中可以使用window.execScript。其他瀏覽器需要使用eval。因?yàn)檎麄€(gè)jQuery代碼都是一整個(gè)匿名函數(shù),所以當(dāng)前context是jQuery。主要代碼:
復(fù)制代碼 代碼如下:
(window.execScript || function(data) {
window["eval"].call(window, data); // 在window context下運(yùn)行
})(data);
您可能感興趣的文章:
- jQuery的ready方法詳解
- jquery中的$(document).ready()使用小結(jié)
- Jquery中"$(document).ready(function(){ })"函數(shù)的使用詳解
- JQuery的ready函數(shù)與JS的onload的區(qū)別詳解
- JQuery onload、ready概念介紹及使用方法
- jQuery之$(document).ready()使用介紹
- jQuery ready函數(shù)濫用分析
- jquery ready(fn)事件使用介紹
- jquery ready()的幾種實(shí)現(xiàn)方法小結(jié)
- jQuery中ready事件用法實(shí)例
相關(guān)文章
利用jQuery的$.event.fix函數(shù)統(tǒng)一瀏覽器event事件處理
做WEB前端開(kāi)發(fā)的人都知道不同的瀏覽器對(duì)事件的處理方式是有區(qū)別的。2009-12-12jQuery實(shí)現(xiàn)form表單基于ajax無(wú)刷新提交方法實(shí)例代碼
在本篇文章里小編給大家整理了關(guān)于jQuery實(shí)現(xiàn)form表單基于ajax無(wú)刷新提交方法實(shí)例代碼,需要的朋友們參考下。2019-11-11寫(xiě)得不錯(cuò)的jquery table鼠標(biāo)經(jīng)過(guò)變色代碼
鼠標(biāo)經(jīng)過(guò)table變色的效果,想必大家都有遇到過(guò)吧,其實(shí)實(shí)現(xiàn)并不難,在本文為大家詳細(xì)介紹下jquery是如何實(shí)現(xiàn)的,感興趣的朋友可以參看下2013-09-09將鼠標(biāo)焦點(diǎn)定位到文本框最后(代碼分享)
本文主要分享了將鼠標(biāo)焦點(diǎn)定位到文本框最后的實(shí)例代碼。具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01jquery實(shí)現(xiàn)全選功能效果的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇jquery實(shí)現(xiàn)全選功能效果的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05jQuery實(shí)現(xiàn)文本展開(kāi)收縮特效
在網(wǎng)頁(yè)上只有一個(gè)小區(qū)域,但是說(shuō)明性的文字又很長(zhǎng),下面這段腳本實(shí)現(xiàn)的是長(zhǎng)文字的部分顯示,有類(lèi)似需求的朋友可以參考下哈,希望對(duì)你有所幫助2015-06-06jquery設(shè)置元素的readonly和disabled的寫(xiě)法
Jquery的api中提供了對(duì)元素應(yīng)用disabled和readonly屬性的方法,在這里記錄下,感興趣的朋友可以練練手了2013-09-09