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 document.referrer判断访客来源网址
May 15 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
Jun 16 Javascript
JavaScript中的类数组对象介绍
Dec 30 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
May 06 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
Oct 26 Javascript
老生常谈原生JS执行环境与作用域
Nov 22 Javascript
vue.js 上传图片实例代码
Jun 22 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
Jul 27 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
Jul 09 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
May 12 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
Jul 16 Javascript
微信小程序事件 bindtap bindinput代码实例
Aug 26 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过滤html中的其他网站链接的方法(域名白名单功能)
2014/04/24 PHP
php中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
JS中confirm,alert,prompt函数区别分析
2011/01/17 Javascript
浅谈JavaScript编程语言的编码规范
2011/10/21 Javascript
js新闻滚动 js如何实现新闻滚动效果
2013/01/07 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
JavaScript数据类型学习笔记分享
2016/09/01 Javascript
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
React之PureComponent的使用作用
2018/07/10 Javascript
Vue动态创建注册component的实例代码
2019/06/14 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
vue使用i18n实现国际化的方法详解
2019/09/05 Javascript
解决在layer.open中使用时间控件laydate失败的问题
2019/09/11 Javascript
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
Python星号*与**用法分析
2018/02/02 Python
Python 新建文件夹与复制文件夹内所有内容的方法
2018/10/27 Python
Python 使用folium绘制leaflet地图的实现方法
2019/07/05 Python
详解Python3迁移接口变化采坑记
2019/10/11 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
PyQt5 控件字体样式等设置的实现
2020/05/13 Python
如何快速一次性卸载所有python包(第三方库)呢
2020/10/20 Python
HTML5如何使用SVG的方法示例
2019/01/11 HTML / CSS
铭宣海淘转运:美国、日本、英国转运等全球转运公司
2019/09/10 全球购物
Bonprix法国:时尚、鞋子、家居
2020/12/29 全球购物
旅游业大学生创业计划书
2014/01/31 职场文书
班风口号
2014/06/18 职场文书
淘宝客服工作职责
2014/07/11 职场文书
解除租房协议书
2014/12/03 职场文书
食品药品安全责任书
2015/05/11 职场文书
将Python代码打包成.exe可执行文件的完整步骤
2021/05/12 Python
MySQL 不等于的三种使用及区别
2021/06/03 MySQL
利用Python第三方库实现预测NBA比赛结果
2021/06/21 Python
Python创建SQL数据库流程逐步讲解
2022/09/23 Python