Web UI - Javascript之DOM Ready

最近终于稍微适应了工作环境，终于可以让自己缓口气。于是决定要写点东西，算是督促、记录和提升自己的学习。代码的世界，你不轮它，以后就会被它轮。这个系列尽量保持在一周或两周更一篇，目标是在创造内容的时候更深刻的理解和提升自己所学的知识，本质上，接触Javascript编程之美，我转到前端工作，其实就是因为非常喜欢和好奇Javascript（当然，也是享受频繁的用代码和用户交互的感觉）。

什么是DOM Ready

还记得刚学习Javascript的时候，老师就一直各种强调教导告诉你说js的代码一定要写到window.onload里面，如下代码：

1 window.onload=function()
2 {
3     //registered in onload
4     document.getElementById('demo').innerHTML='hello world';
5 }

window.onload

　　包括各种古老的书籍中都告诉你说为了保证js能够正确运行（因为js大部分都是频繁的操作DOM），应该把代码写在onload中，而window.onload表示着web页面中所有的元素都已经加载完毕，保证了所有的DOM元素都是可用的。然而，DOM元素是丰富多彩的，例如：img。当然一个img请求一张图片，而这张图片很大、路径错误等原因会造成请求一直下不来，如果你的页面上有这样一张图片，那么window.onload将会一直等待这张图片的加载，直到图片请求已经下来了或确认图片请求异常。这是一个可怕的过程，如果一张图片请求了10s，那么你的用户在电脑面前面对着浏览器那个正在加载的圆圈的时候，很有可能关掉你的页面。

　　这是一个很简单的case：onload太慢了。小伙鸡如果你现在竟然还在用着window.onload那就真的图样图森破了。

DOMContentLoaded

　　感觉到onload太慢了，firefox为DOM纳入了一个全新的事件，叫做DOMContentLoaded，这也就是我们后来所说的DOM Ready。DOM Ready和onload不同之处在于：onload等待页面所有元素加载完毕才会执行，而DOM Ready，则是在DOM树构建完毕即执行。这一过程可以这么形容：onload的时候页面已经呈现，而DOM Ready完毕的时候甚至用户都还没有看见页面。我们可以更快的处理一些事情，而不是等到onload之后。而这一事件，逐渐的被广大浏览器纳入，除了那些古老的IE浏览器。

现在的前端js框架类库，例如jQuery、Zepto、YUI、mass没有个DOM Ready都不好意思称自己为库、框架。刚开始学习jQuery的时候，就对这个DOM Ready非常的感兴趣，当时因为自己的境界还停留在学习jQuery的时候，所以只能远远观望。当驾驭了jQuery的时候，我们就应该透过现象看本质——一窥jQuery源码，探索里面的秘密。

　　其实DOM Ready，实现上非常简单，就是注册个DOM Ready的事件，但是低版本的IE（IE678）要么没有DOMContentLoaded事件，要么就是DOMContentLoaded的实现上有bug。

　　所以，我们自己动手来实现DOM Ready吧。

首先，w3c的实现，用w3c规范注册DOMContentLoaded事件，同时针对IE8 hack，一个简单的DOM Ready示例如下：

 1     //将一个函数注册到DOM Ready
 2     function $(fn) {
 3         if (document.addEventListener)//w3c browser
 4             document.addEventListener("DOMContentLoaded", fn, false);
 5         else if (document.attachEvent)//ie8+ browser
 6             document.attachEvent("onreadystatechange", fn);
 7     }
 8  
 9  
10     //注册一个DOM Ready事件，是不是和jQuery很像？
11     $(function () {
12         console.log('hello world!');
13     });

DOMContentLoaded