模仿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 相关文章推荐
拖动Html元素集合 Drag and Drop any item
Dec 22 Javascript
JavaScript中的isXX系列是否继续使用的分析
Apr 16 Javascript
javascript中文本框中输入法切换的问题
Dec 10 Javascript
javascript实现控制浏览器全屏
Mar 30 Javascript
JavaScript返回0-1之间随机数的方法
Apr 06 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
JavaScript编写连连看小游戏
Jul 07 Javascript
javascript的BOM汇总
Jul 16 Javascript
创建一个类Person的简单实例
May 17 Javascript
Vue 2.0入门基础知识之内部指令详解
Oct 15 Javascript
vue 项目地址去掉 #的方法
Oct 20 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
Sep 09 Javascript
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下检测字符串是否是utf8编码的代码
2008/06/28 PHP
PHP cron中的批处理
2008/09/16 PHP
PHP中error_reporting()函数的用法(修改PHP屏蔽错误)
2011/07/01 PHP
php中日期加减法运算实现代码
2011/12/08 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
浅谈Javascript面向对象编程
2011/11/15 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
2013/10/24 Javascript
简单的代码实现jquery定时器
2013/11/17 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
2014/04/20 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
全面解析Bootstrap手风琴效果
2020/04/17 Javascript
jQuery+CSS3实现点赞功能
2017/03/13 Javascript
信息滚动效果的实例讲解
2017/09/18 Javascript
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
2018/07/24 Javascript
js中forEach,for in,for of循环的用法示例小结
2020/03/14 Javascript
js中实现继承的五种方法
2021/01/25 Javascript
python将字符串转换成数组的方法
2015/04/29 Python
python安装本地whl的实例步骤
2019/10/12 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
CSS3媒体查询Media Queries基础学习教程
2016/02/29 HTML / CSS
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
名词解释型面试题(主要是网络)
2013/12/27 面试题
庆七一活动方案
2014/01/25 职场文书
捐书倡议书
2014/08/29 职场文书
助学感谢信范文
2015/01/21 职场文书
自我检讨报告
2015/01/28 职场文书
英文产品推荐信
2015/03/27 职场文书
上市公司董事长岗位职责
2015/04/16 职场文书
军训心得体会范文(2016最新篇)
2016/01/11 职场文书
导游词之南京汤山温泉
2019/11/26 职场文书
Java实现多文件上传功能
2021/06/30 Java/Android
vue3.0 数字翻牌组件的使用方法详解
2022/04/20 Vue.js
pycharm无法安装cv2模块问题
2022/05/20 Python
SQL Server携程核心系统无感迁移到MySQL实战
2022/06/01 SQL Server