模仿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 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
面向对象的Javascript之三(封装和信息隐藏)
Jan 27 Javascript
JS中prototype关键字的功能介绍及使用示例
Jul 21 Javascript
可简单避免的三个JS发布错误的详细介绍
Aug 02 Javascript
Javascript中replace()小结
Sep 30 Javascript
Vue概念及常见命令介绍(1)
Dec 08 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
Dec 13 Javascript
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
JS中的回调函数实例浅析
Mar 21 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
May 21 Javascript
JS 图片压缩原理与实现方法详解
Apr 29 Javascript
vue+iview分页组件的封装
Nov 17 Vue.js
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自定义函数收代码
2010/08/01 PHP
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
php自动给网址加上链接的方法
2015/06/02 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
浅谈PHP实现大流量下抢购方案
2017/12/15 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
javascript dom 基本操作小结
2010/04/11 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
2011/03/10 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
Angular的自定义指令以及实例
2016/12/26 Javascript
AngularJS Select(选择框)使用详解
2017/01/18 Javascript
JavaScript函数节流和函数防抖之间的区别
2017/02/15 Javascript
如何解决webpack-dev-server代理常切换问题
2019/01/09 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
nodeJs项目在阿里云的简单部署
2020/11/27 NodeJs
[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
使用Python3 编写简单信用卡管理程序
2016/12/21 Python
Django中间件工作流程及写法实例代码
2018/02/06 Python
对Python中DataFrame按照行遍历的方法
2018/04/08 Python
使用numba对Python运算加速的方法
2018/10/15 Python
python仿抖音表白神器
2019/04/08 Python
解决pyinstaller打包发布后的exe文件打开控制台闪退的问题
2019/06/21 Python
python的pstuil模块使用方法总结
2019/07/26 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
详解CSS3中@media的实际使用
2015/08/04 HTML / CSS
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
意大利灯具购物网站:Lampade.it
2018/10/18 全球购物
英国发展最快的在线超市之一:Click Marketplace
2021/02/15 全球购物
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
教师批评与自我批评总结
2014/10/16 职场文书
介绍长城的导游词
2015/01/30 职场文书
初中军训感想
2015/08/07 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书
Python日志模块logging用法
2022/06/05 Python