zoukankan      html  css  js  c++  java
  • 第一课:js命名空间的介绍,js对象的扩展以及js数组化

    1.命名空间:

      js里面的命名空间就是使用对象的属性来扩展的。比如,用户定义一个A对象,A对象下面有B属性和C属性,同时B属性和C属性又是对象。因此A={B:{},C:{}},这时用户就可以在B对象和C对象中定义一样的方法,属性了。因此B和C就属于不同的命名空间。我们调用B,C对象里面的方法,就可以通过A.B.like(),A.C.like()调用了。当然A属于window对象中的属性。

      但是有一种情况,比如:boke.jsp页面引入了jquery.js以及prototype.js(他们都会在window对象中添加$属性),这时就出现了冲突的情况。

      因此jquery.js里面就有了noConflict()处理冲突。执行流程:页面首先引入prototype,这时prototype会占有window的$属性,然后再引入jquery时,jquery会把之前window的$属性存放在_$中,然后自己使用$属性。这时,你可以通过$调用jquery的方法。当你现在不需要使用jquery而想使用prototype时,就可以调用$.noConflict(),这时$就会恢复成prototype对象。这时你就可以通过$使用prototype方法了。

      var _$ =  window.$,_jQuery= window.jQuery;

      noConflict:function(deep){

               window.$ = _$;

           if(deep)  window.jQuery = _jQuery;

              return jQuery;    //返回值,你可以赋值给其他变量名,比如,chaojidan,这样你就可以通过chaojidan调用jQuery中的方法了。

      }

    2.对象扩展:

      命名空间对象有了,那我们需要扩展功能。比如:我需要把A对象的属性和方法全部复制到B对象中。我不用一个一个在B对象中去写代码。

    function mix(target , source){

        var args =  [].slice.call(arguments),i=1,

             isCover = typeof args[args.length-1] =="boolean" ? args.pop():true;  //不写,默认为true,默认是覆盖。

       if(args.length == 1){                                      

      target = !this.window? this:{};

      //如果只有一个对象参数时,就扩展this对象。比如:我在A对象的context中调用mix(B),那么这时的this就是A,因此会把B的属性和方法添加到A对象中。但是如果是在window中调用mix(B),就会把B对象中的属性和方法添加到一个空的对象中,并返回这个空的对象,以防覆盖window对象中同名的属性和方法。(只有window对象拥有window属性)

          i =0;

     }

     while((source = args[i++])){

        for(key in source){

                          if(isCover || !(key in target))   //如果覆盖,就直接赋值,如果不覆盖,先判断key是否存在目标对象中,如果存在,就不赋值

             {

              target[key] = source[key];

                          }

               }

       }

       return target;

    }

      大公司面试官很喜欢问数组的查重,大家可以去看看,数组中的每项可以是对象,而对象A和对象B即便一样的属性和方法,但是也是不相等的。字符串和数字,比如123和"123"等,网上一搜,就能找到很全的方法。

    3.数组化:

      浏览器下有很多类数组对象,arguments,document.forms,document.links,form.elements,document.getElementsByTagName,childNodes等(HTMLCollection,NodeList)。

    还有一种特殊写法的自定义对象

    var arrayLike = {

           0:"a",

           1:"b",

          length:2

    }    此对象写法,就是jQuery对象的写法。

    我们需要把上述的类数组对象转换成数组对象。

    [].slice.call方法可以解决。但是旧版本IE下的HTMLCollection,NodeList不是Object的子类,不能使用[].slice.call方法。

    因此我们可以重写一个slice方法。

    A.slice = window.dispatchEvent  ? function(nodes,start,end){   return [].slice.call(nodes,start,end);      }

    //如果window有dispatchEvent  属性就证明支持[].slice.call方法,能力检测。

                     :function(nodes,start,end){

                           var ret = [],n=nodes.length;

            if(end == undefined  ||  typeof end === "number"  && isFinite(end)){   //&&优先级高于||,因此end没写,或者end是有限数字就进入

                                    start = parseInt(start,10)  || 0;   //如果start不存在或者不是数字,则就赋值为0.

                                    end = end == undefined ? n:parseInt(end,10);    //如果end不存在,则赋值为n.

                if(start < 0)    start + = n;

                if(end< 0)    end + = n;

                if(end>n)    end  = n;

                for(var i = start;i<end;i++){

                                          ret[i-start] = nodes[i];     //低版本IE使用数组赋值的形式

                                     }

            }

            return ret;

    }

     

  • 相关阅读:
    sublime配置文件设置解释器
    pyinstaller 简单用法
    python模块引入问题集锦与解析
    服务器上Ubuntu系统安装
    window下共存python2和python3
    python-docx about unusual operating
    docker
    网站开发(周日):项目部署上线(实战)
    网站开发(周六):项目本地调试(实战)
    网站开发(周五):项目前端页面开发(实战)
  • 原文地址:https://www.cnblogs.com/chaojidan/p/4121442.html
Copyright © 2011-2022 走看看