JS框架设计之对象扩展一种子模块
时间:2022-04-24
本文章向大家介绍JS框架设计之对象扩展一种子模块,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
对象扩展
说完了,对象的创建(框架的命名空间的创建)以及如何解决多库之间的命名空间冲突问题之后,接下来,就是要扩展我们的对象,来对框架进行扩展,我们需要一种新功能,将新添加的功能整合到我们定义的对象中去。这种类型的方法在Javascript中常被称为extend和mixin。在Javascript对象属性特性没有诞生之前,我们可以随意的添加、修改、删除其属性的,因此扩展一个对象十分的简单。一个简单的代码扩展方法如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var zc={};//需要扩展的对象
var source={aa:1,bb:2};
/*
@zc 需要扩展的对象
@source 扩展对象里面的内容
*/
extend(zc,source);
function extend(zc,source){
for(var property in source)
zc[property]=source[property];
return zc;
}
alert(zc.aa);
</script>
</body>
</html>
这个方法在旧版本的IE中存在bug,因为它认为Object的原型方法就不该被遍历出来,因此for in循环是无法遍历名为valueof 和 toString的属性名的属性名,这导致后来模拟实现Object.Keys()也遇到了困难。下面这个方法主要用于获取对象的属性,给那些在(js引擎没有实现Object.Keys)的浏览器中获取对象的属性用的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var zc={aa:1,1:'2'};
Object.keys=Object.keys || function(_obj){
var a=[];
for(a[a.length] in obj)
//在for in 循环中每遍历obj中的一个元素,都会将该元素的值赋值给in 前面的临时变量,而这个变量直接用一个aa局部变量代替
//那么就省去了下面的赋值语句,直接达到了给a数组赋值的效果
return a;
}
alert(Object.keys(zc));//输出:1,aa
</script>
</body>
</html>
mass的对象扩展方法
var zc={};
function extend(target,source){
//将arguements转换成数组对象
var args=[].slice.call(arguments); //slice如果不传递参数,则默认截取所有的参数
var i=1;//控制用户参数传入的开始遍历的位置
var key;
//arguements的最后一个参数,决定是不是要对重复的参数进行复写,并规定最后一个参数只能是boolean
var ride=typeof args[args.length-1]=="boolean"?args.pop():true;//获取最后一个参数,如果不是bool值默认为true
//当传入参数只有一个时候
if(args.length===1){
target=!this.window?this:{};
}
//从第二个参数开始遍历(因为第一个参数是,要追加属性的对象),一直遍历到最后一个参数,知道source=undefined时,结束遍历
while ((source=args[i++])){
for(key in source)
{
//如果复写,或者当前属性在target对象中不存在
if(ride || !(key in target))
{
//将属性写入到对象中
target[key]=source[key];
}
}
}
return target;
}
extend(zc,{version:"1.0.0",name:"zcJsHelper"},{other:"other"},true,true);
alert(zc.other);
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法