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下弹出窗口的变通
Apr 18 Javascript
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
Mar 21 Javascript
JavaScript页面刷新与弹出窗口问题的解决方法
Mar 02 Javascript
script标签的 charset 属性使用说明
Dec 04 Javascript
javascript:void(0)使用探讨
Aug 27 Javascript
JS快速实现移动端拼图游戏
Sep 05 Javascript
easy ui datagrid 从编辑框中获取值的方法
Feb 22 Javascript
Vue如何实现响应式系统
Jul 11 Javascript
react实现移动端下拉菜单的示例代码
Jan 16 Javascript
JS数组扁平化、去重、排序操作实例详解
Feb 24 Javascript
详解ES6数组方法find()、findIndex()的总结
May 12 Javascript
Array.filter中如何正确使用Async
Nov 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
PHP的开合式多级菜单程序
2006/10/09 PHP
浅析php原型模式
2014/11/25 PHP
php银联网页支付实现方法
2015/03/04 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
实例介绍PHP中zip_open()函数用法
2019/02/15 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
php中数组最简单的使用方法
2020/12/27 PHP
jquery插件制作简单示例说明
2012/02/03 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
使用javascript控制cookie显示和隐藏背景图
2014/02/12 Javascript
JQuery解析HTML、JSON和XML实例详解
2014/03/29 Javascript
php读取sqlite数据库入门实例代码
2014/06/25 Javascript
jQuery实现伸展与合拢panel的方法
2015/04/30 Javascript
js实现防止被iframe的方法
2015/07/03 Javascript
js验证框架实现代码分享
2016/05/18 Javascript
微信小程序(应用号)开发新闻客户端实例
2016/10/24 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
jQuery实现的中英文切换功能示例
2019/01/11 jQuery
了解前端理论:rscss和rsjs
2019/05/23 Javascript
原生js实现轮播图特效
2020/05/04 Javascript
JS猜数字游戏实例讲解
2020/06/30 Javascript
Python的math模块中的常用数学函数整理
2016/02/04 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
python实现二维插值的三维显示
2018/12/17 Python
全球性的在线商店:Vogca
2019/05/10 全球购物
Sisley法国希思黎中国官网:享誉全球的奢华植物美容品牌
2019/06/30 全球购物
Shell脚本如何向终端输出信息
2014/04/25 面试题
旷课检讨书大全
2014/01/21 职场文书
蓝颜请假条
2014/04/11 职场文书
陈安之励志演讲稿
2014/08/21 职场文书
室内趣味活动方案
2014/08/24 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书
2014年公务员转正工作总结
2014/11/07 职场文书
2017年寒假社区服务活动总结
2016/04/06 职场文书
纯 CSS 自定义多行省略的问题(从原理到实现)
2021/11/11 HTML / CSS