模拟JQuery的Ready方法实现并出现的问题

今天在阅读网上一些模拟Jq的ready方法时，发现一些小细节，就是网上的ready事件大部分都是在onload事件执行后加载，而jquery确能在onload加载前，dom加载完后执行，一直不了解，基于对网上的一些方法逻辑不了解，所以去看了《jquery源代码研究(ready函数) 》这篇文章后自己写入如下代码（已有详细说明）：

代码 <! DOCTYPEhtmlPUBLIC " -//W3C//DTDXHTML1.0Transitional//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
< htmlxmlns = " http://www.w3.org/1999/xhtml " >
< head >
< metahttp - equiv = " Content-Type " content = " text/html;charset=utf-8 " / >
< title > document.ready < / title>
< scripttype = " text/javascript " src = " js/jquery-1.3.2.js " >< / script>
< scripttype = " text/javascript " >
var Darren;
( function (){
var isReady = false ; // 是否已经加载完毕
var readBound = false ; // 判断是否已经调用过循环事件
var readylist = []; // 把需要执行的方法先暂存在这个数组里

// 判断浏览器，该方法来自CloudgamerJavaScriptLibraryv0.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方法只执行一遍
return ;
}
readBound = true ;

// ForIE并且不是嵌套在frame中
if (Browser.msie && window == top)
{
( function (){
if (isReady){
return ;
}
try {
document.documentElement.doScroll( " left " ); // 如果没加载dom完毕这个会报错
}
catch (error){
setTimeout(arguments.callee, 0 ); // 循环调用父函数,也就是ready方法
return ;
}
Test.Done();
})();
} else if (Browser.firefox) // ForFF
{
document.addEventListener( " DOMContentLoaded " ,Test.Done, false );
}
}
var Test = {
ready: function (fn){
bindReady(); // 判断是否加载完毕
if (isReady)
{
fn.call(document); // 加载完毕，直接调用
} else {
readylist.push(fn); // 如果还没加载完成则将该方法暂存到readylist数组中，以便以后调用
}
return this ;
}
};
// 静态方法：加载完毕执行
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 >
< divid = " test " > test < / div>
< / body>
< / html>

更多相关文章

随机推荐