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 相关文章推荐
URL编码转换,escape() encodeURI() encodeURIComponent()
Dec 27 Javascript
Javascript MVC框架Backbone.js详解
Sep 18 Javascript
window.location.reload 刷新使用分析(去对话框)
Nov 11 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
Jan 10 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
Mar 30 Javascript
vue获取dom元素注意事项
Dec 28 Javascript
ES6下子组件调用父组件的方法(推荐)
Feb 23 Javascript
微信小程序自定义导航栏
Dec 31 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
Oct 25 Javascript
js实现上下左右键盘控制div移动
Jan 16 Javascript
微信小程序以ssm做后台开发的实现示例
Apr 08 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 作用域解析运算符(::)
2010/07/27 PHP
php header Content-Type类型小结
2011/07/03 PHP
深入PHP empty(),isset(),is_null()的实例测试详解
2013/06/06 PHP
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
PHP中substr()与explode()函数用法分析
2014/11/24 PHP
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
jQuery中bind与live的用法及区别小结
2014/01/27 Javascript
JQuery调用绑定click事件的3种写法
2015/03/28 Javascript
jquery中实现时间戳与日期相互转换
2016/04/12 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
详解jQuery中ajax.load()方法
2017/01/25 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
2017/03/19 Javascript
老生常谈js中的MVC
2017/07/25 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
为什么要使用Vuex的介绍
2019/01/19 Javascript
解决vue自定义指令导致的内存泄漏问题
2020/08/04 Javascript
JavaScript中变量提升和函数提升的详解
2020/08/07 Javascript
JS实现放大镜效果
2020/09/21 Javascript
Vue实现菜单切换功能
2020/11/08 Javascript
Python简单日志处理类分享
2015/02/14 Python
用Python实现筛选文件脚本的方法
2018/10/27 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
python retrying模块的使用方法详解
2019/09/25 Python
用python中的matplotlib绘制方程图像代码
2019/11/21 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
Python爬虫实例——scrapy框架爬取拉勾网招聘信息
2020/07/14 Python
深入浅析HTML5中的SVG
2015/11/27 HTML / CSS
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
歌唱比赛获奖感言
2014/01/21 职场文书
《春雨》教学反思
2014/04/24 职场文书
营业用房租赁协议书
2014/11/26 职场文书
给客户的检讨书
2014/12/21 职场文书
争先创优个人总结
2015/03/04 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书