模仿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 相关文章推荐
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
Jul 27 Javascript
JS中的数组方法笔记整理
Jul 26 Javascript
原生JS实现网络彩票投注效果
Sep 25 Javascript
jQuery动态生成Bootstrap表格
Nov 01 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 Javascript
表格展示利器 Bootstrap Table实例代码
Sep 06 Javascript
mui框架移动开发初体验详解
Oct 11 Javascript
vue中使用refs定位dom出现undefined的解决方法
Dec 21 Javascript
vue路由权限校验功能的实现代码
Jun 07 Javascript
原型和原型链 prototype和proto的区别详情
Nov 02 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模拟服务器实现autoindex效果的方法
2015/03/10 PHP
codeigniter显示所有脚本执行时间的方法
2015/03/21 PHP
Laravel 框架基于自带的用户系统实现登录注册及错误处理功能分析
2020/04/14 PHP
jQuery的运行机制和设计理念分析
2011/04/05 Javascript
jquery $.fn $.fx是什么意思有什么用
2013/11/04 Javascript
jquery实现html页面 div 假分页有原理有代码
2014/09/06 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
2016/05/21 Javascript
分享一个插件实现水珠自动下落效果
2016/06/01 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
javascript中call,apply,bind函数用法示例
2016/12/19 Javascript
protractor的安装与基本使用教程
2017/07/07 Javascript
Angular4学习笔记之实现绑定和分包
2017/08/01 Javascript
vue-router 组件复用问题详解
2018/01/22 Javascript
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
浅谈Python peewee 使用经验
2017/10/20 Python
Python探索之ModelForm代码详解
2017/10/26 Python
tensorflow 打印内存中的变量方法
2018/07/30 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
django 自定义过滤器(filter)处理较为复杂的变量方法
2019/08/12 Python
Numpy 中的矩阵求逆实例
2019/08/26 Python
Flask项目中实现短信验证码和邮箱验证码功能
2019/12/05 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
CSS实现聊天气泡效果
2020/04/26 HTML / CSS
中国专业的综合网上购物商城:京东
2016/08/02 全球购物
干部培训自我鉴定
2014/01/22 职场文书
打造完美自荐信
2014/01/24 职场文书
毕业生见习报告总结
2014/11/08 职场文书
导游词怎么写
2015/02/04 职场文书
贷款工资证明范本
2015/06/12 职场文书
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python
JS class语法糖的深入剖析
2022/07/07 Javascript