模仿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 replace方法与正则表达式
Feb 19 Javascript
jquery 添加节点的几种方法介绍
Sep 04 Javascript
jQuery中noconflict函数的实现原理分解
Feb 03 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
Sep 24 Javascript
JavaScript中Math对象的方法介绍
Jan 05 Javascript
微信分享调用jssdk实例
Jun 08 Javascript
JavaScript中发出HTTP请求最常用的方法
Jul 12 Javascript
微信小程序Getuserinfo解决方案图解
Aug 24 Javascript
angularJs利用$scope处理升降序的方法
Oct 08 Javascript
vue + typescript + 极验登录验证的实现方法
Jun 27 Javascript
vue v-model的用法解析
Oct 19 Javascript
解决js中的setInterval清空定时器不管用问题
Nov 17 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制作静态网站的模板框架(一)
2006/10/09 PHP
PHP上传文件时自动分配路径的方法
2015/01/09 PHP
php中删除数组的第一个元素和最后一个元素的函数
2015/03/07 PHP
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
JS构建页面的DOM节点结构的实现代码
2011/12/09 Javascript
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
js传中文参数controller里获取参数乱码问题解决方法
2014/01/03 Javascript
jquery ajax跨域解决方法(json方式)
2014/02/04 Javascript
JavaScript正则表达式匹配 div  style标签
2016/03/15 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
详解如何在vue中使用sass
2017/06/21 Javascript
NodeJS自定义模块写法(详解)
2017/06/27 NodeJs
layui监听select变化,以及设置radio选中的方法
2019/09/24 Javascript
jQuery实时统计输入框字数及限制
2020/06/24 jQuery
SpringBoot在yml配置文件中配置druid的操作
2020/11/16 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
[01:48]DOTA2 2015国际邀请赛中国区预选赛第二日战报
2015/05/27 DOTA
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
python实现查找两个字符串中相同字符并输出的方法
2015/07/11 Python
Python爬虫辅助利器PyQuery模块的安装使用攻略
2016/04/24 Python
Python pass详细介绍及实例代码
2016/11/24 Python
python 图片去噪的方法示例
2019/07/09 Python
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
某科技软件测试面试题
2013/05/19 面试题
中专毕业生求职简历的自我评价
2013/10/21 职场文书
经济学博士求职自荐信范文
2013/11/23 职场文书
银行个人求职自荐信范文
2013/12/16 职场文书
机电专业个人求职信范文
2013/12/30 职场文书
英文请假条
2014/04/11 职场文书
秋季校运会广播稿100字
2014/09/18 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
SpringBoot整合MongoDB的实现步骤
2021/06/23 MongoDB