快捷導(dǎo)航

javascript 模擬JQuery的Ready方法實現(xiàn)并出現(xiàn)的問題

更新時間：2009年12月06日 00:55:13 作者：

今天在閱讀網(wǎng)上一些模擬Jq的ready方法時，發(fā)現(xiàn)一些小細(xì)節(jié)，就是網(wǎng)上的ready事件大部分都是在onload事件執(zhí)行后加載，而jquery確能在onload加載前。

dom加載完后執(zhí)行，一直不了解，基于對網(wǎng)上的一些方法邏輯不了解，所以去看了《jquery源代碼研究(ready函數(shù)) 》這篇文章后自己寫入如下代碼（已有詳細(xì)說明）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>document.ready</title> 
<script type="text/javascript" src="js/jquery-1.3.2.js"></script> 
<script type="text/javascript"> 
var Darren; 
(function(){ 
var isReady=false; //是否已經(jīng)加載完畢 
var readBound=false; //判斷是否已經(jīng)調(diào)用過循環(huán)事件 
var readylist=[]; //把需要執(zhí)行的方法先暫存在這個數(shù)組里 
//判斷瀏覽器，該方法來自Cloudgamer JavaScript Library v0.1 
var Browser = (function(ua){ 
var b = { 
msie: /msie/.test(ua) && !/opera/.test(ua), 
opera: /opera/.test(ua), 
safari: /webkit/.test(ua) && !/chrome/.test(ua), 
firefox: /firefox/.test(ua), 
chrome: /chrome/.test(ua) 
}; 
var vMark = ""; 
for (var i in b) { 
if (b[i]) { 
vMark = i; 
} 
} 
if (b.safari) { 
vMark = "version"; 
} 
b.version = RegExp("(?:" + vMark + ")[\\/: ]([\\d.]+)").test(ua) ? RegExp.$1 : "0"; 
b.ie = b.msie; 
b.ie6 = b.msie && parseInt(b.version) == 6; 
b.ie7 = b.msie && parseInt(b.version) == 7; 
b.ie8 = b.msie && parseInt(b.version) == 8; 
return b; 
})(window.navigator.userAgent.toLowerCase()); 
function bindReady() 
{ 
if(readBound){ //保證bindReady方法只執(zhí)行一遍 
return; 
} 
readBound=true; 
//For IE并且不是嵌套在frame中 
if (Browser.msie && window==top) 
{ 
(function(){ 
if (isReady) { 
return; 
} 
try { 
document.documentElement.doScroll("left"); //如果沒加載dom完畢這個會報錯 
} 
catch (error) { 
setTimeout(arguments.callee, 0); //循環(huán)調(diào)用父函數(shù),也就是ready方法 
return; 
} 
Test.Done(); 
})(); 
}else if(Browser.firefox)//For FF 
{ 
document.addEventListener( "DOMContentLoaded", Test.Done, false ); 
} 
} 
var Test={ 
ready:function(fn){ 
bindReady();//判斷是否加載完畢 
if(isReady) 
{ 
fn.call(document); //加載完畢，直接調(diào)用 
}else{ 
readylist.push(fn);//如果還沒加載完成則將該方法暫存到readylist數(shù)組中，以便以后調(diào)用 
} 
return this; 
} 
}; 
//靜態(tài)方法：加載完畢執(zhí)行 
Test.Done=function(){ 
if (!isReady) { 
isReady=true; 
} 
readylist[0].call(document); 
} 
Darren=Test; 
})(); 
//測試 
Darren.ready(function(){ 
alert("my"); 
document.getElementById("test").innerHTML="haha" //成功讀取dom 
}); 
$(function(){alert("jq")}); 
window.onload=function(){alert("default")} 
</script> 
</head> 
<body> 
<div id="test">test</div> 
</body> 
</html> 

由于要和jq做對比，所以測試時候需要導(dǎo)入jq庫。函數(shù)本身是沒有調(diào)用jq的，請放心引用。

代碼我通過封裝完成，直接Darren.ready(fn)就可執(zhí)行。

后來通過測試還是出現(xiàn)一個奇怪的問題：在FF下的執(zhí)行順序是jq -> my -> load 。也就是說我這個函數(shù)能夠在onload事件執(zhí)行前觸發(fā)，但會晚于jq的ready。對這個還是比較滿意。

但是在IE下測試居然是：jq -> load -> my。也就是我的這個函數(shù)雖然能夠把代碼提前，但是還是在onload事件執(zhí)行后觸發(fā)的，百思不得其解。

完同志們解答下如何實現(xiàn)onload之前執(zhí)行，jq又是怎么實現(xiàn)的，我完全模擬jq的結(jié)構(gòu)，但是還是不能達到目的，難道中間有漏？

另大家可以參考下面的代碼

復(fù)制代碼代碼如下:

var ready=function(readyCall) { 
if(document.addEventListener) 
document.addEventListener("DOMContentLoaded",function() { 
document.removeEventListener("DOMContentLoaded",arguments.callee,false); 
readyCall(); 
},false); 
else if(document.attachEvent) {//for IE 
if(document.documentElement.doScroll && window.self==window.top) { 
(function() { 
try { 
document.documentElement.doScroll("left"); 
}catch(ex) { 
setTimeout(arguments.callee,5); 
return; 
} 
readyCall(); 
})(); 
}else {//maybe late but also for iframes 
document.attachEvent("onreadystatechange",function() { 
if(document.readyState==="complete") { 
document.detachEvent("onreadystatechange", arguments.callee); 
readyCall(); 
} 
}); 
} 
} 
}