目录

1 . jquery extend的基本使用

通过285行的源码 jQuery.extend = jQuery.fn.extend = function() { ,extend方法要么是直接挂在到jQuery的静态方法,要么是挂载到fn上其实就是原型上(参考283行的赋值操作)的实例方法。extend方法可以传一个对象,类似于插件的方式,也可以传多个对象进行拷贝。

<script src="js/jquery-2.0.3.js"></script>
<script>
$.extend({
aaa:function(){
alert("1");
},
bbb:function(){
alert("2");
}
})
$.fn.extend({
aaa:function(){
alert("3");
},
bbb:function(){
alert("4");
}
})
$.aaa();//弹出1,静态方法可以直接调用
$().aaa();//弹出3,绑定到fn上的方法,以对象的形式调用
//多个对象参数,后面的对象会扩展到第一个对象上
var a={};
$.extend(a,{color:'#f40'});
console.log(a);//color所在的对象就被扩展到a对象上
</script>

接下来关注extend的拷贝分深拷贝和浅拷贝。

<script src="js/jquery-2.0.3.js"></script>
<script>
var a={};
var b={name:"hello"};
var c={name:"hello-1"};
var d={name:{age:20}};
var e={name:{age:50}};
//浅拷贝对象b
$.extend(a,b);
a.name="hi";
alert(b.name);//弹出hello
//浅拷贝对象d
$.extend(a,d);
a.name.age=30;
alert(d.name.age);//弹出30
//深拷贝对象c
$.extend(true,a,c);
a.name="hi";
alert(c.name);//弹出hello-1
//深拷贝对象e
$.extend(true,a,e);
a.name.age=40;
alert(e.name.age);//弹出50
</script>

2.代码简化版本

分为5个部分:

定义了一些变量

if(){}  是不是深拷贝

if(){}  参数正确不

if(){}  看是不是插件的情况,插件的话传入一个含有方法的json对象

for   传入多个对象的情况

if防止循环应用,if深拷贝,else if浅拷贝。

详解篇:3.1 定义了一些变量

var options, name, src, copy, copyIsArray, clone,
target = arguments[0] || {},
i = 1,
length = arguments.length,
deep = false;

这里要说明一下target。它就是 $.extend(a,d); 拷贝的目标对象a。这里的arguments是javascript的内置对象,是一个类数组,索引为0的值当然是参数a。

详解篇:3.2 看是不是深拷贝

// 处理深拷贝的情形
if ( typeof target === "boolean" ) {
deep = target;
target = arguments[1] || {};
// 如果传入的第一个参数为true,那么deep就置为true了。target目标对象就调整为第二个。
//跳过布尔值和target
i = 2;
}

这里处理的是传入了true的情况,比如 $.extend(true,a,c); 。

详解篇:3.3 要传正确的的参数

// 如果传进来的并非object同时也不是function,那么target置为空对象。
if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
target = {};
}

详解篇:3.4 处理插件的情形

// 如果传进来一个参数,那么target目标对象就为jquery自己。
if ( length === i ) {
target = this;
--i;
}

详解篇:3.5 传入多个对象的操作

基本思路是通过arguments进行取值,获取到每个非目标对象的参数。非target对象通过in循环,获取到属性名。

总体特征是浅拷贝只能拷贝一层,深拷贝可以连嵌套子对象也能拷贝进去。

浅拷贝的情况下,那么走的是else分支,对相应的值进行覆盖  target[ name ] = copy; 。可以看到如果原来有target有相同的属性,那么就覆盖,如果没有,那么就添加上。

<script src="js/jquery-2.0.3.js"></script>
<script>
var a={name:{age:20}};
var b={name:{age:50}};
//浅拷贝对象b
$.extend(false,a,b);
console.log(a);//{name:{age:20}}
console.log(b);//{name:{age:50}}
</script>

它遇到对象嵌套,copy这里是{age:50},通过简单的赋值是修改不了的。

<script>
var a={name:{age:20}};
var b={name:{age:50}};
a[name]=b[name];
console.log(a);//{name:{age:20}},没有变化哦。
</script>

深拷贝的情况下。copy是数组,src也为数组赋值给clone否则为空数组。copy是对象,src是对象赋值给clone否则为空对象。

<script src="js/jquery-2.0.3.js"></script>
<script>
var a={name:{age:20}};
var b={name:{age:50}};
//浅拷贝对象b
$.extend(true,a,b);
console.log(a);//{name:{age:50}}
console.log(b);//{name:{age:50}}
</script>

深拷贝的copy等于{age:50},src等于{age:20}。那么通过克隆的方式就可以把copy给到src。这其实是一个递归调用,所以深拷贝会拷贝到底。

for ( ; i < length; i++ ) {
// 处理非空或者没有定义的情况
if ( (options = arguments[ i ]) != null ) {
// 扩展基础对象,in语法把属性值取出来
for ( name in options ) {
src = target[ name ];
copy = options[ name ]; // 防止无限循环,类似$.extend(a,{name:a})。那么如果拷贝的某一个值就等于target那么就终止代码在继续循环
if ( target === copy ) {
continue;
} // 深拷贝和copy存在,以及copy要么是对象、要么是数组
if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
if ( copyIsArray ) {
copyIsArray = false;
clone = src && jQuery.isArray(src) ? src : []; } else {
clone = src && jQuery.isPlainObject(src) ? src : {};
} // 不移动原对象,克隆他们。
target[ name ] = jQuery.extend( deep, clone, copy ); // Don't bring in undefined values
} else if ( copy !== undefined ) {
target[ name ] = copy;
}
}
}
}

