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 相关文章推荐
JQuery实现自定义对话框的代码
Jun 15 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
Feb 24 Javascript
JavaScript Math.floor方法(对数值向下取整)
Jan 09 Javascript
javascript实现日期按月份加减
May 15 Javascript
JavaScript代码性能优化总结(推荐)
May 16 Javascript
浅谈js中对象的使用
Aug 11 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
Sep 18 Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 Javascript
Element ui 下拉多选时新增一个选择所有的选项
Aug 21 Javascript
layui实现给某一列加点击事件
Oct 26 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
Jul 18 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
Nov 10 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 Ajax乱码
2008/04/09 PHP
php 正则 过滤html 的超链接
2009/06/02 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
php 中phar包的使用教程详解
2018/10/26 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
javascript实现的动态文字变换
2007/07/28 Javascript
Prototype Hash对象 学习
2009/07/19 Javascript
js 第二代身份证号码的验证机制代码
2011/05/12 Javascript
js和css写一个可以自动隐藏的悬浮框
2014/03/05 Javascript
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
jQuery实现的网页竖向菜单效果代码
2015/08/26 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
javascript学习指南之回调问题
2016/04/23 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
2016/09/24 Javascript
jQuery 的 ready()的纯js替代方法
2016/11/20 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
2017/03/08 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
2017/07/20 Javascript
JS原生数据双向绑定实现代码
2017/08/14 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
2018/09/25 Javascript
iView-admin 动态路由问题的解决方法
2018/10/03 Javascript
Python实现Linux下守护进程的编写方法
2014/08/22 Python
零基础写python爬虫之urllib2使用指南
2014/11/05 Python
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
Python简单实现安全开关文件的两种方式
2016/09/19 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
奥地利网上现代灯具和灯饰店:Lampenwelt.at
2018/01/29 全球购物
乐高官方旗舰店:LEGO积木玩具
2019/04/06 全球购物
英文简历中的自我评价用语
2013/12/09 职场文书
大学生的网上创业计划书
2013/12/31 职场文书
迎新晚会邀请函
2014/02/01 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
新书发布会策划方案
2014/06/09 职场文书
敬老院活动感想
2015/08/07 职场文书