详解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 相关文章推荐
jquery动态添加删除div 具体实现
Jul 20 Javascript
JavaScript中奇葩的假值示例应用
Mar 11 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
Apr 14 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
Mar 26 Javascript
JavaScript iframe数据共享接口实现方法
Jan 06 Javascript
js中的关联数组与普通数组详解
Jul 27 Javascript
JS实现两周内自动登录功能
Mar 23 Javascript
angularjs中使用ng-bind-html和ng-include的实例
Apr 28 Javascript
layui中layer前端组件实现图片显示功能的方法分析
Oct 13 Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
layer.open 获取不到表单信息的解决方法
Sep 26 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查询MySQL大量数据的时候内存占用分析
2011/07/22 PHP
PHP 文本文章分页代码 按标记或长度(不涉及数据库)
2012/06/07 PHP
PHP+JS实现的商品秒杀倒计时用法示例
2016/11/15 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
use jscript Create a SQL Server database
2007/06/16 Javascript
jquery 操作日期、星期、元素的追加的实现代码
2012/02/07 Javascript
node.js中的fs.realpathSync方法使用说明
2014/12/16 Javascript
JavaScript修改浏览器tab标题小技巧
2015/01/06 Javascript
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
详谈$.data()的用法和作用
2017/02/13 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
2018/03/09 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
2019/01/29 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
2019/03/29 Javascript
Vue源码分析之Vue实例初始化详解
2019/08/25 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
2020/08/21 Javascript
[02:03]DOTA2亚洲邀请赛 HGT战队出场宣传片
2015/02/07 DOTA
[37:29]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.19
2020/11/19 DOTA
关于Python如何避免循环导入问题详解
2017/09/14 Python
pandas 对series和dataframe进行排序的实例
2018/06/09 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
OpenCV+python手势识别框架和实例讲解
2018/08/03 Python
解决pycharm运行出错,代码正确结果不显示的问题
2018/11/30 Python
python:按行读入,排序然后输出的方法
2019/07/20 Python
python递归下载文件夹下所有文件
2019/08/31 Python
英国布鲁姆精品店:Bloom Boutique
2018/03/01 全球购物
英国玛莎百货澳大利亚:Marks & Spencer Australia
2019/08/30 全球购物
手工制作的意大利皮革运动鞋:KOIO
2020/01/05 全球购物
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
党的群众路线教育实践活动批评与自我批评
2014/02/16 职场文书
公务员中国梦演讲稿
2014/08/19 职场文书
财政局党的群众路线教育实践活动整改方案
2014/09/21 职场文书
2015年国庆节活动总结
2015/03/23 职场文书
如何vue使用el-table遍历循环表头和表体数据
2022/04/26 Vue.js