jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析


Posted in Javascript onJune 09, 2014

deep是布尔值,表示是否进行深度合并,默认是false,不执行深度合并.
通过这种方式可以在jQuery或jQuery.fn上添加新的属性和方法,jQuery的其他模块大都是这么实现的.

给jQuery添加扩展时用$.extend()
如:jQuery.extend({add:function(a,b){return a+b}})

使用:$.add(1,3)=====>4;

给jQuery实例对象添加扩展时用$.fn.extend();

$.fn.extend({gys:function(){$(this).css("color","red")}});

调用:$("div.guo").gys();

jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析

因为参数的个数是不确定的,所以没有列出可接受的具体参数.

jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析

options:指向某个源对象.
name:某个源对象的某个属性名.
src:目标对象的某个属性的原始值.
copy:某个源对象的某个属性的值
copyIsArray:指示copy是否是数组
clone:深度复制时原始值的修正值.
target:目标对象.
i:源对象的起始下标.
length:参数的个数,用于修正变量target.
deep:是否执行深度复制.

jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析

333~338:如果第一个参数是布尔值,则把target赋值给deep,target在重新获取值,把第二个参数赋给target.
这个时候i值从一开始的1变成了2.表示源对象本来是从第二个元素开始的,现在变成了第三个元素了.这段代码结合
327行代码就知道为什么会有这个if语句了.原来函数extend在执行的时候,不管参数情况如何,首先给target和i赋值.
然后再后面修正.

341~343:如果目标对象target不是对象,不是函数,则targeted={};

346~349:length和i相等时,表示没有传入objcet1,...之类的参数,
这个时候把this当前对象(jQuery或jQuery.fn)作为目标对象,在把i减一.从而使传入的对象当作源对象.

jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析

351行开始循环,i表示开始源对象的下标,是一个非常巧妙的用法.
353行也很精彩,它把获取源对象和对源对象的判断放在了一条语句中,只有源对象不为空时才会执行.
354~362行,变量src是原始值,变量copy是复制值.如果target和copy引用相同,为了遍历时死循环,
因此不会覆盖目标对象的同名属性.如果注释掉360行,下面的代码会出现异常.
var obj={};
obj.n1=obj;
$.extend(true,obj,{n2:obj});
在不同浏览器中会出项不同的报错,但是都无一例外的出现卡屏很久的现像.

365~372行,如果是深度合并,且复制copy是普通javascript对象或数组,则递归合并.
378~380行,如果不是深度合并,并且copy不是undefined,则直接覆盖目标对象的同名属性.

Javascript 相关文章推荐
url参数中有+、空格、=、%、&、#等特殊符号的问题解决
May 15 Javascript
artDialog双击会关闭对话框的修改过程分享
Aug 05 Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 Javascript
JavaScript制作的可折叠弹出式菜单示例
Apr 04 Javascript
js判断鼠标左、中、右键哪个被点击的方法
Jan 27 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
Dec 19 Javascript
Bootstrap Search Suggest使用例子
Dec 21 Javascript
Element Input组件分析小结
Oct 11 Javascript
微信小程序常用赋值方法小结
Apr 30 Javascript
js实现坦克大战游戏
Feb 24 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
js利用prototype调用Array的slice方法示例
Jun 09 #Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
Jun 09 #Javascript
用box固定长宽实现图片自动轮播js代码
Jun 09 #Javascript
jQuery实现的Div窗口震动特效
Jun 09 #Javascript
js动态创建标签示例代码
Jun 09 #Javascript
jquery中 $.expr使用实例介绍
Jun 09 #Javascript
jQuery select表单提交省市区城市三级联动核心代码
Jun 09 #Javascript
You might like
选择PHP作为网站开发语言的原因分享
2012/01/03 PHP
JoshChen_php新手进阶高手不可或缺的规范介绍
2013/08/16 PHP
php发送html格式文本邮件的方法
2015/06/10 PHP
php数组比较实现查找连续数的方法
2015/07/29 PHP
PHP实现搜索相似图片
2015/09/22 PHP
php版交通银行网银支付接口开发入门教程
2016/09/26 PHP
PHP中串行化用法示例
2016/11/16 PHP
JQuery 操作Javascript对象和数组的工具函数小结
2010/01/22 Javascript
js select常用操作控制代码
2010/03/16 Javascript
Javascript 变量作用域 两个可能会被忽略的小特性
2010/03/23 Javascript
style、 currentStyle、 runtimeStyle区别分析
2010/08/01 Javascript
javascript中的startWith和endWith的几种实现方法
2013/05/07 Javascript
jQuery实现类似淘宝购物车全选状态示例
2013/06/26 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
2014 HTML5/CSS3热门动画特效TOP10
2014/12/07 Javascript
javascript结合fileReader 实现上传图片
2015/01/30 Javascript
浅谈JavaScript的事件
2015/02/27 Javascript
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
基于JavaScript怎么实现让歌词滚动播放
2015/11/03 Javascript
浅谈javascript中的constructor
2016/06/08 Javascript
js重写方法的简单实现
2016/07/10 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
Vue-axios-post数据后端接不到问题解决
2020/01/09 Javascript
详解Python验证码识别
2016/01/25 Python
Python的log日志功能及设置方法
2019/07/11 Python
Python pandas自定义函数的使用方法示例
2019/11/20 Python
Python unittest工作原理和使用过程解析
2020/02/24 Python
在python中使用pymysql往mysql数据库中插入(insert)数据实例
2020/03/02 Python
详解Python中namedtuple的使用
2020/04/27 Python
python下载的库包存放路径
2020/07/27 Python
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
房地产销售计划书
2014/01/10 职场文书
社区党总支书记先进事迹材料
2014/01/24 职场文书
《乌塔》教学反思
2014/02/17 职场文书
Java 在生活中的 10 大应用
2021/11/02 Java/Android