javascript
详解JavaScript变量类型判断及domReady原理 写得很好
原文：詳解JavaScript變量類型判斷及domReady原理
我們知道，在開發(fā)JavaScript時候，經(jīng)常要判斷JavaScript變量類型，此 JavaScript教程 詳細(xì)介紹JS變量的判斷方法及相關(guān)原理。
1.JavaScript類型的判斷：
js五種簡單數(shù)據(jù)類型有:null, undefined, boolean, number, string。
還有復(fù)雜的數(shù)據(jù)類型：Object,Function，RegExp,Date,自定義的對象，比如：Person等。
typeof一般用來判斷boolean,number,string，instanceof一般用來判斷對象類型。但它們都有缺陷。比如：firame里面的數(shù)組實例就不是父窗口的Array的實例，調(diào)用instanceof會返回false。（這題360校招時問過）。
typeof new Boolean(true)? ???// "object"? ?，包裝對象。boolean,number,string三種包裝對象，js高級程序編程里面有講。
有很多人使用typeof document.all來判斷是否為IE，其實這是很危險的，因為此屬性谷歌和火狐也喜歡，所以在谷歌瀏覽器下出現(xiàn)了這個情況：
typeof document.all? ? //undefined??但是，document.all? ? //HTMLAllCollection，用typeof判斷是undefined，但是可以讀取此屬性值。
但是現(xiàn)在可以使用Object.prototype.toString.call方法判斷類型。此方法可以直接輸出對象內(nèi)部的[[Class]].但IE8及以下的window對象不能使用此方法。
可以使用? ?window == document??//??true? ?? ?document == window??// false? ?? ?IE6,7,8下。
nodeType? ???（ 1:元素 Element? ?? ???2:屬性 attribute? ?? ???3：文本??Text? ?? ???9：document）
jquery中判斷類型使用的方法：
class2type ={}
jQuery.each("Boolean Number String Function Array Date RegExp Object".split(" "),function(i,name){
? ?? ??? class2type [ "[object " + name + "]"??] = name.toLowerCase();
//class2type = {"[object Boolean]":boolean,"[object Number ]":number ,"[object String ]":string ,"[object Function ]":function ,"[object Array ]":array ......}
});
jQuery.type = function(obj){? ?? ?? ?? ? //如果obj是null，undefined等，就返回字符串"null","undefined"。如果不是，就調(diào)用toString方法，如果可以調(diào)用就判斷，出錯就返回object（IE低版本下的window,Dom等ActiveXobject對象）
return obj == null ? String(obj)??: class2type [ toString.call(obj) ]??|| "object";
}
2.domReady
js操作dom節(jié)點時，頁面必須構(gòu)建好dom樹才行。因此，通常使用window.onload方法。但是onload方法是等所有資源加載結(jié)束后才會執(zhí)行。而為了讓頁面能更快的響應(yīng)用戶的操作，我們只需要dom樹構(gòu)建完畢，就應(yīng)該使用js操作。而不需要等待所有資源都加載結(jié)束（圖片,flash）。
因此出現(xiàn)了DOMContentLoaded事件，Dom樹構(gòu)建完成后觸發(fā)。但是舊版本IE不支持，因此就有了hack。
if(document.readyState === "complete"){? ?//以防Dom文檔加載完成后才加載js文件。這時通過此判斷來執(zhí)行fn方法（你要執(zhí)行的方法）。因為文檔加載完成后，document.readyState的值為complete
? ?? ?? ?setTimeout(fn);? ?? ?//異步執(zhí)行，可以讓它后面的代碼先執(zhí)行。這里是jQuery里面的用法，可以不用理解。
}
else if(document.addEventListener){//支持DOMContentLoaded事件
? ?? ?? ?? ?document.addEventListener("DOMContentLoaded",fn,false);? ?//冒泡
window.addEventListener("load",fn,false);? ?//以防DOM樹構(gòu)建好之后才加載js文件。這時不會觸發(fā)DOMContentLoaded事件（已經(jīng)觸發(fā)結(jié)束了），只會觸發(fā)load事件
}
else{
document.attachEvent("onreadystatechange",function(){//針對IE下的iframe安全，有時會優(yōu)先onload執(zhí)行，有時不會。
if(document.readyState ==="complete"){
fn();
}
});
window.attachEvent("onload",fn);? ?//總會起到作用，以防其他監(jiān)聽事件沒獲取到，這樣至少可以通過onload事件觸發(fā)fn方法。
var top = false;//看是否在iframe中
? ???try{//window.frameElement即為包含本頁面的iframe或frame對象。沒有則為null。
? ?? ?? ? top = window.frameElement == null && document.documentElement;
? ?? ?}catch(e){}
? ???if(top && top.doScroll){??//如果沒有iframe，并且是IE
? ?? ?? ?? ?(function doScrollCheck(){
? ?? ?? ?? ?? ?? ?? ?try{
top.doScroll("left");//IE下，如果Dom樹構(gòu)建好，就可以調(diào)用html的doScroll方法
}catch(e){
? ?? ?? ?? ?? ?? ?? ?? ?? ? return setTimeout(doScrollCheck,50);??//如果還沒構(gòu)建好，則繼續(xù)監(jiān)聽
? ?? ?? ?? ?? ?? ???}
? ?? ?? ?? ?? ?? ???fn();
? ?? ?? ?? ?})()
? ? }
}
fn方法中必須包含移除所有的綁定事件。
當(dāng)然IE還可以使用script defer hack，原理就是：指定了defer的script會在DOM樹構(gòu)建完后才執(zhí)行。但是這需要添加額外的js文件，很少在單獨的庫里面用到。
使用原理：在文檔中添加script標(biāo)簽，并用script.src = "xxx.js"，監(jiān)聽script的onreadystatechange事件，當(dāng)this.readyState == "complete"時，就執(zhí)行fn方法。
也就是說，DOM構(gòu)建好之后，xxx.js才會執(zhí)行，它的this.readyState才會變成complete。加油！
本文來源：http://www.17javascript.com/
總結(jié)
以上是生活随笔為你收集整理的详解JavaScript变量类型判断及domReady原理 写得很好的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 程序员谈 JavaScript 数组 A
- 下一篇： gradle idea java ssm