编写高质量代码(6)

我们一般写JS代码时一般都是

window.onload=function(){

    }

这是在HTML页面DOM元素加载完毕在执行其中的内容，这样可以避免我们执行JS的时候DOM结构还没有加载导致错误的情况，这么写的确没什么问题，但是我们可以更加优化这类问题，试想下，如果我们的网站有大量图片和FLASH，这样加载时间会非常的长，而我们希望JS在DOM节点存在就可以使用，而不在乎是否节点内容加载完毕，所以就出现了DOMReady事件，JQ等JS库都封装了ready类似的函数，而我们可以自己封装，书中提供了一种简便方法，当然，自己封装的ready也会在下面写出，我记得还是李炎恢老师的一段代码，非常棒，一直保存到现在！！
书中的方法是一种模拟方法我们可以将调用函数放在body结尾标签后，此时页面的DOM内容并没有加载完，但一定生成了，把该方法的具体内容写在调用的前面，就可以模拟一个类似于ready的效果
第二种方法就是自己封装

function addDomLoaded(fn){ 
    var isReady=false; //初始化
    var timer =null; 
    alert(sys.ie)//弹出IE版本的，我自己测试用的
    function doReady(){ 
        if(isReady) return; 
        isReady=true; 
        if(timer) clearInterval(timer); 
        fn();
    }
    if(document.addEventListener){//W3C
        addEvent(document,'DOMContentLoaded',function() { //DOM2级事件绑定
            doReady(); 
            removeEvent(document,'DOMContentLoaded',arguments.callee);//最后一个参数是传入正在执行的函数，也就是在执行一次这个函数
            });
        }
        else if(sys.ie&&sys.ie<9 ){//IE 

            //IE 8-
            timer=setInterval(function (){ 
                try{
                    document.documentElement.doScroll('left'); //检测是否加载完DOM
                    doReady(); 
                    }catch(ex) {};
                });
            }
        }

    function addEvent(obj , event , fn){
    if (obj.addEventListener) {
        obj.addEventListener(event,fn)
    }else if(obj.attachEvent){
        obj.attachEvent('on'+event,fn)
    }
}
function removeEvent(obj , event , fn){
    if (obj.removeEventListener) {
        obj.removeEventListener(event,fn)
    }else if(obj.detachEvent){
        obj.detachEvent('on'+event,fn)
    }
}