第一课: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;
}
第一课:js命名空间的介绍,js对象的扩展以及js数组化的更多相关文章
- yii学习第一课 《命名空间》
<?php namespace a\b\c; class Apple { function getInfo() { echo 'this is a<br>'; } } <?ph ...
- ES6的新特性(9)——对象的扩展
对象的扩展 属性的简洁表示法 ES6 允许直接写入变量和函数,作为对象的属性和方法.这样的书写更加简洁. const foo = 'bar'; const baz = {foo}; baz // {f ...
- 《ES6标准入门》(阮一峰)--10.对象的扩展
1.属性的简洁表示法 ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法.这样的书写更加简洁. const foo = 'bar'; const baz = {foo}; baz // ...
- ES6 数组、对象的扩展
8. 数组的扩展 扩展运算符(...),将一个数组转为用逗号分隔的参数序列. 复制数组 const a2=[...a1] 合并数组 [...arr1, ...arr2, ...arr3]; arr1. ...
- ES6中数组和对象的扩展运算符拷贝问题以及常用的深浅拷贝方法
在ES6中新增了扩展运算符可以对数组和对象进行操作.有时候会遇到数组和对象的拷贝,可能会用到扩展运算符.那么这个扩展运算符到底是深拷贝还是浅拷贝呢? 一..使用扩展运算符拷贝 首先是下面的代码. le ...
- ECMA Script 6_对象的扩展
对象 1. ES6 允许直接写入变量和函数,作为对象的属性和方法 const foo = 'bar'; /*****************属性的优化********************/ con ...
- vue.js学习(第一课)
学习资料 来自台湾小凡! vue.js是javascript的一个库,只专注于UI层面,核心价值永远是 API的简洁. 第一课: 不支持IE8. 1.声明式渲染: el元素的简称 element : ...
- 如何用webgl(three.js)搭建一个3D库房-第一课
今天我们来讨论一下如何使用当前流行的WebGL技术搭建一个库房并且实现实时有效交互 第一步.搭建一个3D库房首先你得知道库房长啥样,我们先来瞅瞅库房长啥样(这是我在网上找的一个库房图片,百度了“库房” ...
- 《p5.js创意游戏编程》第一课:跳动的小球
准备:Hbuilder/vscode等可以编写网页的编辑器 如果想立刻上手也可以使用在线编译器p5.js官方在线编辑器,如果打不开也可以使用国内的一款在线编辑器jsrun编辑器,(第一课先使用jsru ...
随机推荐
- 虚拟机下Ubuntu没有GUI图形界面,解决方法
先说下快捷键,CLI切换到GUI:Ctrl+Alt+F7: GUI切换到CLI:Ctrl+Alt+F1. 今天折腾虚拟机时,打开Ubuntu后显示的是命令行界面,按快捷键后并没转换到图形界面,而是一直 ...
- 用SecureCRT在windows和CentOS间上传下载文件
安装lrzsz: # yum -y install lrzsz 现在就可以正常使用rz.sz命令上传.下载数据了 配置SecureCRT的session选项的SFTP标签页和X/Y/Zmodem中的目 ...
- log4j加载方式导致的bae和sae部署异常
这2天改在bae上部署代码,为了便于程序的功能测试,引入了log4j日志,但是问题来了..测试程序采用的是spring3.2.8框架搭建,web.xml引入日志代码为: <context-par ...
- MIT jos 6.828 Fall 2014 训练记录(lab 5)
源代码参见我的github: https://github.com/YaoZengzeng/jos File system perliminaries 我们开发的是一个单用户的操作系统,只提供了足够的 ...
- 基于对话框的MFC应用程序基本结构
新建一个基于对话框的MFC应用程序,假设命名为 Test:则该应用程序在刚创建的时候,有4个非常重要的文件和3个类: 4个非常重要的文件 1.Test.h 2.Test.cpp (应用程序类头文件) ...
- [3D跑酷] AudioManager
Unity音频管理 游戏中的声音管理最常用的组件莫过于AudioSource和AudioClip,我的做法是建立是一个AudioManager类(单例类)管理各个音频,谈一下我的经验: 函数列表 St ...
- Hibernate Java、Hibernate、SQL 之间数据类型转换
Hibernate映射类型 Java类型 标准SQL类型 integer java.lang.Integer integer long java.lang.Long bigint sho ...
- js原生捕鱼达人(三)--完结
先给分享下我写完的效果,github有点卡,我没有压缩代码,不过效果可以看到 https://jasonwang911.github.io/ 转载请注明'转载于Jason齐齐的博客http://www ...
- 通过box盒子模型给元素内容设置居中
老版本语法 div{ display: -webkit-box;-webkit-box-align:center; //垂直居中-webkit-box-pack:center;//水平居中 } 新版本 ...
- 项目管理和缺陷跟踪工具Redmine
官网: http://www.redmine.org/ http://demo.redmine.org/ 下载: http://www.redmine.org/projects/redmine/wik ...