详解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 相关文章推荐
DOM 基本方法
Jul 18 Javascript
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
Jan 22 Javascript
jQuery中获取checkbox选中项等操作及注意事项
Nov 24 Javascript
node.js中的fs.fchmod方法使用说明
Dec 16 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
Feb 28 Javascript
JavaScript多并发问题如何处理
Oct 28 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
Nov 17 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
Feb 27 Javascript
javaScript中封装的各种写法示例(推荐)
Jul 03 Javascript
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
highcharts 在angular中的使用示例代码
Sep 20 Javascript
Vue2.0实现组件数据的双向绑定问题
Mar 06 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
在apache下限制每个虚拟主机的并发数!!!!
2006/10/09 PHP
php中session退出登陆问题
2014/02/27 PHP
PHP mkdir()无写权限的问题解决方法
2014/06/19 PHP
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
解决php的“It is not safe to rely on the system’s timezone settings”问题
2015/10/08 PHP
smarty自定义函数用法示例
2016/05/20 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
CheckBox 如何实现全选?
2006/06/23 Javascript
Grid得到选择行数据的方法总结
2011/01/17 Javascript
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
JQuery+Ajax无刷新分页的实例代码
2014/02/08 Javascript
jQuery过滤选择器用法分析
2015/02/10 Javascript
js基于setTimeout与setInterval实现多线程
2016/06/17 Javascript
JS判断iframe是否加载完成的方法
2016/08/03 Javascript
Vue之Watcher源码解析(2)
2017/07/19 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
2018/08/09 Javascript
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
微信 jssdk 签名错误invalid signature的解决方法
2019/01/14 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
2020/11/16 Javascript
PyCharm 常用快捷键和设置方法
2017/12/20 Python
Python函数参数操作详解
2018/08/03 Python
python+selenium 定位到元素,无法点击的解决方法
2019/01/30 Python
Python使用pandas和xlsxwriter读写xlsx文件的方法示例
2019/04/09 Python
python opencv对图像进行旋转且不裁剪图片的实现方法
2019/07/09 Python
在Python中利用pickle保存变量的实例
2019/12/30 Python
详解win10下pytorch-gpu安装以及CUDA详细安装过程
2021/01/28 Python
美国NBA官方商店:NBA Store
2019/04/12 全球购物
咖啡蛋糕店创业计划书
2014/01/28 职场文书
家居饰品店创业计划书
2014/01/31 职场文书
部门年终奖分配方案
2014/05/07 职场文书
企业精神口号
2014/06/11 职场文书
民主评议党员个人总结
2015/02/13 职场文书
首都博物馆观后感
2015/06/05 职场文书
商务信函英语问候语
2015/11/10 职场文书
详解Golang如何优雅的终止一个服务
2022/03/21 Golang