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 相关文章推荐
ExtJs事件机制基本代码模型和流程解析
Oct 24 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
Jan 12 Javascript
javascript 数组的正态分布排序的问题
Jul 31 Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 Javascript
javascript中Date对象的使用总结
Nov 21 Javascript
JS新包管理工具yarn和npm的对比与使用入门
Dec 09 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
Sep 14 Javascript
webpack打包并将文件加载到指定的位置方法
Feb 22 Javascript
Vuex的初探与实战小结
Nov 26 Javascript
Vue父组件如何获取子组件中的变量
Jul 24 Javascript
vue使用Google Recaptcha验证的实现示例
Aug 23 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
珊瑚虫IP库浅析
2007/02/15 PHP
PHP 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
php 删除一个数组中的某个值.兼容多维数组!
2012/02/18 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
PHP中iconv函数知识汇总
2015/07/02 PHP
JQuery分别取得每行最后一列和最后一行的示例代码
2013/08/18 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
JavaScript中的prototype原型学习指南
2016/05/09 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
vue 父组件调用子组件方法及事件
2018/03/29 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
2019/05/13 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
python实现根据主机名字获得所有ip地址的方法
2015/06/28 Python
在Python中使用正则表达式的方法
2015/08/13 Python
使用Python操作MySQL的一些基本方法
2015/08/16 Python
python pandas dataframe 按列或者按行合并的方法
2018/04/12 Python
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
快速排序的四种python实现(推荐)
2019/04/03 Python
使用python爬取抖音视频列表信息
2019/07/15 Python
pytorch-神经网络拟合曲线实例
2020/01/15 Python
谈谈Python:为什么类中的私有属性可以在外部赋值并访问
2020/03/05 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
瑰珀翠美国官网:Crabtree & Evelyn美国
2016/11/29 全球购物
世界上最大的专业美容用品零售商:Sally Beauty
2017/07/02 全球购物
北京鼎普科技股份有限公司软件测试面试题
2012/04/07 面试题
公司离职证明范本
2014/01/13 职场文书
大学军训感言400字
2014/03/11 职场文书
法学求职信
2014/06/22 职场文书
学校工作推荐信范文
2014/07/11 职场文书
员工生日活动方案
2014/08/24 职场文书
专业技术职务聘任证明
2015/03/02 职场文书
2015年社区国庆节活动总结
2015/07/30 职场文书
神州牡丹园的导游词
2019/11/20 职场文书
CDPR谈《巫师》新作用虚幻5原因 称不会为Epic独占
2022/04/06 其他游戏