详解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 oop开发滑动(slide)菜单控件
Aug 25 Javascript
基于jQuery实现模拟页面加载进度条
Apr 01 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
May 27 Javascript
node.js中使用q.js实现api的promise化
Sep 17 Javascript
Json解析的方法小结
Jun 22 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
Angular2里获取(input file)上传文件的内容的方法
Sep 05 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
解决Layui中layer报错的问题
Sep 03 Javascript
layui 解决富文本框form表单提交为空的问题
Oct 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
建立文件交换功能的脚本(三)
2006/10/09 PHP
PHP网站安装程序制作的原理、步骤、注意事项和示例代码
2010/08/01 PHP
ThinkPHP模板判断输出Defined标签用法详解
2014/06/30 PHP
PHP进阶学习之命名空间基本用法分析
2019/06/18 PHP
js 判断上传文件大小及格式代码
2013/11/13 Javascript
Javascript闭包(Closure)详解
2015/05/05 Javascript
Nginx上传文件全部缓存解决方案
2015/08/17 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
2016/09/27 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
2016/11/07 Javascript
Bootstrap表单简单实现代码
2017/03/06 Javascript
详解nodejs中的process进程
2017/03/19 NodeJs
VUE重点问题总结
2018/03/19 Javascript
vue源码学习之Object.defineProperty 对数组监听
2018/05/30 Javascript
jQuery选择器之层次选择器用法实例分析
2019/02/19 jQuery
小程序实现图片预览裁剪插件
2019/11/22 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
使用Element的InfiniteScroll 无限滚动组件报错的解决
2020/07/27 Javascript
[49:20]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
python使用正则表达式分析网页中的图片并进行替换的方法
2015/03/26 Python
对pandas中两种数据类型Series和DataFrame的区别详解
2018/11/12 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
使用Keras画神经网络准确性图教程
2020/06/15 Python
python中编写函数并调用的知识点总结
2021/01/13 Python
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
2014/05/08 HTML / CSS
HTML5 创建canvas元素示例代码
2014/06/04 HTML / CSS
英国第一的滑雪服装和装备零售商:Snow+Rock
2020/02/01 全球购物
斯福泰克软件测试面试题
2015/02/16 面试题
毕业生自荐书
2013/12/18 职场文书
初中英语教学反思
2014/01/25 职场文书
领导党性分析材料
2014/02/15 职场文书
公司会议开幕词
2015/01/29 职场文书
导游词之五台山
2019/10/11 职场文书
python中print格式化输出的问题
2021/04/16 Python
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python
【2·13】一图读懂中国无线电发展
2022/02/18 无线电