前端自定义 window.onready （模仿 window.onload）和实用的 ready() 函数

jquery 有个 ready 事件方法，它是怎么实现的呢？我在网上搜了搜看到了一个事件名称 DOMContentLoaded，文档内容加载完成时。它会 onload 之前触发。原来如此。很少人知道这东东。
我今天用它来打造一个 window.onready 。后来发现，监听器要写在定义 onready 属性之后，很突兀。不能和 onload 一样。怎么办。要自己写个监听 onready 属性有值的时候，再执行 DOMContentLoaded 事件。这个方法感觉总是不太好。谁有更好的方法。提供来大家学习一下。
[code]/
自定义 window.onready （模仿 window.onload）
插入到 head
/
(function() {
this.Timer = function() {
if (window.onready) {
this.addEventListener(“DOMContentLoaded”, window.onready, false);
clearInterval(this.intervalId);
this.rel();
return;
}
console.log(window.intervalId);
}
this.rel = function() {
clearInterval(this.intervalId);
this.intervalId = undefined;
this.removeEventListener(“load”, this.loadHandler, false);
}
this.loadHandler = function() {
console.log(“load”);
this.rel();
}
this.addEventListener(“load”, this.loadHandler, false);
this.intervalId = setInterval(this.Timer);
})();[/code]

下面是写 window.onready
[code]window.onready = function(){
console.log(“ready”);
}[/code]

代码片段 1

上面的方法，只是供大家学习之用。在实现应用中，很不方便。window.onready 只能用一次。不能重复写。

下面的方法更实用一些，可以重复调用。
[code](function() {
window.ready = function(handler) {
document.addEventListener(“DOMContentLoaded”, handler, false);
}
})();[/code]

使用方法一：
[code]ready(function() {
console.log(“ready”);
});[/code]

使用方法二：
[code]window.ready(function() {
console.log(“window.ready”);
});[/code]

测试一下：

代码片段 2