document.ready小记

简介

JavaScript中的window对象有个事件onload。该事件在页面资源（比如js文件、图片和媒体资源等）加载完成后再执行

如果我们想在DOM文档树加载完之后执行一段代码，该如何做？

实现

JQuery实现

JQuery中提供了一个比较常用的方法，用来在DOM文档树加载完成后自己执行

$(document).ready(function() {
  // do something
})

自定义代码实现

JavaScript没有直接提供类似于ready方法，我们可以自己封装一个

// 封装
(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.readydom = 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.readydom(function() {
  // do something
})