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 相关文章推荐
javascript 自动填写表单的实现方法
Apr 09 Javascript
js导出格式化的excel 实例方法
Jul 17 Javascript
css结合js制作下拉菜单示例代码
Feb 27 Javascript
Javascript实现鼠标右键特色菜单
Aug 04 Javascript
完善的jquery处理机制
Feb 21 Javascript
利用JavaScript实现拖拽改变元素大小
Dec 14 Javascript
原生javascript实现图片放大镜效果
Jan 18 Javascript
微信小程序实战之自定义抽屉菜单(7)
Apr 18 Javascript
JavaScript中document.referrer的用法详解
Jul 04 Javascript
Angular 2父子组件之间共享服务通信的实现
Jul 04 Javascript
JS获取当前时间戳方法解析
Aug 29 Javascript
JS实现点击掉落特效
Jan 29 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 解决utf-8和gb2312编码转换问题
2010/03/18 PHP
php判断终端是手机还是电脑访问网站的思路及代码
2013/04/24 PHP
简单实用的网站PHP缓存类实例
2014/07/18 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
PHP封装的MSSql操作类完整实例
2016/05/26 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
JQUBAR1.1 jQuery 柱状图插件发布
2010/11/28 Javascript
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
js的表单操作 简单计算器
2011/12/29 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
2016/08/02 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
JS中如何实现复选框全选功能
2016/12/19 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
Angular实现表单验证功能
2017/11/13 Javascript
JS中精巧的自动柯里化实现方法
2017/12/12 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
2018/01/12 Javascript
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
浅谈小程序 setData学问多
2019/02/20 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
js实现整体缩放页面适配移动端
2020/03/31 Javascript
[43:14]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
python文件读写操作与linux shell变量命令交互执行的方法
2015/01/14 Python
Python爬虫的两套解析方法和四种爬虫实现过程
2018/07/20 Python
Python如何读取文件中图片格式
2020/01/13 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
Keras设置以及获取权重的实现
2020/06/19 Python
英国领先的野生鸟类食品供应商:GardenBird
2018/08/09 全球购物
Piercing Pagoda官网:耳环、戒指、项链、手链等
2020/09/28 全球购物
大学毕业登记表自我鉴定
2013/10/09 职场文书
《与象共舞》教学反思
2014/02/24 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
法人代表资格证明书
2015/06/18 职场文书
吃通javascript正则表达式
2021/04/21 Javascript