《JavaScript框架设计》——1.5　主流框架引入的机制——domReady

本节书摘来自异步社区《JavaScript框架设计》一书中的第1章，第1.5节，作者：司徒正美 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.5　主流框架引入的机制——domReady

domReady其实是一种名为“DOMContentLoaded”事件的别称，不过由于框架的需要，它与真正的DOMContentLoaded有一点区别。在许多旧的JavaScript书藉中，它们都会教导我们把JavaScript逻辑写在window.onload回调中，以防DOM树还没有建完就开始对节点进行操作,导致出错。而对于框架来说，越早介入对DOM的干涉就越好，如要进行什么特征侦测之类的。domReady还可以满足用户提前绑定事件的需求，因为有时页面图片等资源过多，window.onload就迟迟不能触发，这时若还没有绑定事件，用户点哪个按钮都没反应（除了跳转外）。因此主流框架都引入domReady机制，并且费了很大劲兼容所有浏览器，具体策略如下。

（1）对于支持DOMContentLoaded事件的使用DOMContentLoaded事件。

（2）旧版本IE使用Diego Perini发现的著名hack!

//by Diego Perini 2007.10.5
function IEContentLoaded(w, fn) {
    var d = w.document, done = false,
            init = function() {
        if (!done) {//只执行一次
            done = true;
            fn();
        }
    };
    (function() {
        try {//在DOM未建完之前调用元素doScroll抛出错误
            d.documentElement.doScroll('left');
        } catch (e) {//延迟再试
            setTimeout(arguments.callee, 50);
            return;
        }
        init();//没有错误则执行用户回调
    })();
    // 如果用户是在domReady之后绑定这个函数呢？立即执行它
    d.onreadystatechange = function() {
        if (d.readyState == 'complete') {
            d.onreadystatechange = null;
            init();
        }
    };
}

此外，IE还可以通过script defer hack进行判定。

//by Andrea Giammarchi 2006.9.24
document.write("<script id=__ie_onload defer src=//0><\/scr" + "ipt>");
script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {//IE即使是死链也能触发事件
    if (this.readyState == "complete"){
        init(); // 指定了defer的script会在DOM树建完才触发
    };

不过有个问题是，如果我们的种子模块是动态加载的，在它插入DOM树时，DOM树已经建完呢？这该怎么触发我们的ready回调？jQuery给出的方案是，连onload也监听了，但如果连onload也没赶上，就判定document.readyState是否等于complete！这样完美了吧，可惜Firefox3.6之前没有这属性！看mass给出的方案。

var readyList = [];
mass.ready = function(fn) {
    if (readyList) {
        fn.push(fn);
    } else {
        fn();
    }
}
var readyFn, ready = W3C ? "DOMContentLoaded" : "readystatechange";
function fireReady() {
    for (var i = 0, fn; fn = readyList[i++]; ) {
        fn();
    }
    readyList = null;
    fireReady = $.noop; //惰性函数，防止IE9二次调用_checkDeps
}
function doScrollCheck() {
    try { //IE下通过doScrollCheck检测DOM树是否建完
        html.doScroll("left");
        fireReady();
    } catch (e) {
        setTimeout(doScrollCheck);
    }
}

//在Firefox3.6之前，不存在readyState属性

if (!DOC.readyState) {
    var readyState = DOC.readyState = DOC.body ? "complete" : "loading";
}
if (DOC.readyState === "complete") {
    fireReady(); //如果在domReady之外加载
} else {
    $.bind(DOC, ready, readyFn = function() {
        if (W3C || DOC.readyState === "complete") {
            fireReady();
            if (readyState) { //IE下不能改写DOC.readyState
                DOC.readyState = "complete";
            }
        }
    });
    if (html.doScroll) {
        try { //如果跨域会报错，那时肯定证明是存在两个窗口的
            if (self.eval === parent.eval) {
                doScrollCheck();
            }
        } catch (e) {
            doScrollCheck();
        }
    }
}