模仿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 相关文章推荐
jquery判断浏览器后退时候弹出消息的方法
Aug 11 Javascript
jQuery实现获取元素索引值index的方法
Sep 18 Javascript
js实现自动图片轮播代码
Mar 22 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
Sep 28 Javascript
vue+springmvc导出excel数据的实现代码
Jun 27 Javascript
微信小程序实现录音时的麦克风动画效果实例
May 18 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
countup.js实现数字动态叠加效果
Oct 17 Javascript
通过GASP让vue实现动态效果实例代码详解
Nov 24 Javascript
vue中element 的upload组件发送请求给后端操作
Sep 07 Javascript
小程序实现tab标签页
Nov 16 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
不用mod_rewrite直接用php实现伪静态化页面代码
2008/10/04 PHP
PHP把空格、换行符、中文逗号等替换成英文逗号的正则表达式
2014/05/04 PHP
PHP调用C#开发的dll类库方法
2014/07/28 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
js中如何复制一个对象并获取其所有属性和属性对应的值
2013/10/24 Javascript
jquery操作select详解(取值,设置选中)
2014/02/07 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
JavaScript实现查找字符串中第一个不重复的字符
2014/12/29 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
2015/01/20 Javascript
在JavaScript中如何解决用execCommand(
2015/10/19 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
axios取消请求的实践记录分享
2018/09/26 Javascript
详解如何使用koa实现socket.io官网的例子
2018/11/04 Javascript
vuex vue简单使用知识点总结
2019/08/29 Javascript
JavaScript闭包相关知识解析
2019/10/19 Javascript
javascript实现移动端红包雨页面
2020/06/23 Javascript
python的random模块及加权随机算法的python实现方法
2017/01/04 Python
Python中datetime模块参考手册
2017/01/13 Python
Python实现字符串反转的常用方法分析【4种方法】
2017/09/30 Python
python正则实现计算器功能
2017/12/14 Python
python机器学习案例教程——K最近邻算法的实现
2017/12/28 Python
通过python顺序修改文件名字的方法
2018/07/11 Python
python实现n个数中选出m个数的方法
2018/11/13 Python
Python使用sax模块解析XML文件示例
2019/04/04 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
使用pytorch实现论文中的unet网络
2020/06/24 Python
详解HTML5中的拖放事件(Drag 和 drop)
2016/11/14 HTML / CSS
教师推荐信范文
2013/11/24 职场文书
简单的项目建议书模板
2014/03/12 职场文书
投资合作协议书
2014/04/17 职场文书
工作检讨书500字
2014/10/19 职场文书
保险内勤岗位职责
2015/04/13 职场文书
2015年扶贫帮困工作总结
2015/05/20 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
Python合并pdf文件的工具
2021/07/01 Python