详解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)附详细说明
May 25 Javascript
JS页面延迟执行一些方法(整理)
Nov 11 Javascript
jquery 根据name名获取元素的value值
Feb 27 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
Aug 24 Javascript
JS+CSS实现的经典tab选项卡效果代码
Sep 16 Javascript
Node.js操作mysql数据库增删改查
Mar 30 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
Oct 10 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
Dec 02 Javascript
JS获取填报扩展单元格控件的值的解决办法
Jul 14 Javascript
JavaScript实现图片拖曳效果
Sep 08 Javascript
基于layPage插件实现两种分页方式浅析
Jul 27 Javascript
微信小程序自定义联系人弹窗
May 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生成html分页列表的代码
2007/03/18 PHP
php入门小知识
2008/03/24 PHP
PHP5与MySQL数据库操作常用代码 收集
2010/03/21 PHP
PHP APC的安装与使用详解
2013/06/13 PHP
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
百度工程师讲PHP函数的实现原理及性能分析(一)
2015/05/13 PHP
Thinkphp实现自动验证和自动完成
2015/12/19 PHP
PHP的邮件群发系统phplist配置方法详细总结
2016/03/30 PHP
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
jQuery如何使用自动触发事件trigger
2015/11/29 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
2016/03/06 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
2017/05/12 Javascript
浅析Javascript中双等号(==)隐性转换机制
2017/10/27 Javascript
angular中ui calendar的一些使用心得(推荐)
2017/11/03 Javascript
JavaScript满天星导航栏实现方法
2018/03/08 Javascript
浅谈React 服务器端渲染的使用
2018/05/08 Javascript
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
详解element-ui中el-select的默认选择项问题
2019/08/02 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
python封装对象实现时间效果
2020/04/23 Python
Python机器学习之K-Means聚类实现详解
2018/02/22 Python
python实战教程之自动扫雷
2018/07/13 Python
老生常谈python中的重载
2018/11/11 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
Django 静态文件配置过程详解
2019/07/23 Python
Python3离线安装Requests模块问题
2019/10/13 Python
python3:excel操作之读取数据并返回字典 + 写入的案例
2020/09/01 Python
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
智能家居、吸尘器、滑板车、电动自行车网上购物:Geekmaxi
2021/01/18 全球购物
个人查摆剖析材料
2014/02/04 职场文书
运动会广播稿150字
2014/02/19 职场文书
士力架广告词
2014/03/20 职场文书