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 相关文章推荐
Flash对联广告的关闭按钮讨论
Jan 30 Javascript
Javascript 面向对象之重载
May 04 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
May 05 Javascript
JavaScript中string转换成number介绍
Dec 31 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
Mar 21 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
Ionic如何实现下拉刷新与上拉加载功能
Jun 03 Javascript
AngularJS中的表单简单入门
Jul 28 Javascript
Angular resolve基础用法详解
Oct 03 Javascript
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
Aug 14 Javascript
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 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
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
mysql下创建字段并设置主键的php代码
2010/05/16 PHP
php数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值,并将指针移到下一位
2011/10/31 PHP
$_GET['goods_id']+0 的使用详解
2013/06/06 PHP
PHP获取youku视频真实flv文件地址的方法
2014/12/23 PHP
PHP生成图像验证码的方法小结(2种方法)
2016/07/18 PHP
ZendFramework框架实现连接两个或多个数据库的方法
2016/12/08 PHP
jQuery 自动增长的文本输入框实现代码
2010/04/02 Javascript
JavaScript生成GUID的多种算法小结
2013/08/18 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
详解JavaScript中的客户端消息框架设计原理
2015/06/24 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
浅谈js里面的InttoStr和StrtoInt
2016/06/14 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
Javascript实现时间倒计时效果
2017/07/15 Javascript
微信小程序dom操作的替代思路实例分析
2018/12/06 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
2019/02/01 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
2019/03/19 Javascript
vue的滚动条插件实现代码
2019/09/07 Javascript
浅谈vue-props的default写不写有什么区别
2020/08/09 Javascript
[01:39](回顾)各路豪强针锋相对,几经鏖战四强产生
2014/07/01 DOTA
python基础教程项目四之新闻聚合
2018/04/02 Python
python和shell获取文本内容的方法
2018/06/05 Python
django用户登录验证的完整示例代码
2019/07/21 Python
IDLE下Python文件编辑和运行操作
2020/04/25 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
CSS3 3D位移translate效果实例介绍
2016/05/03 HTML / CSS
利用HTML5的新特点实现图片文件异步上传
2014/05/29 HTML / CSS
HTML块级标签汇总(小篇)
2016/07/13 HTML / CSS
EJB timer的种类
2014/10/28 面试题
防沙治沙典型材料
2014/05/07 职场文书
民族学专业职业生涯规划范文:积跬步以至千里
2014/09/11 职场文书
教师党员自我评价2015
2015/03/04 职场文书
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技