模仿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.ui.draggable中文文档
Nov 24 Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
Oct 20 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
Jun 11 Javascript
web基于浏览器的本地存储方法应用
Nov 27 Javascript
js编码、解码函数介绍及其使用示例
Sep 05 Javascript
一个JavaScript变量声明的知识点
Oct 28 Javascript
jquery.post用法示例代码
Jan 03 Javascript
JavaScript中的对象继承关系
Aug 01 Javascript
通过 JS 判断页面是否有滚动条的实现方法
Apr 05 Javascript
详解微信小程序中组件通讯
Oct 30 Javascript
重学JS之显示强制类型转换详解
Jun 30 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
Jul 23 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中过滤非法字符的具体实现
2013/10/29 PHP
php的webservice的wsdl的XML无法显示问题的解决方法
2014/03/11 PHP
php中rename函数用法分析
2014/11/15 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
PHP如何通过AJAX方式实现登录功能
2015/11/23 PHP
php unlink()函数使用教程
2018/07/12 PHP
JS 字符串连接[性能比较]
2009/05/10 Javascript
JQuery 遮罩层实现(mask)实现代码
2010/01/09 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
javascript验证只能输入数字和一个小数点示例
2013/10/21 Javascript
js中window.open的参数及注意注意事项
2016/07/06 Javascript
纯JS实现表单验证实例
2016/12/24 Javascript
实现两个文本框同时输入的实例
2017/09/25 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
2019/04/04 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
Element Tooltip 文字提示的使用示例
2020/07/26 Javascript
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
Python的Django框架中模板碎片缓存简介
2015/07/24 Python
Python对多属性的重复数据去重实例
2018/04/18 Python
pymongo中group by的操作方法教程
2019/03/22 Python
Python数据库小程序源代码
2019/09/15 Python
解决django model修改添加字段报错的问题
2019/11/18 Python
使用Python matplotlib作图时,设置横纵坐标轴数值以百分比(%)显示
2020/05/16 Python
Python基于time模块表示时间常用方法
2020/06/18 Python
移动web模拟客户端实现多方框输入密码效果【附代码】
2016/03/25 HTML / CSS
HTML5实现签到 功能
2018/10/09 HTML / CSS
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
自动化专业本科毕业生求职信
2013/10/20 职场文书
测试工程师岗位职责
2013/11/28 职场文书
4s店总经理岗位职责
2013/12/31 职场文书
经理管理专业自荐信范文
2013/12/31 职场文书
三爱活动实施方案
2014/03/19 职场文书
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
敬业奉献模范事迹材料(2016精选版)
2016/02/26 职场文书
go使用Gin框架利用阿里云实现短信验证码功能
2021/08/04 Golang
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
2022/08/05 Vue.js