模仿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 相关文章推荐
jquery ajax执行后台方法
Mar 18 Javascript
JS中confirm,alert,prompt函数使用区别分析
Apr 01 Javascript
JS删除字符串中重复字符方法
Mar 09 Javascript
javascript if条件判断方法小结
May 17 Javascript
JavaScript中的函数嵌套使用
Jun 04 Javascript
两种js监听滚轮事件的实现方法
May 13 Javascript
Angularjs中UI Router的使用方法
May 14 Javascript
详解Vue组件之间的数据通信实例
Jun 17 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
Jan 02 Javascript
浅析Vue项目中使用keep-Alive步骤
Jul 27 Javascript
Vue实现一个无限加载列表功能
Nov 13 Javascript
jQuery zTree插件快速实现目录树
Aug 16 jQuery
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
笑谈配置,使用Smarty技术
2007/01/04 PHP
PHP开发者常犯的10个MySQL错误更正剖析
2012/01/30 PHP
codeigniter数据库操作函数汇总
2014/06/12 PHP
thinkphp中空模板与空模块的用法实例
2014/11/26 PHP
PHP ajax 异步执行不等待执行结果的处理方法
2015/05/27 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
yii 2.0中表单小部件的使用方法示例
2017/05/23 PHP
prototype.js的Ajax对象
2006/09/23 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
2013/01/24 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
2014/03/20 Javascript
防止登录页面出现在frame中js代码
2014/07/22 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
js实现的早期滑动门菜单效果代码
2015/08/27 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
Node.js安装配置图文教程
2017/05/10 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
2017/12/13 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
2017/12/20 Javascript
微信小程序App生命周期详解
2018/01/31 Javascript
vue-cli3 DllPlugin 提取公用库的方法
2019/04/24 Javascript
vue在路由中验证token是否存在的简单实现
2019/11/11 Javascript
支付宝小程序实现省市区三级联动
2020/06/21 Javascript
利用Python如何生成hash值示例详解
2017/12/20 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
浅谈python中真正关闭socket的方法
2018/12/18 Python
python3实现绘制二维点图
2019/12/04 Python
Python基于当前时间批量创建文件
2020/05/07 Python
CSS3教程(4):网页边框和网页文字阴影
2009/04/02 HTML / CSS
英语专业毕业个人求职自荐信
2013/09/21 职场文书
致跳远运动员广播稿
2014/02/11 职场文书
幼儿园教师的考核评语
2014/04/18 职场文书
2014年党员创先争优承诺书
2014/05/29 职场文书
2014年学校工作总结
2014/11/20 职场文书
2014年副班长工作总结
2014/12/10 职场文书
OpenCV 图像梯度的实现方法
2021/07/25 Python