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 相关文章推荐
理解Javascript_07_理解instanceof实现原理
Oct 15 Javascript
根据json字符串生成Html的一种方式
Jan 09 Javascript
js获取url参数值的两种方式
Sep 10 Javascript
浅析document.ready和window.onload的区别讲解
Dec 18 Javascript
Angularjs CURD 详解及实例代码
Sep 14 Javascript
JS实现简单的二元方程计算器功能示例
Jan 03 Javascript
vue父子组件的嵌套的示例代码
Sep 08 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
Sep 26 Javascript
深入剖析Express cookie-parser中间件实现示例
Feb 01 Javascript
React中嵌套组件与被嵌套组件的通信过程
Jul 11 Javascript
JavaScript单线程和任务队列原理解析
Feb 04 Javascript
vue封装数字翻牌器
Apr 20 Vue.js
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目录拷贝实现方法
2015/07/10 PHP
PHP7如何开启Opcode打造强悍性能详解
2018/05/11 PHP
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
2011/03/28 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
2012/12/09 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
2013/04/19 Javascript
Javascript中设置默认参数值示例
2014/09/11 Javascript
jquery 中ajax执行的优先级
2015/06/22 Javascript
JavaScript获取浏览器信息的方法
2015/11/20 Javascript
基于jQuery仿淘宝产品图片放大镜特效
2020/10/19 Javascript
js实现带农历和八字等信息的日历特效
2016/05/16 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
2016/05/31 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
2017/06/26 Javascript
vue-cli随机生成port源码的方法
2019/09/02 Javascript
在Python中使用Mako模版库的简单教程
2015/04/08 Python
Python进阶学习之特殊方法实例详析
2017/12/01 Python
对python中字典keys,values,items的使用详解
2019/02/03 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
Python 如何创建一个线程池
2020/07/28 Python
HTML5中indexedDB 数据库的使用实例
2017/05/11 HTML / CSS
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
求职自荐信格式
2013/12/04 职场文书
军训自我鉴定范文
2014/02/13 职场文书
电焊工岗位职责
2014/03/06 职场文书
党员先进性教育整改措施
2014/09/18 职场文书
机关领导干部作风整顿整改措施
2014/09/19 职场文书
四风剖析查摆对照检查材料思想汇报
2014/09/24 职场文书
现役军人家属慰问信
2015/03/24 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
2015年会计年终工作总结
2015/05/26 职场文书
导游词之吉林花园山
2019/10/17 职场文书
Win10此设备不支持接收Miracast无法投影的解决方法
2022/07/07 数码科技