jquery的2.0.3版本源码系列(4):285-348行,extend方法详解的更多相关文章

  1. jquery的2.0.3版本源码系列(3):96行-283行,给JQ对象,添加一些方法和属性

    jquery是面向对象的程序,面向对象就离不开方法和属性. 方法的简化 jQuery.fn=jQuery.prototype={ jquery: 版本 constructor: 修正指向问题 init ...

  2. jquery的2.0.3版本源码系列(2):21行-94行定义了一些变量和函数 jQuery=function(){}

    2.1.bug通过索引查询 这里的#13335是bug的索引,如何查询呢? 第一步,浏览器地址栏输入"https://bugs.jquery.com/". 第二步,在网页的搜索框里 ...

  3. jquery的2.0.3版本源码系列(6):2880-3042行,回调对象,对函数的统一管理

    目录 1 . 回调对象callbacks的演示 回调的使用有一点像事件绑定,先绑定好,等到有点击事件或者其他时就触发. <script src="js/jquery-2.0.3.js& ...

  4. jquery的2.0.3版本源码系列(7):3043行-3183行,deferred延迟对象,对异步的统一管理

    目录 part1 deferred延迟对象 part2  when辅助方法 网盘源代码 链接: https://pan.baidu.com/s/1skAj8Jj 密码: izta part1 defe ...

  5. jquery的2.0.3版本源码系列(1)总体结构

    为什么选择2.X版本,而不是1.X版本,因为2.X不兼容IE6/7/8,所以少了兼容代码,让我们更专注于jquery原理的代码. 一共有8830行. 1.1 匿名函数自执行 首先,匿名函数的作用是,把 ...

  6. jquery的2.0.3版本源码系列(5):349-817行,extend添加的工具方法

    expando 生成唯一JQ字符串(内部)noconflict避免冲突isReady DOM是否加载完成(DOMContentLoaded)readyReady

  7. jQuery extend方法详解

    先说个概念的东西: jQuery为开发插件提拱了两个方法,分别是: $.fn.extend(item):为每一个实例添加一个实例方法item.($("#btn1") 会生成一个 j ...

  8. jQuery 源码分析(十六) 事件系统模块 底层方法 详解

    jQuery事件系统并没有将事件监听函数直接绑定到DOM元素上,而是基于数据缓存模块来管理监听函数的,事件模块代码有点多,我把它分为了三个部分:分底层方法.实例方法和便捷方法.ready事件来讲,好理 ...

  9. Kafka 0.10.1版本源码 Idea编译

    Kafka 0.10.1版本源码 Idea编译 1.环境准备 Jdk 1.8 Scala 2.11.12:下载scala-2.11.12.msi并配置环境变量 Gradle 5.6.4: 下载Grad ...

随机推荐

  1. 关于tomcat下startup.bat双击闪退的问题

    背景:之前做单点登录,复制了几个tomcat,改了各自端口,当做不同服务器用. 今天无意间随便点击了一个tomcat下的startup.bat批处理文件,结果出来控制台,没出几行信息就闪退了.点击其他 ...

  2. 提交到APPStore出现ERROR ITMS-90474

    解决的方案是:在工程的targets--->General----->Develoment Info ------->Status BarStyle

  3. (转)Linux开机启动(bootstrap)

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 计算机开机是一个神秘的过程.我们只是按了开机键,就看到屏幕上的进度条或者一行行的输 ...

  4. Android开发之监听器

    一直都想进行安卓开发,最近上手了Android.刚开始学习一些基本控件,学习Android就如同进入一个新的世界,印象最深的是这个世界的规则. 最近学习了监听器,对于这个我的一点理解是监听键盘活动 B ...

  5. 最短路之Bellman-Ford算法

    说明: Dijkstra算法是处理单源最短路径的有效算法,但它局限于边的权值非负的情况,若图中出现权值为负的边,Dijkstra算法就会失效,求出的最短路径就可能是错的. 这时候,就需要使用其他的算法 ...

  6. NOIP 2000 提高组 题解

    NOIP2000 提高组 题解 No 1. 进制转换 https://www.rqnoj.cn/problem/295 水题 对于n和基数r, 每次用n mod r, 把余数按照逆序排列 注意 mod ...

  7. NYOJ--113--字符串替换

    /* Name: NYOJ--113--字符串替换 Author: shen_渊 Date: 18/04/17 15:41 Description: 字符串水题,秒过 */ #include<b ...

  8. 安徽省2016“京胜杯”程序设计大赛_B_阵前第一功

    阵前第一功 Time Limit: 1000 MS Memory Limit: 65536 KB Total Submissions: 63 Accepted: 29 Description A国每个 ...

  9. Win7 IIS建站

    1.在控制面板->程序和功能->打开或关闭windows功能->安装IIS服务 2.控制面板->管理工具->IIS管理器 客户端访问Web服务器,服务器端不需关闭防火墙, ...

  10. [算法题] 3Sum Closest

    题目内容 Given an array S of n integers, find three integers in S such that the sum is closest to a give ...