模仿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 相关文章推荐
写的htc的数据表格
Jan 20 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
Dec 15 Javascript
二叉树先序遍历的非递归算法具体实现
Jan 09 Javascript
JavaScript数组迭代器实例分析
Jun 09 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
Apr 11 Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 Javascript
JS中BOM相关知识点总结(必看篇)
Nov 22 Javascript
angular-ui-sortable实现可拖拽排序列表
Dec 28 Javascript
flexslider.js实现移动端轮播
Feb 05 Javascript
JS实现登录页密码的显示和隐藏功能
Dec 06 Javascript
解决vue初始化项目一直停在downloading template的问题
Nov 09 Javascript
JavaScript控制台的更多功能
Apr 28 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入门经历和学习过程分享
2014/04/11 PHP
PHP判断文章里是否有图片的简单方法
2014/07/26 PHP
php运行提示:Fatal error Allowed memory size内存不足的解决方法
2014/12/17 PHP
javascript 函数调用的对象和方法
2010/07/01 Javascript
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
js时间戳格式化成日期格式的多种方法
2013/11/11 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
解决JS请求服务器gbk文件乱码的问题
2015/10/16 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
2016/06/12 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
AngularJS入门教程之静态模板详解
2016/08/18 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
2016/10/13 Javascript
Javascript中关于Array.filter()的妙用详解
2016/12/04 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
2017/02/17 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
react配合antd组件实现的管理系统示例代码
2018/04/24 Javascript
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
2019/05/14 Javascript
VUE项目初建和常见问题总结
2019/09/12 Javascript
jquery实现吸顶导航效果
2020/01/08 jQuery
如何实现echarts markline标签名显示自己想要的
2020/07/20 Javascript
React实现轮播效果
2020/08/25 Javascript
[01:06:19]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第二场 1月8日
2021/03/11 DOTA
Python生成随机数的方法
2014/01/14 Python
python实现的生成随机迷宫算法核心代码分享(含游戏完整代码)
2014/07/11 Python
python字典基本操作实例分析
2015/07/11 Python
浅谈Pytorch torch.optim优化器个性化的使用
2020/02/20 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
社区春季防火方案
2014/06/02 职场文书
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
六一活动主持词
2015/06/30 职场文书
浅谈python中的多态
2021/06/15 Python
MySQL实现配置主从复制项目实践
2022/03/31 MySQL