详解jQuery插件开发中的extend方法


Posted in Javascript onNovember 19, 2013

Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,
dest是要整合的空间可以使{} 或者不写

src是一个JSON表达式表示的javascript对象.... 因此里面可以添加方法属性等等...

我么通过不同的应用可以将我们自己的方法整合到jQuery空间中....实现插件开发

在jQuery中定义  jQuery.extend = jQuery.fn.extend  所以这两个函数式相同的

 一、Jquery的扩展方法原型是: 

extend(dest,src1,src2,src3...);

它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后,是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构,可以如下使用:

var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数。

这样就可以将src1,src2,src3...进行合并,然后将合并结果返回给newSrc了。如下例:

var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})

那么合并后的结果

result={name:"Jerry",age:21,sex:"Boy"}

也就是说后面的参数如果和前面的参数存在相同的名称,那么后面的会覆盖前面的参数值。

二、省略dest参数
上述的extend方法原型中的dest参数是可以省略的,如果省略了,则该方法就只能有一个src参数,而且是将该src合并到调用extend方法的对象中去,如:
1、$.extend(src)
该方法就是将src合并到jquery的全局对象中去,如:

$.extend({   hello:function(){alert('hello');}   });

就是将hello方法合并到jquery的全局对象中。
2、$.fn.extend(src)
该方法将src合并到jquery的实例对象中去,如:
$.fn.extend({   hello:function(){alert('hello');}  });

就是将hello方法合并到jquery的实例对象中。

下面例举几个常用的扩展实例:

$.extend({net:{}});

这是在jquery全局对象中扩展一个net命名空间。

$.extend($.net,{    hello:function(){alert('hello');}   })

这是将hello方法扩展到之前扩展的Jquery的net命名空间中去。

三、Jquery的extend方法还有一个重载原型:

extend(boolean,dest,src1,src2,src3...)

第一个参数boolean代表是否进行深度拷贝,其余参数和前面介绍的一致,什么叫深层拷贝,我们看一个例子:

var result=$.extend( true,  {},       { name: "John", location: {city: "Boston",county:"USA"} },       { last: "Resig", location: {state: "MA",county:"China"} } );

我们可以看出src1中嵌套子对象location:{city:"Boston"},src2中也嵌套子对象location:{state:"MA"},第一个深度拷贝参数为true,那么合并后的结果就是:
 result={name:"John",last:"Resig",         location:{city:"Boston",state:"MA",county:"China"}}
 

也就是说它会将src中的嵌套子对象也进行合并,而如果第一个参数boolean为false,我们看看合并的结果是什么,如下:

var result=$.extend( false, {},   { name: "John", location:{city: "Boston",county:"USA"} },   { last: "Resig", location: {state: "MA",county:"China"} }                       );

那么合并后的结果就是:
result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}

以上就是$.extend()在项目中经常会使用到的一些细节。

Javascript 相关文章推荐
JavaScript实现禁止后退的方法
Dec 27 Javascript
jQuery.ajax 用户登录验证代码
Oct 29 Javascript
JavaScript 基础篇(一)
Mar 30 Javascript
使用PHP+JQuery+Ajax分页的实现
Apr 23 Javascript
JavaScript继承模式粗探
Jan 12 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 Javascript
JavaScript、C# URL编码、解码总结
Jan 21 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
Feb 17 Javascript
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
详解用函数式编程对JavaScript进行断舍离
Sep 18 Javascript
微信小程序监听用户登录事件的实现方法
Nov 11 Javascript
微信小程序中网络请求缓存的解决方法
Dec 29 Javascript
Js 导出table内容到Excel的简单实例
Nov 19 #Javascript
js文本框输入点回车触发确定兼容IE、FF等
Nov 19 #Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
Nov 19 #Javascript
JS注释所产生的bug 即使注释也会执行
Nov 19 #Javascript
js计算两个时间之间天数差的实例代码
Nov 19 #Javascript
JS获取当前网址、主机地址项目根路径
Nov 19 #Javascript
jquery ajax 简单范例(界面+后台)
Nov 19 #Javascript
You might like
用PHP实现文件上传二法
2006/10/09 PHP
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
php实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
thinkPHP删除前弹出确认框的简单实现方法
2016/05/16 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
短信提示使用 特效
2007/01/19 Javascript
用JavaScript事件串连执行多个处理过程的方法
2007/03/09 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
2010/12/30 Javascript
js列举css中所有图标的实现代码
2011/07/04 Javascript
使用js获取地址栏中传递的值
2013/07/02 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
JavaScript中的null和undefined区别介绍
2015/01/01 Javascript
浅谈JavaScript中数组的增删改查
2016/06/20 Javascript
使用canvas及js简单生成验证码方法
2017/04/02 Javascript
微信小程序 获取二维码实例详解
2017/06/23 Javascript
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
Nodejs环境实现socket通信过程解析
2020/07/03 NodeJs
python中如何使用朴素贝叶斯算法
2017/04/06 Python
python中plot实现即时数据动态显示方法
2018/06/22 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
利用css3如何设置没有上下边的列表间隔线
2017/07/03 HTML / CSS
欧洲领先的电子和电信零售商和服务提供商:Currys PC World Business
2017/12/05 全球购物
Java方面的关于数组和继承的笔面试题
2015/09/18 面试题
汽车技术服务与营销专业在籍生自荐信
2013/09/28 职场文书
工厂总经理岗位职责
2014/02/07 职场文书
自荐信如何制作?
2014/02/21 职场文书
工作过失检讨书
2014/02/23 职场文书
2014年公司迎新年活动方案
2014/02/24 职场文书
目标责任书格式
2014/07/28 职场文书
工程承包协议书
2014/10/20 职场文书
商业门面租房协议书
2014/11/25 职场文书
2015年度班主任自我评价
2015/03/11 职场文书
2016年社区服务活动总结
2016/04/06 职场文书
教你使用TensorFlow2识别验证码
2021/06/11 Python
带你了解Java中的ForkJoin
2022/04/28 Java/Android