zoukankan      html  css  js  c++  java
  • 第二课:判断js变量的类型以及domReady的原理

    1.类型的判断:

      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。

    加油!

  • 相关阅读:
    awk中执行Linux命令的两种方式
    Hibernate-validator校验含javax.validation.constraints注解的对象其首次校验长耗时问题
    Linux系统查看端口常用命令
    简要记录搭建Nexus私服过程(发布和使用)
    简要记录搭建Nexus私服过程(配置)
    简要记录搭建Nexus私服过程(安装)
    [转载] jar包和war包的介绍和区别
    linux-exec
    linux-vim格式设置
    linux-array
  • 原文地址:https://www.cnblogs.com/chaojidan/p/4121788.html
Copyright © 2011-2022 走看看