Js框架设计之DomReady

<script>
    /**
     *方法作用:DomReady其实是一种名为"DomContentLoaded"事件的名称,不过由于框架的需要,
     它与真正的DomContentLoaded有区别,在旧的JS书籍中m都会让我们把Js函数写到window.onload函数中,
     防止Dom树还没有建好,就对节点进行操作,产生错误。而对框架来说,越早介入对Dom的干涉越好,
     如果要进行特征侦测之类的。DomReady还可以满足用户提前绑定事件的需求,因为有时页面图片资源过多,
     window.onload迟迟不能触发,这时若还没有绑定事件,用户点哪个按钮都没有反应。因此主流框架都引入domready机制,
     并且废了很大的劲兼容很多的浏览器

     readyState 属性返回当前文档的状态（载入中……）。
     该属性返回以下值:
     uninitialized - 还未开始载入
     loading - 载入中
     interactive - 已加载，文档与用户可以开始交互
     complete - 载入完成

     逻辑:
     1、首先通过document.readyState判断DOM节点的加载情况，如果文档加载完成(HTML标签转换成DOM节点)document.readyState=complete
     那么直接执行Dom.beforeReady()方法
     2、如果文档没有加载完成,且浏览器是不是IE,那么
     */




    var Dom = [];
    Dom.isReady = false;//用于判断页面是否加在完毕
    Dom.domReady = function (fn) {
        if (Dom.isReady)
            fn();
        else
            Dom.push(fn);
    }

    //页面加载完毕(readyState="complete")立即执行当前函数
    Dom.beforeReady = function () {
        //通过isReady属性,控制beforeReady只执行一次
        //通过判断document.body,确认文档是否加在完毕,否则循环每隔16ms,吊用自己
        //上面的判断都通过后,循环执行Dom数组中的方法
        if(!Dom.isReady){
            if(!document.body){
                setTimeout(arguments.callee,16);
            }
            Dom.isReady=true;
            for(var i=0,fn;fn=Dom[i];i++){
                fn();//虽然不太合理,但是在Javascript中这是可行的
            }
        }
    }

    /**
     * 开始初始化domReady函数,判定页面加载在情况    start
     */
    if (!document.readyState) {
        //处理在firefox3.6之前，不存在readyState属性的bug   http://www.cnblogs.com/rubylouvre/archive/2012/12/18/2822912.html
        var readyState = document.readyState = document.body ? "complete" : "loading";
    }
    if (document.readyState === "complete") {
        Dom.beforeReady();
    }
    else if (-[1,]) {//如果浏览器不是IE,那么给document绑定DOMContentLoaded事件
        //addEventListener() 方法用于向指定元素添加事件句柄。
        //提示： 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄
        //注意： Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法，，Opera 7.0 及 Opera 更早版本也不支持。
        // 但是，对于这些不支持该函数的浏览器，你可以使用 attachEvent() 方法来添加事件句柄 (查看 "更多实例" 了解跨浏览器的解决方案)。
        //removeEventListener(event,function,useCapture)
        //event 必须。字符串，指定事件名。
        //function    必须。指定要事件触发时执行的函数。
        //useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。 true - 事件句柄在捕获阶段执行 false- false- 默认。事件句柄在冒泡阶段执行
        document.addEventListener("DOMContentLoaded", function () {
            document.removeEventListener("DOMContentLoaded",arguments.callee, false);
            Dom.beforeReady();
        });
    }
    else {//IE的情况

        //在IE下,使Dom.domReady先于window.onload执行
        //1、在老版本IE中onreadystatechange事件会触发在window.onload之后
        //2、当页面包含图片时，onreadystatechange事件会触发在window.onload之后(换言之，它只能正确地执行于页面不包含二进制资源或非常少或者被缓存时)
        document.attachEvent("onreadystatechange", function() {
            if ( document.readyState == "complete" ) {
                document.detachEvent("onreadystatechange", arguments.callee );
                Dom.beforeReady();
            }
        });
        (function () {
            // DOM树未创建完之前调用doScroll会抛出错误
            var node = new Image();
            try {
                node.doScroll();
                node = null;//防止IE内存泄漏
            }
            catch (e) {
                //javascrpt最短时钟间隔为16ms，这里取64  http://blog.csdn.net/aimingoo/article/details/1451556
                setTimeout(arguments.callee, 64);
                return;
            }
            Dom.beforeReady();
        })();
    }
    /**
     * 开始初始化domReady函数,判定页面加载在情况    end
     */

    window.onload = function(){
        var p = document.createElement("p")
        p.innerHTML = "window.onload"
        document.body.appendChild(p);
    };
    Dom.domReady(function(){
        var p = document.createElement("p")
        p.innerHTML = "domReady1"
        document.body.appendChild(p);
    });
    Dom.domReady(function(){
        var p = document.createElement("p")
        p.innerHTML = "domReady2"
        document.body.appendChild(p);
    });
</script>