详解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 相关文章推荐
9个JavaScript评级/投票插件
Jan 18 Javascript
浅谈JavaScript函数参数的可修改性问题
Dec 05 Javascript
fastclick插件导致日期(input[type="date"])控件无法被触发该如何解决
Nov 09 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
Aug 02 Javascript
ES6记录异步函数的执行时间详解
Aug 31 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
Dec 12 Javascript
Node.JS利用PhantomJs抓取网页入门教程
May 19 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
Jun 12 Javascript
Vue仿今日头条实例详解
Feb 06 Javascript
node.js爬取中关村的在线电瓶车信息
Nov 13 Javascript
详解Vue 换肤方案验证
Aug 28 Javascript
使用TS来编写express服务器的方法步骤
Oct 29 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批量检测并去除文件BOM头代码实例
2014/05/08 PHP
js类型检查实现代码
2010/10/29 Javascript
jquery封装的对话框简单实现
2013/07/21 Javascript
浅析javascript 定时器
2014/12/23 Javascript
JS实现文字掉落效果的方法
2015/05/06 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
JS实现网站菜单拖拽移位效果的方法
2015/09/24 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
2020/08/27 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
Highcharts入门之基本属性
2016/08/02 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
2016/11/04 Javascript
JavaScript实现格式化字符串函数String.format
2016/12/16 Javascript
angularjs中的$eval方法详解
2017/04/24 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
React中如何引入Angular组件详解
2018/08/09 Javascript
Vue实现随机验证码功能
2020/12/29 Vue.js
JS实现百度搜索框
2021/02/25 Javascript
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
pygame学习笔记(4):声音控制
2015/04/15 Python
Python中time模块和datetime模块的用法示例
2016/02/28 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
Python批处理更改文件名os.rename的方法
2018/10/26 Python
OpenCV4.1.0+VS2017环境配置的方法步骤
2020/07/09 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
is_file和file_exists效率比较
2021/03/14 PHP
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
轻金属冶金专业毕业生自荐信
2013/11/02 职场文书
电子邮箱格式怎么写
2014/01/12 职场文书
新闻专业学生的自我评价
2014/02/13 职场文书
怀念母亲教学反思
2014/04/28 职场文书
三年级班级文化建设方案
2014/05/04 职场文书
总经理任命书范本
2014/06/05 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书
delete in子查询不走索引问题分析
2022/07/07 MySQL