dom ready方法 - 从jQuery中剥离的独立方法

熟悉jQuery的都知道 $(function(){/*一些操作*/}); 和 $(document).ready(function(){/*一些操作*/}); ，

这里剥离出里面的dom ready方法，以便应用在一些不必使用jQuery等较大框架的页面中，顺便学习分享下jQuery内部代码。

该代码中dom ready的两个基本原理：

1. 在webkit、mozilla、opera、IE9+中，支持DOMContentLoaded事件（IE9开始支持addEventListener等标准事件函数）；
2. 在IE6/7/8中，首先监听onreadystatechange事件，判断document.readyState=="complete"模拟DOMContentLoaded事件，同时异步循环做doScroll检查。

另外，额外监听onload事件，确保在一些古老的浏览器里也能顺利执行。

代码如下：

/**
 * 参考自 jQuery 1.7.2
 */
var domReady = (function(document){
    var // Is the DOM ready to be used? Set to true once it occurs.
        isReady,
        // The deferred used on DOM ready
        readyList,
        // The ready event handler
        DOMContentLoaded;
    
    function domReady(fn) {
        bindReady();
        readyList.add(fn);
    }
    
    function bindReady() {
        if (readyList) {
            return;
        }
        readyList = Callbacks();
        
        // Catch cases where $(document).ready() is called after the
        // browser event has already occurred.
        if ( document.readyState === "complete" ) {
            // Handle it asynchronously to allow scripts the opportunity to delay ready
            return setTimeout( ready, 1 );
        }

        // Mozilla, Opera and webkit nightlies currently support this event
        if ( document.addEventListener ) {
            // Use the handy event callback
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

            // A fallback to window.onload, that will always work
            window.addEventListener( "load", ready, false );

        // If IE event model is used
        } else if ( document.attachEvent ) {
            // ensure firing before onload,
            // maybe late but safe also for iframes
            document.attachEvent( "onreadystatechange", DOMContentLoaded );

            // A fallback to window.onload, that will always work
            window.attachEvent( "onload", ready );

            // If IE and not a frame
            // continually check to see if the document is ready
            var toplevel = false;

            try {
                toplevel = window.frameElement == null;
            } catch(e) {}

            if ( document.documentElement.doScroll && toplevel ) {
                doScrollCheck();
            }
        }
    }
    
    // The DOM ready check for Internet Explorer
    function doScrollCheck() {
        if ( isReady ) {
            return;
        }

        try {
            // If IE is used, use the trick by Diego Perini
            // http://javascript.nwbox.com/IEContentLoaded/
            document.documentElement.doScroll("left");
        } catch(e) {
            setTimeout( doScrollCheck, 1 );
            return;
        }

        // and execute any waiting functions
        ready();
    }
    
    // Handle when the DOM is ready
    function ready() {
        if ( !isReady ) {
            // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
            if ( !document.body ) {
                return setTimeout( ready, 1 );
            }
            
            // Remember that the DOM is ready
            isReady = true;
            
            readyList.fire();
        }
    }
    
    // Cleanup functions for the document ready method
    if ( document.addEventListener ) {
        DOMContentLoaded = function() {
            document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
            ready();
        };

    } else if ( document.attachEvent ) {
        DOMContentLoaded = function() {
            // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
            if ( document.readyState === "complete" ) {
                document.detachEvent( "onreadystatechange", DOMContentLoaded );
                ready();
            }
        };
    }
    
    function Callbacks() {
        var // Actual callback list
            list = [],
            // Flag to know if list was already fired
            fired,
            // Flag to know if list is currently firing
            firing,
            // First callback to fire (used internally by add and fireWith)
            firingStart,
            // End of the loop when firing
            firingLength,
            // Index of currently firing callback (modified by remove if needed)
            firingIndex;
        
        var self = {
            add: function(fn) {
                var length = list.length;
                list.push( fn );
                // Do we need to add the callbacks to the
                // current firing batch?
                if ( firing ) {
                    firingLength = list.length;
                // With memory, if we're not firing then
                // we should call right away, unless previous
                // firing was halted (stopOnFalse)
                } else if ( fired ) {
                    firingStart = length;
                    self.fire();
                }
            },
            fire: function() {
                fired = true;
                firing = true;
                firingIndex = firingStart || 0;
                firingStart = 0;
                firingLength = list.length;
                for ( ; firingIndex < firingLength; firingIndex++ ) {
                    list[ firingIndex ].call( document );
                }
                firing = false;
            }
        };
        return self;
    }
    
    return domReady;
})(window.document);

调用示例：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>test for dom ready</title>
    </head>
    <body>
hehe
<!-- domready.js -->
<script src="./domready.js"></script>
<script>
domReady(function(){
    alert('hello');
    domReady(function(){
        alert('world');
    });
});
setTimeout(function(){
    domReady(function(){
        alert('soga');
        domReady(function(){
            alert('yoxi');
        });
    });
}, 2e3);
</script>
    </body>
</html>