模仿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 相关文章推荐
httpclient模拟登陆具体实现(使用js设置cookie)
Dec 11 Javascript
一个实用的图片切换支持点击切换和自动轮播
Sep 09 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
Feb 17 Javascript
javascript实现checkbox全选的代码
Apr 30 Javascript
js+HTML5实现视频截图的方法
Jun 16 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
Aug 05 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 Javascript
JS设计模式之访问者模式定义与用法分析
Feb 05 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
Oct 31 Javascript
vue的列表交错过渡实现代码示例
May 05 Javascript
对layui初始化列表的CheckBox属性详解
Sep 13 Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 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 str_pad 函数用法简介
2009/07/11 PHP
php使用curl发送json格式数据实例
2013/12/17 PHP
php实现RSA加密类实例
2015/03/26 PHP
PHP session会话操作技巧小结
2016/09/27 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
Javascript中暂停功能的实现代码
2007/03/04 Javascript
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
分享27款非常棒的jQuery 表单插件
2011/03/28 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
JavaScript DOM节点添加示例
2014/07/16 Javascript
jQuery实现新消息闪烁标题提示的方法
2015/03/11 Javascript
jQuery Html控件基本操作(日常收集整理)
2016/03/11 Javascript
JS实现队列与堆栈的方法
2016/04/21 Javascript
微信小程序 弹框和模态框实现代码
2017/03/10 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
ES6中module模块化开发实例浅析
2017/04/06 Javascript
Angular2 父子组件数据通信实例
2017/06/22 Javascript
微信小程序button标签open-type属性原理解析
2020/01/21 Javascript
python构造icmp echo请求和实现网络探测器功能代码分享
2014/01/10 Python
python提示No module named images的解决方法
2014/09/29 Python
用Python的Django框架完成视频处理任务的教程
2015/04/02 Python
Python while、for、生成器、列表推导等语句的执行效率测试
2015/06/03 Python
Python编程中对文件和存储器的读写示例
2016/01/25 Python
Python数据报表之Excel操作模块用法分析
2019/03/11 Python
Python获取好友地区分布及好友性别分布情况代码详解
2019/07/10 Python
python单向循环链表原理与实现方法示例
2019/12/03 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
使用canvas压缩图片上传的方法示例
2020/02/07 HTML / CSS
AmazeUI导航的示例代码
2020/08/14 HTML / CSS
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
党员承诺践诺书
2014/05/20 职场文书
安全生产工作汇报
2014/10/28 职场文书
世界环境日活动总结
2015/02/11 职场文书
2015年学校关工委工作总结
2015/04/03 职场文书
公司管理建议书
2015/09/14 职场文书