详解jQuery插件开发中的extend方法


Posted in Javascript onNovember 19, 2013

Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,
dest是要整合的空间可以使{} 或者不写

src是一个JSON表达式表示的javascript对象.... 因此里面可以添加方法属性等等...

我么通过不同的应用可以将我们自己的方法整合到jQuery空间中....实现插件开发

在jQuery中定义  jQuery.extend = jQuery.fn.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对JSON进行模式匹配(Part 1-设计)
Jul 17 Javascript
JavaScript isArray()函数判断对象类型的种种方法
Oct 11 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 Javascript
vue图片加载与显示默认图片实例代码
Mar 16 Javascript
jqueryUI tab标签页代码分享
Oct 09 jQuery
详解为生产环境编译Angular2应用的方法
Dec 10 Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 Javascript
vue自动化路由的实现代码
Sep 30 Javascript
js实现的在本地预览图片功能示例
Nov 09 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 Javascript
5分钟快速看懂ES6中的反射与代理
Dec 19 Javascript
浅谈Vue static 静态资源路径 和 style问题
Nov 07 Javascript
Js 导出table内容到Excel的简单实例
Nov 19 #Javascript
js文本框输入点回车触发确定兼容IE、FF等
Nov 19 #Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
Nov 19 #Javascript
JS注释所产生的bug 即使注释也会执行
Nov 19 #Javascript
js计算两个时间之间天数差的实例代码
Nov 19 #Javascript
JS获取当前网址、主机地址项目根路径
Nov 19 #Javascript
jquery ajax 简单范例(界面+后台)
Nov 19 #Javascript
You might like
php array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
如何使用GDB调试PHP程序
2015/12/08 PHP
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
JS加ASP二级域名转向的代码
2007/05/17 Javascript
javascript同步Import,同步调用外部js的方法
2008/07/08 Javascript
将list转换为json失败的原因
2013/12/17 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
2014/03/06 Javascript
Javascript中的delete操作符详细介绍
2014/06/06 Javascript
js用typeof方法判断undefined类型
2014/07/15 Javascript
jQuery中ajax和post处理json的不同示例对比
2014/11/02 Javascript
轻松创建nodejs服务器(9):实现非阻塞操作
2014/12/18 NodeJs
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
JavaScript中String.match()方法的使用详解
2015/06/06 Javascript
如何实现JavaScript动态加载CSS和JS文件
2020/12/28 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
vue判断input输入内容全是空格的方法
2018/03/02 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
2018/07/23 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
2020/05/18 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
Python  __getattr__与__setattr__使用方法
2008/09/06 Python
Python之eval()函数危险性浅析
2014/07/03 Python
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
基于Python的关键字监控及告警
2017/07/06 Python
学习Python列表的基础知识汇总
2020/03/10 Python
浅谈移动端网页图片预加载方案
2018/11/05 HTML / CSS
红旗方阵解说词
2014/02/12 职场文书
财务负责人任命书
2014/06/06 职场文书
学习礼仪心得体会
2014/09/01 职场文书
入党函调证明材料
2014/12/24 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书
导游词之沈阳清昭陵
2019/12/28 职场文书
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL
MySQL读取JSON转换的方式
2022/03/18 MySQL
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL