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基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
Aug 05 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
javascript中的取反再取反~~没有意义
Apr 06 Javascript
jQuery实现图片预加载效果
Nov 27 Javascript
react-native-video实现视频全屏播放的方法
Mar 19 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
Sep 03 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
May 28 Javascript
详解Node.js异步处理的各种写法
Jun 09 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
Sep 03 Javascript
Vue实现导航栏的显示开关控制
Nov 01 Javascript
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
JavaScript中10个Reduce常用场景技巧
Jun 21 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 动态多文件上传
2009/01/18 PHP
php sybase_fetch_array使用方法
2014/04/15 PHP
php事务处理实例详解
2014/07/11 PHP
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
PHP观察者模式定义与用法实例分析
2019/03/22 PHP
jQuery点击后一组图片左右滑动的实现代码
2012/08/16 Javascript
js同比例缩放图片的小例子
2013/10/30 Javascript
javascript常用代码段搜集
2014/12/04 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
2016/11/07 Javascript
Ajax的概述与实现过程
2016/11/18 Javascript
React diff算法的实现示例
2018/04/20 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
2019/02/27 Javascript
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
Python处理字符串之isspace()方法的使用
2015/05/19 Python
python机器学习之神经网络(三)
2017/12/20 Python
python 平衡二叉树实现代码示例
2018/07/07 Python
python实现创建新列表和新字典,并使元素及键值对全部变成小写
2019/01/15 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
用Cython加速Python到“起飞”(推荐)
2019/08/01 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
Python Pivot table透视表使用方法解析
2020/09/11 Python
高中生的自我鉴定范文
2014/01/24 职场文书
初级会计求职信范文
2014/02/15 职场文书
社保缴纳证明申请书
2014/11/03 职场文书
党员读书活动心得体会
2016/01/14 职场文书
巾帼建功标兵先进事迹材料
2016/02/29 职场文书
小学生优秀作文范文(六篇)
2019/07/10 职场文书
SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用
2021/06/30 SQL Server
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技