模仿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 相关文章推荐
Javascript判断文件是否存在(客户端/服务器端)
Sep 16 Javascript
js获取表格的行数和列数的方法
Oct 23 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
Sep 01 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
JavaScript实现多栏目切换效果
Dec 12 Javascript
详谈innerHTML innerText的使用和区别
Aug 18 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 Javascript
angular写一个列表的选择全选交互组件的示例
Jan 22 Javascript
Vue一个案例引发的递归组件的使用详解
Nov 15 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
Jul 29 Javascript
小程序最新获取用户昵称和头像的方法总结
Sep 23 Javascript
Vue3.0中的monorepo管理模式的实现
Oct 14 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实现图片自动清理的方法
2015/07/08 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
PHP goto语句用法实例
2019/08/06 PHP
如何在Laravel之外使用illuminate组件详解
2020/09/20 PHP
Javascript开发包大全整理
2006/12/22 Javascript
json 入门基础教程 推荐
2009/10/31 Javascript
javascript 模拟点击广告
2010/01/02 Javascript
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
javascript常见用法总结
2014/05/22 Javascript
jQuery中多个元素的Hover事件解决方案
2014/06/12 Javascript
javascript里绝对用的上的字符分割函数总结
2014/07/31 Javascript
javascript判断变量是否有值的方法
2015/04/20 Javascript
jQuery 插件封装的方法
2016/11/16 Javascript
jQuery 获取select选中值及清除选中状态
2016/12/13 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
jQuery响应滚动条事件功能示例
2017/10/14 jQuery
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
2019/08/23 Javascript
Python获取当前路径实现代码
2017/05/08 Python
python自带tkinter库实现棋盘覆盖图形界面
2019/07/17 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
解决TensorFlow GPU版出现OOM错误的问题
2020/02/03 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
css3 transform及原生js实现鼠标拖动3D立方体旋转
2016/06/20 HTML / CSS
罗技英国官方网站:Logitech UK
2020/11/03 全球购物
四年大学生活的个人自我评价
2013/12/11 职场文书
业务部主管岗位职责
2014/01/29 职场文书
公司会计主管岗位责任制
2014/03/01 职场文书
大型会议策划方案
2014/05/17 职场文书
学习保证书
2015/01/17 职场文书
检讨书模板大全
2015/05/07 职场文书
三八节祝酒词
2015/08/11 职场文书
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers