模仿JQuery.extend函数扩展自己对象的js代码


Posted in Javascript onDecember 09, 2009

但在写的过程中发现,如果要在之前写好的对象中添加新的静态方法或实例方法,要修改原有的对象结构,于是查看了jquery了extend方法,果然extend方法支持了jq的半边天,拿来主义,给自己的对象做扩张用。

下面进入正题:
假如有以下一个对象

var MyMath = { 
//加法 
Add: function(a, b){ 
return a + b; 
}, 
//减法 
Sub: function(a, b){ 
return a - b; 
} 
}

对象名MyMath,有两个静态方法Add和Sub,正常调用:
alert(MyMath.Add(3, 5)) //结果8

好,现在如果现在MyMath增加两个静态方法(乘法、除法)怎么办,并且不要修改之前写好的对象,以前我们可以这么做:
//新加一静态方法:Mul乘法 
MyMath["Mul"] = function(a, b){ 
return a * b; 
} 
//新加一静态方法:Div除法 
MyMath["Div"] = function(a, b){ 
return a / b; 
}

这样,我们给MyMath添加两个方法:Mul和Div。正常调用:
alert(MyMath.Add(3, 5)) //结果8 
alert(MyMath.Mul(3, 5)) //结果15

但是,刚才增加方法的写法有点笨拙,每增加一个方法都要写一次对象名(MyMath),能不能想之前我们创建对象的时候那样,通过Json的结构去声明一个对象呢?
答案当然是可以了,通过模拟JQuery.extend函数,轻松做到。以下提取JQuery.extend函数并修改了函数名:
MyMath.extend = function(){ 
// copy reference to target object 
var target = arguments[0] || 
{}, i = 1, length = arguments.length, deep = false, options; 
// Handle a deep copy situation 
if (typeof target === "boolean") { 
deep = target; 
target = arguments[1] || 
{}; 
// skip the boolean and the target 
i = 2; 
} 
// Handle case when target is a string or something (possible in deep copy) 
if (typeof target !== "object" && !jQuery.isFunction(target)) 
target = {}; 
// extend jQuery itself if only one argument is passed 
if (length == i) { 
target = this; 
--i; 
} 
for (; i < length; i++) 
// Only deal with non-null/undefined values 
if ((options = arguments[i]) != null) 
// Extend the base object 
for (var name in options) { 
var src = target[name], copy = options[name]; 
// Prevent never-ending loop 
if (target === copy) 
continue; 
// Recurse if we're merging object values 
if (deep && copy && typeof copy === "object" && !copy.nodeType) 
target[name] = jQuery.extend(deep, // Never move original objects, clone them 
src || (copy.length != null ? [] : {}), copy); 
// Don't bring in undefined values 
else 
if (copy !== undefined) 
target[name] = copy; 
} 
// Return the modified object 
return target; 
};

现在我们通过这个extend方法来增加刚才我们的方法(乘法、除法):
MyMath.extend({ 
Mul: function(a, b){ 
return a * b; 
}, 
Div: function(a, b){ 
return a / b; 
} 
});

这样的结构更加一目了然。
转载请注上来自:http://www.cnblogs.com/wbkt2t
Javascript 相关文章推荐
fix-ie5.js扩展在IE5下不能使用的几个方法
Aug 20 Javascript
JS实现带鼠标效果的头像及文章列表代码
Sep 27 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 Javascript
学习使用AngularJS文件上传控件
Feb 16 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
React-native桥接Android原生开发详解
Jan 17 Javascript
ng-repeat指令在迭代对象时的去重方法
Oct 02 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
May 20 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
Jun 27 Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 Javascript
微信小程序实现抖音播放效果的实例代码
Apr 11 Javascript
jQuery实现简单全选框
Sep 13 jQuery
js 与或运算符 || &amp;&amp; 妙用
Dec 09 #Javascript
测试你的JS的掌握程度的代码
Dec 09 #Javascript
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
Dec 09 #Javascript
jMessageBox 基于jQuery的窗口插件
Dec 09 #Javascript
jQuery 开天辟地入门篇一
Dec 09 #Javascript
jquery tablesorter.js 支持中文表格排序改进
Dec 09 #Javascript
jquery 事件执行检测代码
Dec 09 #Javascript
You might like
php中获取远程客户端的真实ip地址的方法
2011/08/03 PHP
php的4种常见运行方式
2015/03/20 PHP
PHP读取文件内容的五种方式
2015/12/28 PHP
利用php抓取蜘蛛爬虫痕迹的示例代码
2016/09/30 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
Javascript面向对象扩展库代码分享
2012/03/27 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
JavaScript中的Math.LOG2E属性使用详解
2015/06/14 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
2016/01/18 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
2017/08/28 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
小程序实现抽奖动画
2020/04/16 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
vue调用本地摄像头实现拍照功能
2020/08/14 Javascript
Javascript confirm多种使用方法解析
2020/09/25 Javascript
Tornado Web Server框架编写简易Python服务器
2018/07/28 Python
Python开启线程,在函数中开线程的实例
2019/02/22 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
Python 中包/模块的 `import` 操作代码
2019/04/22 Python
pytorch 实现查看网络中的参数
2020/01/06 Python
keras之权重初始化方式
2020/05/21 Python
Python基于正则表达式实现计算器功能
2020/07/13 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
厨房工作人员岗位职责
2013/11/15 职场文书
员工评语大全
2014/01/19 职场文书
团支书竞选演讲稿
2014/04/28 职场文书
鉴定评语大全
2014/05/05 职场文书
学校安全防火方案
2014/06/07 职场文书
中学清明节活动总结
2014/07/04 职场文书
篮球赛新闻稿
2015/07/17 职场文书
2016应届毕业生就业指导课心得体会
2016/01/15 职场文书
新手必备Python开发环境搭建教程
2021/05/28 Python