jQuery原生js实现---ready方法

对于很多js库，框架来说都带有js加载延迟。jQuery的ready方法就是等待DOM元素加载完便立即执行，原生js接口onload是等待所有html加载完再加载js文件。

ready方法实现原理是利用DOMContentLoaded和 document.documentElement.doScroll("left");实现跨浏览器加载。两个方式都能够监测dom元素是否加载完毕，从而回掉函数执行加载js文件内容。

DOMContentLoaded该方法IE不支持，支持该方法的浏览器在某些表现上也有些许差异，所以我们要对浏览器型号做区分。

<div id="id1">123</div>
<div class="cla1">1</div>
<div class="cla1">2</div>
<div class="cla1">3</div>
<div class="cla1">4</div>
<div class="cla1">5</div>
<div class="cla1">6</div>
<div class="cla1">7</div>
<div class="cla1">8</div>

//jQuery原生js实现

ready = (fn) =>{
if(document.addEventListener){
return document.addEventListener( "DOMContentLoaded",fn, false );
}
}

ready(function(){
document.querySelector('#id1').innerHTML='456';
})

以上代码初步实现ready函数绑定回掉函数fn事件DOMContentLoaded，但我们还需要实现IE的加载判断。
function ready(fn){
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串

if(document.addEventListener){
return document.addEventListener( "DOMContentLoaded",fn, false );
}
if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && window == top ){ (function(){

try {
// 这个地方标记一下,在后面解析(1)
document.documentElement.doScroll("left");
} catch(error) {
//// 这个地方标记一下,在后面解析(2)
setTimeout( arguments.callee, 0 );
return;
}
fn();
}
)()}
}

ready(function(){
alert(document.getElementById('id1').innerHTML)
})

当dom未完成解析时,调用document的document.documentElement.doScroll(”left”)会出错这个小技巧便可得知dom有没有ready了。上面代码基本上已经实现ready函数加载，但是我们还得加上默认onload事件。
function ready(fn){
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isReady = false;
var otherOload = '';
if(document.addEventListener){
isReady = true;
return document.addEventListener( "DOMContentLoaded",fn, false );
}
if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && window == top ){ (function(){
try {
// 这个地方标记一下,在后面解析(1)
document.documentElement.doScroll("left");
} catch(error) {
//// 这个地方标记一下,在后面解析(2)
setTimeout( arguments.callee, 0 );
return;
}
fn();
isReady = true;
}
)()}
if(!isReady){
if(document.addEventListener){
otherOload = window.addEventListener( "load",fn, false )
}else{
otherOload = window.attachEvent( "onload",fn, false );
}
return otherOload;
}

}

ready(function(){
alert(document.getElementById('id1').innerHTML)
})

到这里便可以使用ready函数进行js加载了