重新整理javascript的domReady函数

有关DOM加载的事件监听方法的讨论，对前端开发人员绝对不是陌生的话题了，熟悉jquery库的朋友都能体会到$(function(){...})的重要性。那么对于长期从事前端开发工作，特别是以javascript开发为主要工作的前端们，是不会满足于只会使用类库的。知其然，当然还要知其所以然。

现在网上搜索到的javascript实现DOM加载事件的方法，大多数都是发布于07年（或更早）的解决方案，其中有两点内容至少在现在来看让人失望或者需要更新：

1. 大部分文章都是将焦点集中于IE浏览器的监听方法上，而没有谈到完整的domReady方法应该解决的细节问题。比如多次调用domReady方法的问题。
2. 当时（07年早期）的Safari浏览器还不支持对DOMContentLoaded事件的监听。但从07年10月（WebKit Bugzilla Bug 5122 RESOLVED FIXED ）开始，它已开始支持该事件，所以那些在Safari中模拟DOMContentLoaded的方法都已过时。（对08年,09年，甚至10年还转载那些老旧文章的人感到无语）

今天有空，重新整理了一下domReady函数，在此记录了实现思路，并附上测试页面，方便以后的回顾和再次更新。

首先看一下domReady函数应该具备的基本功能：

1. 允许多次调用domReady(fn)函数。
2. 所有通过domReady(fn)添加的回调函数要按添加顺序执行。
3. 在DOMContentLoaded事件触发之后调用的domReady(fn)，fn函数应该马上被执行。

基于以上基本功能，domReady函数的代码设计有以下几点思路：

1. domReady方法由闭包创建，这样可以将页面的加载状态保存下来而又不会造成代码污染。
2. 在DOMContentLoaded事件触发之前调用domReady(fn)，在函数内部被理解为一种push行为，所有的fn将被push到一个数组队列中，当'DOMContentLoaded'事件触发时，按顺序执行。
3. 使用分支技术在代码加载执行时完成筛选，在调用domReady函数时不再有任何关于浏览器的判断。
4. 因为IE不支持DOMContentLoaded事件，而是通过复杂的“模拟”实现的，出于简洁性，可维护性和第2点功能的考虑，该事件只绑定一次。即只在第一次调用domReady时，“模拟”绑定DOMContentLoaded事件。

完整代码：

/*

 * domReady 

 * Cross Browsers DOMContentLoaded Event Method

 * @param fn {Function} the DOMContentLoaded Callback Function

 * @author Doomin | http://joy-studio.com

 * @update 2011-02-25

*/

var domReady = (function () {

    var doc = document,

        branch = '/v' == 'v' ? 'ie' : 'w3c'; //branching flag

    var DomReady = {

        // When DomReady.done is true, all 'fn' will be invoked immediately.

        done: false,

        // The stack which all functions will be pushed into

        fn: [],

        // push callback functions

        push: function (fn) {

            if (!DomReady.done) {

                // only bind once

                if (DomReady.fn.length === 0) {

                    DomReady.bind();

                }

                DomReady.fn.push(fn);

            } else {

                fn();

            }

        },

        // The Real DOMContentLoaded Callback Function

        ready: function () {

            // Flag DOMContentLoaded Event was Done over

            DomReady.done = true;



            var fn = DomReady.fn;

            for (var i = 0, l = fn.length; i < l; i++) {

                fn[i]();

            }



            DomReady.unbind();

            DomReady.fn = null;

        },

        bind: {

            w3c: function () {

                doc.addEventListener('DOMContentLoaded', DomReady.ready, false);

            },

            //IE的监听方法参考了这篇文章：http://javascript.nwbox.com/IEContentLoaded/

            ie: function () {

                var done = false,

                    // only fire once

                    init = function () {

                        if (!done) {

                            done = true;

                            DomReady.ready();

                        }

                    };

                // polling for no errors

                (function () {

                    try {

                        // throws errors until after ondocumentready

                        doc.documentElement.doScroll('left');

                    } catch (e) {

                        setTimeout(arguments.callee, 20);

                        return;

                    }

                    // no errors, fire

                    init();

                })();

                // trying to always fire before onload

                doc.onreadystatechange = function () {

                    if (doc.readyState == 'complete') {

                        doc.onreadystatechange = null;

                        init();

                    }

                };

            }

        }[branch],

        unbind: {

            w3c: function () {

                doc.removeEventListener('DOMContentLoaded', DomReady.ready, false);

            },

            ie: function () {/* nothing to do */}

        }[branch]

    };



    return DomReady.push;

})(); 

代码测试：

下面提供一个测试页面 ，这个页面中包含一个div#test空元素和一张图片。在javascript中有一个名为addP的函数，它的功能是向div#test元素添加一个p元素，其中包括一些文本信息以方便查看结果。该测试一共调用三次domReady函数，前两次调用传入的回调函数将在DOMContentLoaded事件触发时按顺序执行，第三次是在延迟2秒后调用，这时DOMContentLoaded事件已被触发，所以传入的回调函数会立刻被执行。全部javascript测试代码如下：

function addP(txt){

    var div = document.getElementById('test');

    var p = document.createElement('p');

    var text = document.createTextNode(txt+' > '+new Date().getTime());

    p.appendChild(text);

    div.appendChild(p);

}





//在DOMContentLoaded之前, 第一次调用domReady

domReady(function(){

    addP('DOMContentLoaded被触发, 执行第一个回调函数');    

});

//在DOMContentLoaded之前, 第二次调用domReady

domReady(function(){

    addP('执行第二个回调函数');    

});



//延迟2秒, 确保在DOMContentLoaded触发以后调用domReady

setTimeout(function(){

    domReady(function(){

        addP('2秒后，第三个回调函数被立即执行');    

    });

}, 2000);

Doomin 水平有限，如果文中有错，敬请留言交流！

转载声明： 原创文章，转载必须以链接形式注明原文作者和原文地址，谢谢合作。