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