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 相关文章推荐
在textarea文本域中显示HTML代码的方法
Mar 06 Javascript
用javascript实现给图片加链接
Aug 15 Javascript
JavaScript获取图片真实大小代码实例
Sep 24 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
Oct 17 Javascript
jQuery中offset()方法用法实例
Jan 16 Javascript
jQuery Ajax请求后台数据并在前台接收
Dec 10 Javascript
vue的常用组件操作方法应用分析
Apr 13 Javascript
在Angular中使用JWT认证方法示例
Sep 10 Javascript
AngularJS 多指令Scope问题的解决
Oct 25 Javascript
vue + typescript + 极验登录验证的实现方法
Jun 27 Javascript
详解TypeScript中的类型保护
Apr 29 Javascript
在 HTML 页面中使用 React的场景分析
Jan 18 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继承的一个应用
2011/09/06 PHP
PHP实现模仿socket请求返回页面的方法
2014/11/04 PHP
PHP使用header()输出图片缓存实例
2014/12/09 PHP
PHP实现HTML页面静态化的方法
2015/11/04 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
实例讲解PHP表单验证功能
2019/02/15 PHP
动态刷新 dorado树的js代码
2009/06/12 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
做web开发 先学JavaScript
2014/12/12 Javascript
Javascript与jQuery方法的隐藏与显示
2015/01/19 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
2016/06/07 Javascript
JavaScript中点击事件的写法
2016/06/28 Javascript
Seajs是什么及sea.js 由来,特点以及优势
2016/10/13 Javascript
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
Javascript实现秒表倒计时功能
2018/11/17 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
Node 代理访问的实现
2019/09/19 Javascript
VUE项目axios请求头更改Content-Type操作
2020/07/24 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
2020/11/05 Javascript
Python3中条件控制、循环与函数的简易教程
2017/11/21 Python
详解Python Matplot中文显示完美解决方案
2019/03/07 Python
python批量识别图片指定区域文字内容
2019/04/30 Python
解决py2exe打包后,总是多显示一个DOS黑色窗口的问题
2019/06/21 Python
python3.7 sys模块的具体使用
2019/07/22 Python
pandas DataFrame 警告(SettingWithCopyWarning)的解决
2019/07/23 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
迷你唐卡软皮鞋:Minnetonka Moccasin
2018/05/01 全球购物
80年代复古T恤:TruffleShuffle
2018/07/02 全球购物
伦敦新晋轻奢耳饰潮牌:Tada & Toy
2020/05/25 全球购物
巴西世界杯32强口号
2014/06/05 职场文书
有关环保的标语
2014/06/13 职场文书
2014年党务公开工作总结
2014/12/09 职场文书
担保书范文
2019/07/09 职场文书
教你怎么用PyCharm为同一服务器配置多个python解释器
2021/05/31 Python