详解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 函数使用说明
Apr 07 Javascript
jquery获得页面元素的坐标值实现思路及代码
Apr 15 Javascript
js实现局部页面打印预览原理及示例代码
Jul 03 Javascript
js跨域问题浅析及解决方法优缺点对比
Nov 08 Javascript
JavaScript取得键盘按下方向键是哪个的方法
Aug 04 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
Bootstrap每天必学之导航条(二)
Mar 01 Javascript
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
js 获取元素的具体样式信息getcss(实例讲解)
Jul 05 Javascript
详解用async/await来处理异步
Aug 28 Javascript
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
游戏开发中如何使用CocosCreator进行音效处理
Apr 14 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
AJAX for PHP简单表数据查询实例
2007/01/02 PHP
PHP提示Notice: Undefined variable的解决办法
2012/11/24 PHP
使用php+apc实现上传进度条且在IE7下不显示的问题解决方法
2013/04/25 PHP
免费手机号码归属地API查询接口和PHP使用实例分享
2014/04/10 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
js获取单选按钮的数据
2006/11/27 Javascript
用于自动添加Digg This!按钮的JavaScript
2006/12/23 Javascript
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
javascript使用定时函数实现跳转到某个页面
2013/12/25 Javascript
在JavaScript中正确引用bind方法的应用
2015/05/11 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
2015/07/01 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
微信小程序实现横向增长表格的方法
2018/07/24 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
vue将后台数据时间戳转换成日期格式
2019/07/31 Javascript
JavaScript之Blob对象类型的具体使用方法
2019/11/29 Javascript
基于javascript原生判断DOM是否加载完毕
2020/10/14 Javascript
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
详解python深浅拷贝区别
2019/06/24 Python
PyTorch: 梯度下降及反向传播的实例详解
2019/08/20 Python
TUMI马来西亚官方网站:国际领先的高品质商旅箱包品牌
2018/04/26 全球购物
Peter Millar官网:美国高档生活服饰品牌
2018/07/02 全球购物
iHerb中文官网:维生素、保健品和健康产品
2018/11/01 全球购物
在C中是否有模拟继承等面向对象程序设计特性的好方法
2012/05/22 面试题
小学生演讲稿
2014/01/12 职场文书
优秀部门获奖感言
2014/02/14 职场文书
年终总结会主持词
2014/03/25 职场文书
班级旅游计划书
2014/05/03 职场文书
详解Laravel服务容器的优势
2021/05/29 PHP
javascript中Set、Map、WeakSet、WeakMap区别
2022/12/24 Javascript