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中几种去掉字串左右空格的方法
Dec 25 Javascript
用JavaScript页面不刷新时全选择,全删除(GridView)
Apr 14 Javascript
Javascript 代码也可以变得优美的实现方法
Jun 22 Javascript
基于jQuery的自动完成插件
Feb 03 Javascript
关于js内存泄露的一个好例子
Dec 09 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
Dec 25 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
Jan 28 Javascript
jQuery层级选择器实例代码
Feb 06 Javascript
一道面试题引发的对javascript类型转换的思考
Mar 06 Javascript
Vue常用的几个指令附完整案例
Nov 06 Javascript
JS实现canvas简单小画板功能
Jun 23 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
Nov 11 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
PHP5.0正式发布 不完全兼容PHP4 新增多项功能
2006/10/09 PHP
PHP 中的类
2006/10/09 PHP
PHP 金额数字转换成英文
2010/05/06 PHP
php四种基础算法代码实例
2013/10/29 PHP
PHP cURL初始化和执行方法入门级代码
2015/05/28 PHP
PHP中串行化用法示例
2016/11/16 PHP
也说JavaScript中String类的replace函数
2011/09/22 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
2012/02/27 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
js定时器的使用(实例讲解)
2014/01/06 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
js无法获取到html标签的属性的解决方法
2016/07/26 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
js 颜色选择插件
2017/01/23 Javascript
详解Vue2.0里过滤器容易踩到的坑
2017/06/01 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
微信小程序全局变量功能与用法详解
2019/01/22 Javascript
jquery实现掷骰子小游戏
2019/10/24 jQuery
[51:15]完美世界DOTA2联赛PWL S2 PXG vs Magma 第一场 11.21
2020/11/24 DOTA
python 保存float类型的小数的位数方法
2018/10/17 Python
django mysql数据库及图片上传接口详解
2019/07/18 Python
Tensorflow实现部分参数梯度更新操作
2020/01/23 Python
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
2016/07/08 HTML / CSS
html5理解head_动力节点Java学院整理
2017/07/13 HTML / CSS
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
学术会议主持词
2014/03/17 职场文书
人事任命书格式
2014/06/05 职场文书
高中学生会竞选演讲稿
2014/08/25 职场文书
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
2015幼儿园庆元旦活动方案
2014/12/09 职场文书
2015年监理工作总结范文
2015/04/07 职场文书
简历中的自我评价怎么写呢?
2019/04/30 职场文书
Redis+Lua脚本实现计数器接口防刷功能(升级版)
2022/02/12 Redis
MySql数据库 查询时间序列间隔
2022/05/11 MySQL