模仿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中数组的sort()方法的使用介绍
Dec 18 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 Javascript
node.js入门教程
Jun 01 Javascript
JavaScript不刷新实现浏览器的前进后退功能
Nov 05 Javascript
使用javascript实现判断当前浏览器
Apr 14 Javascript
javascript Promise简单学习使用方法小结
May 17 Javascript
详谈for循环里面的break和continue语句
Jul 20 Javascript
vue实现单选和多选功能
Aug 11 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
Sep 10 Javascript
Vue使用v-viewer实现图片预览
Oct 21 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 Javascript
Flexible.js可伸缩布局实现方法详解
Nov 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 ? EasyUI DataGrid 资料取的方式介绍
2012/11/07 PHP
php的慢速日志引起的Mysql错误问题分析
2014/05/13 PHP
PHP多文件上传类实例
2015/03/07 PHP
php报错502badgateway解决方法
2019/10/11 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
设定php简写功能的方法
2019/11/28 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
javascript 简练的几个函数
2009/08/29 Javascript
js修改原型的属性使用介绍
2014/01/26 Javascript
js获取ajax返回值代码
2014/04/30 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
2015/01/19 Javascript
js判断登录与否并确定跳转页面的方法
2015/01/30 Javascript
jquery分割字符串的方法
2015/06/24 Javascript
jQuery仿京东商城楼梯式导航定位菜单
2016/07/25 Javascript
微信小程序 swiper组件详解及实例代码
2016/10/25 Javascript
Vue.js框架路由使用方法实例详解
2017/08/25 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
2017/09/19 jQuery
Vue 换肤的示例实践
2018/01/23 Javascript
angularjs实现table增加tr的方法
2018/02/27 Javascript
vue.js图片转Base64上传图片并预览的实现方法
2018/08/02 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
2018/09/03 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
python脚本爬取字体文件的实现方法
2017/04/29 Python
学习Python selenium自动化网页抓取器
2018/01/20 Python
python版大富翁源代码分享
2018/11/19 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
Pytorch根据layers的name冻结训练方式
2020/01/06 Python
解决python -m pip install --upgrade pip 升级不成功问题
2020/03/05 Python
python程序输出无内容的解决方式
2020/04/09 Python
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
十八届三中全会报告学习材料
2014/02/17 职场文书
广告学专业毕业生自荐信
2014/05/28 职场文书
培训班开班主持词
2015/07/02 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书