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 相关文章推荐
jquery 学习之二 属性(类)
Nov 25 Javascript
js全屏显示显示代码的三种方法
Nov 11 Javascript
Jquery AJAX POST与GET之间的区别
Nov 14 Javascript
javascript实现很浪漫的气泡冒出特效
Sep 05 Javascript
JS实现图片放大缩小的方法
Feb 15 Javascript
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
jQuery 表单序列化实例代码
Jun 11 jQuery
Angular项目从新建、打包到nginx部署全过程记录
Dec 09 Javascript
JS实现select选中option触发事件操作示例
Jul 13 Javascript
JavaScript创建对象的四种常用模式实例分析
Jan 11 Javascript
详解vue 命名视图
Aug 14 Javascript
Vue extend的基本用法(实例详解)
Dec 09 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教程之phpize使用方法
2014/02/12 PHP
php数组编码转换示例详解
2014/03/11 PHP
PHP数组遍历知识汇总(包含遍历方法、数组指针操作函数、数组遍历测速)
2014/07/05 PHP
PHP中cookie和session的区别实例分析
2014/08/28 PHP
ThinkPHP V2.2说明文档没有说明的那些事实例小结
2015/07/01 PHP
PHP处理数组和XML之间的互相转换
2016/06/02 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
jquery选择器的选择使用及性能介绍
2013/01/16 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
2015/06/25 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
AngularJS 基础ng-class-even指令用法
2016/08/01 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
基于Bootstrap框架实现图片切换
2017/03/10 Javascript
微信小程序实现带刻度尺滑块功能
2017/03/29 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
2017/10/26 jQuery
实时监控input框,实现输入框与下拉框联动的实例
2018/01/23 Javascript
微信小程序前端自定义分享的实现方法
2019/06/13 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
js对象数组和对象的使用实例详解
2019/08/27 Javascript
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
[06:16]《DAC最前线》之地区预选赛全面回顾
2015/01/19 DOTA
Python入门_浅谈数据结构的4种基本类型
2017/05/16 Python
使用虚拟环境打包python为exe 文件的方法
2019/08/29 Python
修改Pandas的行或列的名字(重命名)
2019/12/18 Python
Python利用matplotlib绘制折线图的新手教程
2020/11/05 Python
python 自定义异常和主动抛出异常(raise)的操作
2020/12/11 Python
CSS3实现多背景模拟动态边框的效果
2016/11/08 HTML / CSS
使用HTML5做的导航条详细步骤
2020/10/19 HTML / CSS
如何用PHP实现邮件发送
2012/12/26 面试题
员工评语大全
2014/01/19 职场文书
网页美工求职信范文
2014/04/17 职场文书
导师工作推荐信范文
2014/05/17 职场文书
三严三实·严以用权心得体会
2016/01/12 职场文书
tomcat正常启动但网页却无法访问的几种解决方法
2022/05/06 Servers