if(document.readyState === "complete"){ //以防Dom文档加载完成后才加载js文件。这时通过此判断来执行fn方法（你要执行的方法）。因为文档加载完成后，document.readyState的值为complete
setTimeout(fn); //异步执行，可以让它后面的代码先执行。这里是jQuery里面的用法，可以不用理解。
}
else if(document.addEventListener){//支持DOMContentLoaded事件
document.addEventListener("DOMContentLoaded",fn,false); //冒泡
window.addEventListener("load",fn,false); //以防DOM树构建好之后才加载js文件。这时不会触发DOMContentLoaded事件（已经触发结束了），只会触发load事件
}
else{
document.attachEvent("onreadystatechange",function(){//针对IE下的iframe安全，有时会优先onload执行，有时不会。
if(document.readyState ==="complete"){
fn();
}
});
window.attachEvent("onload",fn); //总会起到作用，以防其他监听事件没获取到，这样至少可以通过onload事件触发fn方法。
var top = false;//看是否在iframe中
try{//window.frameElement即为包含本页面的iframe或frame对象。没有则为null。
top = window.frameElement == null && document.documentElement;
}catch(e){}
if(top && top.doScroll){ //如果没有iframe，并且是IE
(function doScrollCheck(){
try{
top.doScroll("left");//IE下，如果Dom树构建好，就可以调用html的doScroll方法
}catch(e){
return setTimeout(doScrollCheck,50); //如果还没构建好，则继续监听
}
fn();
})
}
}
fn方法中必须包含移除所有的绑定事件。
当然IE还可以使用script defer hack，原理就是：指定了defer的script会在DOM树构建完后才执行。但是这需要添加额外的js文件，很少在单独的库里面用到。
使用原理：在文档中添加script标签，并用script.src = "xxx.js"，监听script的onreadystatechange事件，当this.readyState == "complete"时，就执行fn方法。
也就是说，DOM构建好之后，xxx.js才会执行，它的this.readyState才会变成complete。
以上便是javascript框架设计的第一章的读书笔记了，内容比较精简，方便大家更好的理解这章的基本内容。
您可能感兴趣的文章: