专栏首页GreenLeavesJS框架设计之对象扩展一种子模块

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);

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Javascript深拷贝

    var oOriginal = { memNum: 1, // number ...

    郑小超.
  • Linq基础知识小记三

    1、子查询 Linq中的子查询思想和Sql中的子查询其实差不多, 对于方法语法,一个子查询包含在另一个子查询的Lambda表达式中,代码如下: string[]...

    郑小超.
  • .Net 环境下比较各种数据库插入操作的性能

    再说Windows的异步I/O操作前,先聊聊一些题外话,能帮助我们更好的理解异步I/O操作,常规的Web程序,当用户发起一次请求,当请求通过管道到达客户端的这个...

    郑小超.
  • 程序员必须要了解的网络协议HTTP,也许你只了解其中一部分

    获取报文首部 和GET 方法类似,但是不返回报文实体主体部分。主要用于确认 URL 的有效性以及资源更新的日期时间等。

    IT大咖说
  • 基于Django的电子商务网站开发(连载7)

    通信中无状态协议是指同一个会话的连续两个请求互相不了解,它们由最新实例化的环境进行解析,除了应用本身可能已经存储在全局对象中的所有信息外,该环境不保存与会话有关...

    小老鼠
  • 焦点事件

    焦点详解:使浏览器能够区分用户输入的对象,当一个元素有焦点的时候就可以接收用户的输入 1.点击 2.tab 3.js

    河湾欢儿
  • 云计算DevOps下,IT和业务应如何转变思维

    云计算开发运营要求企业的IT部门和业务部门在协作方式和思维方式上都做出一些变化。请仔细阅读本文并了解他们应当作出哪些改变。 在云计算技术问世之前,应用程序的部署...

    静一
  • cookie模块学习

    输出是一个合法的Set-Cookie首部, 可以作为HTTP响应的一部分传递给客户端。

    用户2936342
  • GAN之父Ian Goodfellow离职谷歌,加盟苹果神秘机器学习小组

    根据Goodfellow在领英上面的个人资料更新,他已经在3月份跳槽苹果,目前领导苹果的“特殊机器学习项目组”。

    大数据文摘
  • Web-第十天 Cookie&Session学习

    当用户访问某些Web应用时,经常会显示出该用户上一次的访问时间。例如,QQ登录成功后,会显示用户上次的登录时间。通过本任务,读者将学会如何使用Cookie技术实...

    Java帮帮

扫码关注云+社区

领取腾讯云代金券