详解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 相关文章推荐
jQuery实现鼠标经过提示信息的地图热点效果
Apr 26 Javascript
jQuery 3.0 的变化及使用方法
Feb 01 Javascript
AngularJS入门教程之AngularJS指令
Apr 18 Javascript
jQuery事件绑定on()与弹窗实现代码
Apr 28 Javascript
jQuery实现的网页换肤效果示例
Sep 20 Javascript
BootStrapValidator初使用教程详解
Feb 10 Javascript
原生js 封装get ,post, delete 请求的实例
Aug 11 Javascript
vue 插值 v-once,v-text, v-html详解
Jan 19 Javascript
原生JS实现获取及修改CSS样式的方法
Sep 04 Javascript
js基础之事件捕获与冒泡原理
Oct 09 Javascript
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 Javascript
详解Vue3 Composition API中的提取和重用逻辑
Apr 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中使用mktime获取时间戳的一个黑色幽默分析
2012/05/31 PHP
php生成N个不重复的随机数实例
2013/11/12 PHP
php验证身份证号码正确性的函数
2016/07/20 PHP
PHP基于单例模式编写PDO类的方法
2016/09/13 PHP
给大家分享几个常用的PHP函数
2017/01/15 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
PHP7移除的扩展和SAPI
2021/03/09 PHP
JavaScript实用技巧(一)
2010/08/16 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
2013/05/30 Javascript
用js实现控件的隐藏及style.visibility的使用
2013/06/14 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
2013/09/02 Javascript
理解javascript回调函数
2014/12/28 Javascript
关于网页中的无缝滚动的js代码
2016/06/09 Javascript
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
React Native AsyncStorage本地存储工具类
2017/10/24 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
Vue通过ref父子组件拿值方法
2018/09/12 Javascript
Vue实现按钮级权限方案
2019/11/21 Javascript
在vue中封装方法以及多处引用该方法详解
2020/08/14 Javascript
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
Python RuntimeError: thread.__init__() not called解决方法
2015/04/28 Python
python3实现逐字输出的方法
2019/01/23 Python
Django ORM多对多查询方法(自定义第三张表&ManyToManyField)
2019/08/09 Python
Python Json数据文件操作原理解析
2020/05/09 Python
Python OpenCV实现测量图片物体宽度
2020/05/27 Python
如何利用Python识别图片中的文字
2020/05/31 Python
Python进行统计建模
2020/08/10 Python
俄罗斯旅游网站:Tripadvisor俄罗斯
2017/03/21 全球购物
英国DVD和蓝光碟片购买网站:Zoom.co.uk(电影和电视)
2019/09/23 全球购物
史上最全面的Java面试题汇总!
2015/02/03 面试题
外语学院毕业生的自我鉴定
2013/11/28 职场文书
销售督导岗位职责
2015/04/10 职场文书