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;

}

第一课:js命名空间的介绍,js对象的扩展以及js数组化的更多相关文章

  1. yii学习第一课 《命名空间》

    <?php namespace a\b\c; class Apple { function getInfo() { echo 'this is a<br>'; } } <?ph ...

  2. ES6的新特性(9)——对象的扩展

    对象的扩展 属性的简洁表示法 ES6 允许直接写入变量和函数,作为对象的属性和方法.这样的书写更加简洁. const foo = 'bar'; const baz = {foo}; baz // {f ...

  3. 《ES6标准入门》(阮一峰)--10.对象的扩展

    1.属性的简洁表示法 ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法.这样的书写更加简洁. const foo = 'bar'; const baz = {foo}; baz // ...

  4. ES6 数组、对象的扩展

    8. 数组的扩展 扩展运算符(...),将一个数组转为用逗号分隔的参数序列. 复制数组 const a2=[...a1] 合并数组 [...arr1, ...arr2, ...arr3]; arr1. ...

  5. ES6中数组和对象的扩展运算符拷贝问题以及常用的深浅拷贝方法

    在ES6中新增了扩展运算符可以对数组和对象进行操作.有时候会遇到数组和对象的拷贝,可能会用到扩展运算符.那么这个扩展运算符到底是深拷贝还是浅拷贝呢? 一..使用扩展运算符拷贝 首先是下面的代码. le ...

  6. ECMA Script 6_对象的扩展

    对象 1. ES6 允许直接写入变量和函数,作为对象的属性和方法 const foo = 'bar'; /*****************属性的优化********************/ con ...

  7. vue.js学习(第一课)

    学习资料 来自台湾小凡! vue.js是javascript的一个库,只专注于UI层面,核心价值永远是 API的简洁. 第一课: 不支持IE8. 1.声明式渲染: el元素的简称 element : ...

  8. 如何用webgl(three.js)搭建一个3D库房-第一课

    今天我们来讨论一下如何使用当前流行的WebGL技术搭建一个库房并且实现实时有效交互 第一步.搭建一个3D库房首先你得知道库房长啥样,我们先来瞅瞅库房长啥样(这是我在网上找的一个库房图片,百度了“库房” ...

  9. 《p5.js创意游戏编程》第一课:跳动的小球

    准备:Hbuilder/vscode等可以编写网页的编辑器 如果想立刻上手也可以使用在线编译器p5.js官方在线编辑器,如果打不开也可以使用国内的一款在线编辑器jsrun编辑器,(第一课先使用jsru ...

随机推荐

  1. Python语言100例

    Python版本:python 3.2.2 电脑系统:win7旗舰 实例来源:python菜鸟教程100例 #!/usr/bin/python # -*- coding: UTF-8 -*- impo ...

  2. 基于元数据的ETL系统

     从努力到选择  从实现到设计 从部分到整体 以下是我对DW design的一些想法 下次使用C#来实现一下   ETL中Source 的信息       数据提供形式:DB(ORACLE SQLSE ...

  3. openfire+asmack搭建的安卓即时通讯(六) 15.4.16

    啊啊啊啊啊啊啊啊,这东西越做越觉得是个深坑啊! 1.SharedPreferences.Editor的密码保存和自动登录: 首先还是从主界面开始,因为要提升一下用户体验自然要加入保存密码和自动登录的功 ...

  4. (新人的第一篇博客)树状数组中lowbit(i)=i&(-i) 的简单文字证明

    第一次写博好激动o(≧v≦)o~~初一狗语无伦次还请多多指教   先了解树状数组http://blog.csdn.net/int64ago/article/details/7429868感觉这个前辈写 ...

  5. 【iOS 初见】第一个简单的 iOS 应用

    本实例来自 <iOS编程(第4版)>,介绍如何编写一个简单的 iOS 应用. 功能为:在视图中显示一个问题,用户点击视图下方的按钮,可以显示相应的答案,用户点击上方的按钮,则会显示一个新的 ...

  6. 【问题&解决】sql2012安装时卡在正在启动操作系统功能"NetFx3"上不动的解决办法

    安装完windows8 后开始安装sql2012,安装过程中停在“正在启动操作系统功能"NetFx3"”不动了,很是着急,于是上网查了一下资料,原来NetFx3指的是Framewo ...

  7. 51nod-1537 1537 分解(矩阵快速幂+找规律)

    题目链接: 1537 分解  问(1+sqrt(2)) ^n  能否分解成 sqrt(m) +sqrt(m-1)的形式  如果可以 输出 m%1e9+7 否则 输出no Input 一行,一个数n.( ...

  8. 2014 Super Training #9 C E - Cup 2 --记忆化搜索

    原题:ZOJ 3681 http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3681 题意:给一个m,n,m表示m个人,可以把m个 ...

  9. MySQL遇到check the manual that corresponds to your MySQL server version for the right syntax错误

    用MySQL新建了一个Order表,插入了一条数据.总是显示 You have an error in your SQL syntax; check the manual thatcorrespond ...

  10. 为Unity项目生成文档(一)

    VS生成chm帮助文档 VS代码中使用Xml注释,并通过Sandcastle生成chm文档的文章,这几篇值得分享: 使用.NET中的XML注释(一) -- XML注释标签讲解 使用.NET中的XML注 ...