我的日常

登录/注册
您现在的位置:论坛 资料库 前端开发 > JavaScript变量类型判断及domReady原理
总共48087条微博

动态微博

查看: 2155|回复: 1

JavaScript变量类型判断及domReady原理

[复制链接]

326

主题

72

听众

999

金钱

实习版主

该用户从未签到

优秀版主

跳转到指定楼层
楼主
发表于 2015-02-05 09:48:40 |只看该作者 |倒序浏览
我们知道,在开发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。加油!



科帮网 1、本主题所有言论和图片纯属会员个人意见,与本社区立场无关
2、本站所有主题由该帖子作者发表,该帖子作者与科帮网享有帖子相关版权
3、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者和科帮网的同意
4、帖子作者须承担一切因本文发表而直接或间接导致的民事或刑事法律责任
5、本帖部分内容转载自其它媒体,但并不代表本站赞同其观点和对其真实性负责
6、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意
7、科帮网管理员和版主有权不事先通知发贴者而删除本文


JAVA爱好者①群:JAVA爱好者① JAVA爱好者②群:JAVA爱好者② JAVA爱好者③ : JAVA爱好者③

快速回复
您需要登录后才可以回帖 登录 | 立即注册

   

关闭

站长推荐上一条 /1 下一条

发布主题 快速回复 返回列表 联系我们 官方QQ群 科帮网手机客户端
快速回复 返回顶部 返回列表