对象扩展

说完了,对象的创建(框架的命名空间的创建)以及如何解决多库之间的命名空间冲突问题之后,接下来,就是要扩展我们的对象,来对框架进行扩展,我们需要一种新功能,将新添加的功能整合到我们定义的对象中去。这种类型的方法在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);

JS框架设计之对象扩展一种子模块的更多相关文章

  1. JS框架设计之对象数组化一种子模块

    类数组对象是一个很好的存储结构,但是功能太弱了,为了享受纯数组的哪些便捷的方法,使用前可以做下转换,通常可以使用$.slice.call()方法做转换,但是旧版本的IE下的HTMLCollection ...

  2. JS框架设计之对象类型判断一种子模块

    Javascript有两套数据类型,一套是基础数据类型,一套是对象数据类型.基础数据类型包括5种基本数据类型,分别是null,bool,undefined,number,string,也叫简单数据类型 ...

  3. js框架设计1.1命名空间笔记

    借到了司徒正美的写的js框架设计一书,司徒大神所著有些看不太懂,果然尚需循序渐进,稳扎js基础之中. 第一张开篇司徒阐述了种子模块的概念 种子模块亦为核心模块,框架最先执行模块,司徒见解应包含:对象扩 ...

  4. JS框架设计之命名空间设计一种子模块

    命名空间 1.种子模块作为一个框架的最开始,除了负责初始化框架的最基础部分. 2.种子模块作为框架的最开始,那么什么是种子框架的最开始呢?答案是IIFE(立即调用函数表达式); IIFE(立即调用函数 ...

  5. JS框架设计读书笔记之-核心模块

    随笔记录一下读书心得 1. 框架模块-核心模块 该模块是框架最先执行的部分,jQuery与vue中都有初始化的代码. 模块的功能主要是:对象扩展.数组化.类型判定.事件绑定和解绑.无冲突处理.模块加载 ...

  6. js框架设计1.2对象扩展笔记

    需要一个新的功能添加到我们的命名空间上.这方法在JS中被叫做extend或者mixin,若是遍历属性用一下1.1代码,则会遍历不出原型方法,所以1.2介绍的是mass Framework里的mix方法 ...

  7. JS框架设计之主流框架的引入机制DomeReady一种子模块

    DomReady其实是一种名为"DomContentLoaded"事件的名称,不过由于框架的需要,它与真正的DomContentLoaded有区别,在旧的JS书籍中m都会让我们把J ...

  8. js框架设计1.4类型判断

    这篇司徒大神介绍了很多js的 不靠谱类型判断.篇幅也是第一篇中最常的 ,经阅读后,以后一定要用框架的自带的类型判断,万万不可随便乱用js原生判断.

  9. JS框架设计读书笔记之-节点模块

    节点的创建 浏览器提供了多种手段创建API,从流行程度依次是document.createElement.innerHTML.insertAdjacentHTML.createContextualFr ...

随机推荐

  1. excel定位函数

    在Excel中MATCH函数可以返回指定内容所在的位置,而INDEX又可以根据指定位置查询到位置所对应的数据,各取其优点,我们可以返回指定位置相关联的数据.       MATCH函数(返回指定内容所 ...

  2. 团体程序设计天梯赛L1-020 帅到没朋友 2017-03-22 17:46 72人阅读 评论(0) 收藏

    L1-020. 帅到没朋友 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 当芸芸众生忙着在朋友圈中发照片的时候,总有一些人因为 ...

  3. 初识Java微信公众号开发

    选定类型后不可更改 企业号与服务号,订阅号的区别 公众号微信注册流程: 个人就选择订阅号 外网映射 必须要使用映射工具将本地的地址映射到公网上去 介绍一个ngrok 首先下载ngork,例如保存在D盘 ...

  4. Mirth Connect的简单使用

    第一步: 切换到Channels界面,右键点击New Channel 第二步 : 上面是设置一些通道信息. 其中summary(概要) 界面主要包含 通道名称,数据类型,依赖,通道初始状态,附件(是否 ...

  5. 原创：MVC 5 实例教程(MvcMovieStore 新概念版:mvc5.0,EF6.01) - 3、创建项目

    说明:MvcMovieStore项目已经发布上线,想了解最新版本功能请登录 MVC 影视(MvcMovie.cn) 进行查阅.如需转载,请注明出处:http://www.cnblogs.com/Dod ...

  6. [C#] ??雙問號的意思及用法

    int? x = null; int y = x ?? -1; 上面二行中,第一行是將x變數放入null,為什麼int能放null,可以參考另一篇文章http://charleslin74.pixne ...

  7. ajax 与 form 提交的区别

    有如下几种区别: 1. Ajax在提交.请求.接收时,都是异步进行的,网页不需要刷新:Form提交则是新建一个页面,哪怕是提交给自己本身的页面,也是需要刷新的: 2. A在提交时,是在后台新建一个请求 ...

  8. python3.7使用models.ForeignKey时一定要传入实参on_delete=models.CASCADE

    models.ForeignKey 模型中最重要的部分——以及模型中唯一需要的部分——是它定义的数据库字段列表.字段由类属性指定.注意不要选择与模型API冲突的字段名称,如清除.保存或删除. from ...

  9. C# RDLC报表不出现预览窗体直接输出到打印机

    #region 直接打印区域 /// <summary> /// 直接打印到打印机 /// </summary> /// <param name="report ...

  10. flask源码解析之DispatcherMiddleware

    DispatcherMiddleware作用 实现多app的应用,完成路由分发的功能 如何使用 from werkzeug.wsgi import DispatcherMiddleware from ...