@king- 2015-04-20T09:44:38.000000Z 字数 1490 阅读 1440

使用原生Javascript模拟jQuery的$.ready()写法

web前端开发

在之前的一篇笔记里面已经提到了《javascript的window.onload与jQuery的$.ready()的区别》，所以这里就不说他们之间的差异性了。

在很多的前端开发过程中，我们可能遇到的情况是想在DOM加载结束后立马执行相关的事件绑定，保证相关的用户操作操作能力和交互能力，但是如果页面中有太多的image或者嵌入了iframe等大量资源的话，通过onload可想而知，是完全不可行的。

解决方法：

1. 提倡将Javascript代码写到页面内容结束之后body标签之前。

这样页面由上往下的解析机制能保证执行到你写的Javascript时DOM已经处理完毕，此时你可以放心的绑定相关事件了。

2. 使用jQuery一样的处理机制

先上代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head> 
<meta charset="UTF-8">
<title>使用原生Javascript模拟jQuery的$.ready()写法</title> 
<script type="text/javascript"> 
(function() {
    var ie = !!(window.attachEvent && !window.opera);
    var wk = /webkit\/(\d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525);
    var fn = [];
    var run = function() {
        for (var i = 0; i < fn.length; i++) fn[i]();
    };
    var d = document;
    d.ready = function(f) {
        if (!ie && !wk && d.addEventListener)
            return d.addEventListener('DOMContentLoaded', f, false);
        if (fn.push(f) > 1) return;
        if (ie)
            (function() {
                try {
                    d.documentElement.doScroll('left');
                    run();
                } catch (err) {
                    setTimeout(arguments.callee, 0);
                }
            })();
        else if (wk)
            var t = setInterval(function() {
                if (/^(loaded|complete)$/.test(d.readyState))
                    clearInterval(t), run();
            }, 0);
    };
})();
document.ready(function() {
    document.getElementById('test').innerHTML = Math.random()*100; //找到 
});
alert(document.getElementById('test')); //null 没找到
</script> 
</head> 
<body> 
<div id="test"></div> 
</body> 
</html>

上面的代码从书写顺序和执行顺序的对比中我们可以看出，创建的document.ready方法已经实现了jQuery的$.ready()功能了。

Mozilla & Opera 浏览器，在dom树载入后会触发[1] DOMContentLoaded [2] 事件
wikit内容浏览器，在dom载入后会出发触发[3]readyState[4]
在ie浏览器中doScroll方法，当页面DOM未加载完成时，调用doScroll方法时，会产生异常。（反之，如果不异常，那么就是页面DOM加载完毕了）

使用原生Javascript模拟jQuery的$.ready()写法

解决方法：

1. 提倡将Javascript代码写到页面内容结束之后body标签之前。

2. 使用jQuery一样的处理机制

内容目录