模仿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 相关文章推荐
使用prototype.js进行异步操作
Feb 07 Javascript
jQuery 创建Dom元素
May 07 Javascript
jquery结合CSS使用validate实现漂亮的验证
Jan 29 Javascript
JavaScript面对国际化编程时的一些建议
Jun 24 Javascript
jQuery快速实现商品数量加减的方法
Feb 06 Javascript
JS中使用 after 伪类清除浮动实例
Mar 01 Javascript
js实现本地时间同步功能
Aug 26 Javascript
微信小程序富文本渲染引擎的详解
Sep 30 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
Dec 24 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
Feb 12 Javascript
vue 自定义组件的写法与用法详解
Mar 04 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 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
mysql建立外键
2006/11/25 PHP
mysql From_unixtime及UNIX_TIMESTAMP及DATE_FORMAT日期函数
2010/03/21 PHP
PHP自动识别字符集并完成转码详解
2013/08/02 PHP
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
2010/01/05 Javascript
javascript中 try catch用法
2015/08/16 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
jQuery实现Email邮箱地址自动补全功能代码
2015/11/03 Javascript
对javascript继承的理解
2016/10/11 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
微信小程序实现换肤功能
2018/03/14 Javascript
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
vue中使用protobuf的过程记录
2018/10/26 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
微信小程序使用npm包的方法步骤
2019/08/13 Javascript
vue props 单项数据流实例分享
2020/02/16 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
2020/07/31 Javascript
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
[07:01]DOTA2-DPC中国联赛正赛 Aster vs Magma 3月5日 赛后选手采访
2021/03/11 DOTA
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
Python callable()函数用法实例分析
2018/03/17 Python
关于Tensorflow中的tf.train.batch函数的使用
2018/04/24 Python
使用python批量化音乐文件格式转换的实例
2019/01/09 Python
python函数装饰器之带参数的函数和带参数的装饰器用法示例
2019/11/06 Python
python使用docx模块读写docx文件的方法与docx模块常用方法详解
2020/02/17 Python
python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配
2020/02/29 Python
优秀员工年终发言演讲稿
2014/01/01 职场文书
银行批评与自我批评
2014/02/10 职场文书
个人校本研修方案
2014/05/26 职场文书
银行优秀员工事迹材料
2014/05/29 职场文书
运动会口号大全
2014/06/07 职场文书
优秀团员事迹材料1500字
2014/08/31 职场文书
运动会广播稿200字(10篇)
2014/10/12 职场文书