jQuery.extend 函数详解


Posted in Javascript onFebruary 03, 2012

JQuery的extend扩展方法: Jquery的扩展方法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 相关文章推荐
[转]JS宝典学习笔记
Feb 07 Javascript
JavaScript入门之事件、cookie、定时等
Oct 21 Javascript
jQuery中:has选择器用法实例
Dec 30 Javascript
js css3实现图片拖拽效果
Mar 04 Javascript
详解a++和++a的区别
Aug 30 Javascript
使用InstantClick.js让页面提前加载200ms
Sep 12 Javascript
vue二级路由设置方法
Feb 09 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
Mar 02 Javascript
利用Vue构造器创建Form组件的通用解决方法
Dec 03 Javascript
使用JavaScript解析URL的方法示例
Mar 01 Javascript
浅谈redux, koa, express 中间件实现对比解析
May 23 Javascript
ES6函数实现排它两种写法解析
May 13 Javascript
jquery插件开发方法(初学者)
Feb 03 #Javascript
jquery插件制作简单示例说明
Feb 03 #Javascript
jQuery数组处理代码详解(含实例演示)
Feb 03 #Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
Feb 02 #Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 #Javascript
JavaScript初学者应注意的七个细节小结
Jan 30 #Javascript
面向对象的Javascript之三(封装和信息隐藏)
Jan 27 #Javascript
You might like
php获取mysql版本的几种方法小结
2008/03/25 PHP
php小经验:解析preg_match与preg_match_all 函数
2013/06/29 PHP
php数组转换js数组操作及json_encode的用法详解
2013/10/26 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
java script编程起步(第三课)
2007/01/10 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
2017/07/05 jQuery
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
vue实现文章内容过长点击阅读全文功能的实例
2017/12/28 Javascript
详解vuex commit保存数据技巧
2018/12/25 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
2020/09/04 Javascript
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
pycharm 使用心得(五)断点调试
2014/06/06 Python
Python中关于字符串对象的一些基础知识
2015/04/08 Python
Python计算三维矢量幅度的方法
2015/06/15 Python
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
详解supervisor使用教程
2017/11/21 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
Django实现跨域请求过程详解
2019/07/25 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
C语言编程练习
2012/04/02 面试题
蔬菜基地的创业计划书
2014/01/06 职场文书
客户接待方案
2014/02/26 职场文书
学校安全生产承诺书
2014/05/23 职场文书
简易离婚协议书范本
2014/10/24 职场文书
2015年个人审计工作总结
2015/04/07 职场文书
机修车间主任岗位职责
2015/04/08 职场文书
2015年基层党支部工作总结
2015/05/21 职场文书
团队执行力培训心得体会
2015/08/15 职场文书
《最后一头战象》教学反思
2016/02/16 职场文书
市直属机关2016年主题党日活动总结
2016/04/05 职场文书
详解MySQL事务的隔离级别与MVCC
2021/04/22 MySQL