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 相关文章推荐
JS对象与json字符串格式转换实例
Oct 28 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
Feb 02 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
May 16 Javascript
Angularjs---项目搭建图文教程
Jul 08 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
Aug 25 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
Jun 26 Javascript
javascript cookie的基本操作(添加和删除)
Jul 24 Javascript
基于AngularJS实现表单验证功能
Jul 28 Javascript
简述JS控制台的使用
Jul 15 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
Jul 27 Javascript
vuejs前后端数据交互之从后端请求数据的实例
Aug 11 Javascript
node使用request请求的方法
Dec 20 Javascript
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
咖啡机如何保养和日常清洁?
2021/03/03 冲泡冲煮
一个简单的域名注册情况查询程序
2006/10/09 PHP
第八节--访问方式
2006/11/16 PHP
备份mysql数据库的php代码(一个表一个文件)
2010/05/28 PHP
php下使用strpos需要注意 === 运算符
2010/07/17 PHP
ThinkPHP控制器间实现相互调用的方法
2014/10/31 PHP
PHP API接口必备之输出json格式数据示例代码
2017/06/27 PHP
在浏览器窗口上添加遮罩层的方法
2012/11/12 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
详解Bootstrap插件
2016/04/25 Javascript
javascript实现的猜数小游戏完整实例代码
2016/05/10 Javascript
JavaScript蒙板(model)功能的简单实现代码
2016/08/04 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
2018/02/08 Javascript
jQuery获取随机颜色的实例代码
2018/05/21 jQuery
微信小程序:数据存储、传值、取值详解
2019/05/07 Javascript
[53:21]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-CDEC
2014/05/22 DOTA
python2与python3共存问题的解决方法
2018/09/18 Python
python通过txt文件批量安装依赖包的实现步骤
2019/08/13 Python
浅析Python数字类型和字符串类型的内置方法
2019/12/22 Python
详解Flask前后端分离项目案例
2020/07/24 Python
CSS3——齿轮转动关键代码
2013/05/02 HTML / CSS
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
成教自我鉴定
2013/10/27 职场文书
大学生文员专业个人求职信范文
2014/01/05 职场文书
学习十八大报告感言
2014/02/04 职场文书
小学教师先进事迹材料
2014/12/15 职场文书
三国演义读书笔记
2015/06/25 职场文书
观看禁毒宣传片后的感想
2015/08/11 职场文书
怎样写好工作计划
2019/04/10 职场文书
Nginx缓存设置案例详解
2021/09/15 Servers
win10蓝屏0xc0000001安全模式进不了怎么办?win10出现0xc0000001的解决方法
2022/08/05 数码科技