模仿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模仿win8等待提示圆圈进度条
Apr 24 Javascript
一个不错的字符串转码解码函数(自写)
Jul 31 Javascript
吐槽一下我所了解的Node.js
Oct 08 Javascript
js读取cookie方法总结
Oct 31 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
Aug 21 Javascript
JavaScript File分段上传
Mar 10 Javascript
原生js封装二级城市下拉列表的实现代码
Jun 16 Javascript
bootstrap提示标签、提示框实现代码
Dec 28 Javascript
Vue键盘事件用法总结
Apr 18 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 Javascript
layui实现给某一列加点击事件
Oct 26 Javascript
vue+高德地图实现地图搜索及点击定位操作
Sep 09 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与MongoDB简介|安全|M+PHP应用实例详解
2013/06/17 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
JS在IE和FF下attachEvent,addEventListener学习笔记
2009/11/26 Javascript
javascript 用原型继承来实现对象系统
2010/03/22 Javascript
jQuery晃动层特效实现方法
2015/03/09 Javascript
javascript操作ul中li的方法
2015/05/14 Javascript
JavaScript中使用Math.PI圆周率属性的方法
2015/06/14 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
2015/08/10 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
2015/08/24 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
2015/10/21 Javascript
javascript html5移动端轻松实现文件上传
2020/03/27 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
2016/12/08 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
2019/04/09 Javascript
vue组件三大核心概念图文详解
2019/05/30 Javascript
使用JQuery自动完成插件Auto Complete详解
2019/06/18 jQuery
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
Python os模块学习笔记
2015/06/21 Python
Python环境下搭建属于自己的pip源的教程
2016/05/05 Python
python实现用户登录系统
2016/05/21 Python
Python基础中所出现的异常报错总结
2016/11/19 Python
python3的url编码和解码,自定义gbk、utf-8的例子
2019/08/22 Python
Django1.11配合uni-app发起微信支付的实现
2019/10/12 Python
Python的PIL库中getpixel方法的使用
2020/04/09 Python
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
香港通票:Hong Kong Pass
2019/02/26 全球购物
Deux par Deux官方网站:设计师童装
2020/01/03 全球购物
《搭石》教学反思
2014/04/07 职场文书
元旦晚会活动总结
2014/07/09 职场文书
幸福中国演讲稿
2014/09/12 职场文书
财务审计整改报告
2014/11/06 职场文书
Node与Python 双向通信的实现代码
2021/07/16 Javascript