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窗口功能指南之在窗口中书写内容
Jul 21 Javascript
鼠标经过显示二级菜单js特效
Aug 13 Javascript
js判断60秒以及倒计时示例代码
Jan 24 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
Jul 27 Javascript
Jquery promise实现一张一张加载图片
Nov 13 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 Javascript
jQuery 全选 全不选 事件绑定的实现代码
Jan 23 Javascript
React学习笔记之事件处理(二)
Jul 02 Javascript
node中使用es5/6以及支持性与性能对比
Aug 11 Javascript
angularJs select绑定的model取不到值的解决方法
Oct 08 Javascript
微信小程序实现多选删除列表数据功能示例
Jan 15 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
Jan 25 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
PHP自带函数给数字或字符串自动补齐位数
2014/07/29 PHP
php简单实现快速排序的方法
2015/04/04 PHP
php动态绑定变量的用法
2015/06/16 PHP
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
再谈javascript 动态添加样式规则 W3C校检
2009/12/25 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
2013/04/17 Javascript
深入探究使JavaScript动画流畅的一些方法
2015/06/30 Javascript
基于jQuery实现动态搜索显示功能
2016/05/05 Javascript
快速掌握jQuery插件WebUploader文件上传
2016/11/07 Javascript
bootstrap PrintThis打印插件使用详解
2017/02/20 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
requireJS模块化实现返回顶部功能的方法详解
2017/10/16 Javascript
详解AngularJS之$window窗口对象
2018/01/17 Javascript
Javascript 实现 Excel 导入生成图表功能
2018/10/22 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
详解Vue依赖收集引发的问题
2019/04/22 Javascript
用jQuery实现抽奖程序
2020/04/12 jQuery
jQuery实现开关灯效果
2020/08/02 jQuery
python通过装饰器检查函数参数数据类型的方法
2015/03/13 Python
Python中property属性实例解析
2018/02/10 Python
python实现归并排序算法
2018/11/22 Python
浅谈pycharm的xmx和xms设置方法
2018/12/03 Python
基于Django静态资源部署404的解决方法
2019/07/28 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
PyCharm设置Ipython交互环境和宏快捷键进行数据分析图文详解
2020/04/23 Python
python实现数字炸弹游戏
2020/07/17 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
Araks官网:纽约内衣品牌
2020/10/15 全球购物
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
幼儿园儿童节主持词
2014/03/21 职场文书
诚信承诺书模板
2014/05/26 职场文书
标准离婚协议书范文下载
2014/11/30 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
python 详解turtle画爱心代码
2022/02/15 Python