详解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 相关文章推荐
JS版网站风格切换实例代码
Oct 06 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
Oct 21 Javascript
jQuery中scrollTop()方法用法实例
Jan 16 Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 Javascript
Angular.js回顾ng-app和ng-model使用技巧
Apr 26 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
May 31 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
Jun 07 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
Aug 18 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 Javascript
vue刷新和tab切换实例
Feb 11 Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 Javascript
vue修改Element的el-table样式的4种方法
Sep 17 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实现将GB编码转换为UTF8
2006/11/25 PHP
php读取html并截取字符串的简单代码
2009/11/30 PHP
php ios推送(代码)
2013/07/01 PHP
Php-Redis安装测试笔记
2015/03/05 PHP
php写app接口并返回json数据的实例(分享)
2017/05/20 PHP
JavaScript 轻松搞定快捷留言功能 只需一行代码
2010/04/01 Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
2010/04/23 Javascript
jquery更换文章内容与改变字体大小代码
2013/09/30 Javascript
JSON格式化输出
2014/11/10 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
2015/03/27 Javascript
JavaScript  cookie 跨域访问之广告推广
2016/04/20 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
详解vue的数据劫持以及操作数组的坑
2019/04/18 Javascript
浅谈webpack 四个核心概念之Entry
2019/06/12 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
python函数缺省值与引用学习笔记分享
2013/02/10 Python
Python中return语句用法实例分析
2015/08/04 Python
windows系统下Python环境搭建教程
2017/03/28 Python
Python基于matplotlib画箱体图检验异常值操作示例【附xls数据文件下载】
2019/01/07 Python
在Django的View中使用asyncio的方法
2019/07/12 Python
Django 创建新App及其常用命令的实现方法
2019/08/04 Python
如何在django中运行scrapy框架
2020/04/22 Python
详解Django中的FBV和CBV对比分析
2021/03/01 Python
世界上最受欢迎的花店:1-800-Flowers.com
2020/06/01 全球购物
哪些情况下不应该使用索引
2015/07/20 面试题
安全生产目标责任书
2014/04/14 职场文书
就业协议书样本
2014/08/20 职场文书
国家助学金感谢信
2015/01/21 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
Vue图片裁剪组件实例代码
2021/07/02 Vue.js
Netty分布式客户端处理接入事件handle源码解析
2022/03/25 Java/Android
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server