《JavaScript框架设计》——1.5　主流框架引入的机制——domReady

domReady其实是一种名为“DOMContentLoaded”事件的别称，不过由于框架的需要，它与真正的DOMContentLoaded有一点区别。在许多旧的JavaScript书藉中，它们都会教导我们把JavaScript逻辑写在window.onload回调中，以防DOM树还没有建完就开始对节点进行操作,导致出错。

本节书摘来自异步社区《JavaScript框架设计》一书中的第1章，第1.5节，作者：司徒正美著，更多章节内容可以访问云栖社区“异步社区”公众号查看

1.5 主流框架引入的机制——domReady

domReady其实是一种名为“DOMContentLoaded”事件的别称，不过由于框架的需要，它与真正的DOMContentLoaded有一点区别。在许多旧的JavaScript书藉中，它们都会教导我们把JavaScript逻辑写在window.onload回调中，以防DOM树还没有建完就开始对节点进行操作,导致出错。而对于框架来说，越早介入对DOM的干涉就越好，如要进行什么特征侦测之类的。domReady还可以满足用户提前绑定事件的需求，因为有时页面图片等资源过多，window.onload就迟迟不能触发，这时若还没有绑定事件，用户点哪个按钮都没反应（除了跳转外）。因此主流框架都引入domReady机制，并且费了很大劲兼容所有浏览器，具体策略如下。

（1）对于支持DOMContentLoaded事件的使用DOMContentLoaded事件。

（2）旧版本IE使用Diego Perini发现的著名hack!

//http://javascript.nwbox.com/IEContentLoaded/

//by Diego Perini 2007.10.5

function IEContentLoaded(w, fn) {

 var d = w.document, done = false,

 init = function() {

 if (!done) {//只执行一次

 done = true;

 fn();

 (function() {

 try {//在DOM未建完之前调用元素doScroll抛出错误

 d.documentElement.doScroll(left);

 } catch (e) {//延迟再试

 setTimeout(arguments.callee, 50);

 return;

 init();//没有错误则执行用户回调

 })();

 // 如果用户是在domReady之后绑定这个函数呢？立即执行它

 d.onreadystatechange = function() {

 if (d.readyState == complete) {

 d.onreadystatechange = null;

 init();

此外，IE还可以通过script defer hack进行判定。

//http://webreflection.blogspot.com/search?q=onContent

//by Andrea Giammarchi 2006.9.24

document.write(" script id=__ie_onload defer src=//0 \/scr" + "ipt 

script = document.getElementById("__ie_onload");

script.onreadystatechange = function() {//IE即使是死链也能触发事件

 if (this.readyState == "complete"){

 init(); // 指定了defer的script会在DOM树建完才触发

不过有个问题是，如果我们的种子模块是动态加载的，在它插入DOM树时，DOM树已经建完呢？这该怎么触发我们的ready回调？jQuery给出的方案是，连onload也监听了，但如果连onload也没赶上，就判定document.readyState是否等于complete！这样完美了吧，可惜Firefox3.6之前没有这属性！看mass给出的方案。

var readyList = [];

mass.ready = function(fn) {

 if (readyList) {

 fn.push(fn);

 } else {

 fn();

var readyFn, ready = W3C ? "DOMContentLoaded" : "readystatechange";

function fireReady() {

 for (var i = 0, fn; fn = readyList[i++]; ) {

 fn();

 readyList = null;

 fireReady = $.noop; //惰性函数，防止IE9二次调用_checkDeps

function doScrollCheck() {

 try { //IE下通过doScrollCheck检测DOM树是否建完

 html.doScroll("left");

 fireReady();

 } catch (e) {

 setTimeout(doScrollCheck);

//在Firefox3.6之前，不存在readyState属性

//http://www.cnblogs.com/rubylouvre/archive/2012/12/18/2822912.html

if (!DOC.readyState) {

 var readyState = DOC.readyState = DOC.body ? "complete" : "loading";

if (DOC.readyState === "complete") {

 fireReady(); //如果在domReady之外加载

} else {

 $.bind(DOC, ready, readyFn = function() {

 if (W3C || DOC.readyState === "complete") {

 fireReady();

 if (readyState) { //IE下不能改写DOC.readyState

 DOC.readyState = "complete";

 if (html.doScroll) {

 try { //如果跨域会报错，那时肯定证明是存在两个窗口的

 if (self.eval === parent.eval) {

 doScrollCheck();

 } catch (e) {

 doScrollCheck();

异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区，也是国内领先的IT专业图书社区，致力于优质学习内容的出版和分享，实现了纸书电子书的同步上架，于2015年8月上线运营。公众号【异步图书】，每日赠送异步新书。