jquery的extend方法(源码解析)
1.前段时间一直忙于研究数据可视化(d3.js,three.js) 以及 php的 laravel框架,生活上也遇到很多事情,这大概就是人生中的迷茫期吧。
回想起,刚出来工作的时候,目标很明确,要学习什么。将来要达到什么样的高度,要跟大神们肩并肩,谈天论地。朝着这个目标一直
努力着。但随着见过的、做过的、东西越多,反而越来越迷茫-----感觉啥都会,借着度娘,工作中基本不会遇到什么问题了。
但仔细想来又啥都不会。闭着眼睛一写,这也记不住,那也记不住(也许是年龄大的原因吧)。目标一直未变,但怎样自己才能成为自己的偶像,却很困惑。
独自在前端的海洋中漂行着,摸索着,我知道一定走了很多弯路,但我也知道一直前进着。前行之中缺少一盏明灯,怎样才能找到自己的明灯呢?
无聊之时读了读jQuery的源码,希望能够找到自己的那盏灯。
/**
1. $.extend的用法。 第一个参数是决定是否需要深复制。 由 true, false。 默认是浅复制
params:
options => 接收传递过来的arguments 的中间参数。
name => 没对对象的key值。
src => 当传递的对象key值相同到时候。要和并
copy => 复制的value 值。
copyIsArray => 判断value对象是不是数组。
clone => 当深度复制的时候。需要新建一个变量。不会改变原始的值。
target => 最开始是默认值是取传进来的第一个参数。过后往后一直跳。$.extend(a,b,c); target 为 a, 为b,为c。
i => 决定当前target 等于参数中的某个值
length =>
deep => 默认是false 是决定是否需要深复制的参数。 true 是深复制。 false 是浅复制
*/
jQuery.extend = jQuery.fn.extend = function() {
var options, name, src, copy, copyIsArray, clone,
target = arguments[ 0 ] || {},
i = 1,
length = arguments.length,
deep = false; // 判断 target 来决定是否 深复制
if ( typeof target === "boolean" ) {
deep = target; //当深复制的时候,需要跳过第一个参数。 来循环传进来的参数。 刚开始 1,2,3
target = arguments[ i ] || {};
i++; } // 当 target 不是一个对象且 不是一个函数对象 这个时候就把target 变为空对象。
if ( typeof target !== "object" && !jQuery.isFunction( target ) ) {
target = {};
} // 如果传递过来的参数只有一个的情况下。target 就是该参数。
if ( i === length ) {
target = this;
i--; // 把i 改为1
} for ( ; i < length; i++ ) { // 处理非空 或者 undefined 的情况。 null == null 。 undefined == null;
//options 是来接收除了第一个参数外的所有参数。中间桥梁的作用吧
if ( ( options = arguments[ i ] ) != null ) { // name in options 决定了 传过来的值必须是对象。如果不是对象的话。将要被拆分
for ( name in options ) { //这个是决定后面同级 的key 值, 后面将要覆盖前面的。
src = target[ name ]; //获取 key值为 name 的 value值。
copy = options[ name ]; // Prevent never-ending loop 阻止无限循环。 ???没有搞懂,设么情况下才会出现这种情况。 if ( target === copy ) {
continue;
} /** 1.深复制,且value 为对象属性的时候执行递归复制。 isPlainObect(copy) 判断copy第不是一个 纯对象
2.copy 时一个数组的时候。执行里面的函数。
3.(因为只有对象value 和 数组value 是需要进行深复制的。)
*/
if ( deep && copy && ( jQuery.isPlainObject( copy ) ||
( copyIsArray = Array.isArray( copy ) ) ) ) { if ( copyIsArray ) { copyIsArray = false;
clone = src && Array.isArray( src ) ? src : []; } else { clone = src && jQuery.isPlainObject( src ) ? src : {};
} // 创建新对象。来进行深度复制。 target[ name ] = jQuery.extend( deep, clone, copy ); //除了对象数组,和undefined 的值。
} else if ( copy !== undefined ) {
target[ name ] = copy;
}
}
}
} // Return the modified object
return target;
};
本段来自jquery。 version = 3.2.1 版本。 每个人的观点必定有不一样的地方。有错的地方希望大家指出来。共同学习。
上面这段代码中有个地方一直没有想出来。
// Prevent never-ending loop 阻止无限循环。 ???没有搞懂,设么情况下才会出现这种情况。 {} != {} 没有想出来什么情况下才会出现target === copy的情况。 if ( target === copy ) {
continue;
}
目前看了大概10分之1吧,学习了很多套路。也许真的能够找到自己的那盏明灯。
另祝:看了的帅哥越来越帅,美女越来越美。^_^
jquery的extend方法(源码解析)的更多相关文章
- 解析jQuery中extend方法--源码解析以及递归的过程《二》
源码解析 在解析代码之前,首先要了解extend函数要解决什么问题,以及传入不同的参数,会达到怎样的效果.extend函数内部处理传入的不同参数,返回处理后的对象. extend函数用来扩展对象,增加 ...
- jQuery.extend()方法和jQuery.fn.extend()方法源码分析
这两个方法用的是相同的代码,一个用于给jQuery对象或者普通对象合并属性和方法一个是针对jQuery对象的实例,对于基本用法举几个例子: html代码如下: <!doctype html> ...
- erlang下lists模块sort(排序)方法源码解析(二)
上接erlang下lists模块sort(排序)方法源码解析(一),到目前为止,list列表已经被分割成N个列表,而且每个列表的元素是有序的(从大到小) 下面我们重点来看看mergel和rmergel ...
- erlang下lists模块sort(排序)方法源码解析(一)
排序算法一直是各种语言最简单也是最复杂的算法,例如十大经典排序算法(动图演示)里面讲的那样 第一次看lists的sort方法的时候,蒙了,几百行的代码,我心想要这么复杂么(因为C语言的冒泡排序我记得不 ...
- TreeSet集合的add()方法源码解析(01.Integer自然排序)
>TreeSet集合使用实例 >TreeSet集合的红黑树 存储与取出(图) >TreeSet的add()方法源码 TreeSet集合使用实例 package cn.itca ...
- jquery 1.7.2源码解析(二)构造jquery对象
构造jquery对象 jQuery对象是一个类数组对象. 一)构造函数jQuery() 构造函数的7种用法: 1.jQuery(selector [, context ]) 传入字符串参数:检查该字符 ...
- Java基础知识强化63:Arrays工具类之方法源码解析
1. Arrays工具类的sort方法: public static void sort(int[] a): 底层是快速排序,知道就可以了,用空看. 2. Arrays工具类的toString方法底层 ...
- RestTemplate post请求使用map传参 Controller 接收不到值的解决方案 postForObject方法源码解析.md
结论 post方法中如果使用map传参,需要使用MultiValueMap来传递 RestTemplate 的 postForObject 方法有四个参数 String url => 顾名思义 ...
- RestTemplate post请求 Controller 接收不到值的解决方案 postForObject方法源码解析
springboot 整合 RestTemplate 与 使用方法 RestTemplate 的 postForObject 方法有四个参数 String url => 顾名思义 这个参数是请求 ...
- HashSet的add()方法源码解析(jdk1.8)
HashSet 实现了Set接口 实际上是HashMap 可以存null,但只能有一个 不保证元素是有序的,取决于hash后,在确定索引结果 add源码 //核心操作putVal final V pu ...
随机推荐
- POJ1419 Graph Coloring
嘟嘟嘟 求无向图的最大独立集. 有这么一回事:最大独立集=补图的最大团. 所谓的最大团,就是一个子图,满足图中任意两点都有边. 然后ssy巨佬告诉了我一个很没有道理强的做法:随机. 每一次random ...
- 转://tcpdump抓包实例
基本语法 ========过滤主机--------- 抓取所有经过 eth1,目的或源地址是 192.168.1.1 的网络数据# tcpdump -i eth1 host 192.168.1.1- ...
- (一) 天猫精灵接入Home Assistant- hass对接天猫精灵
1如何利用论坛的认证服务器对接天猫精灵 说起天猫精灵的接入,最早是由c1pher(25989406)大神通过开发自定义技能接入,后面qebabe大神进行了改进,可以直接通过HASS API读取hass ...
- docker swarm英文文档学习-12-在集群模式中的Raft共识
Raft consensus in swarm mode 在集群模式中的Raft共识 当Docker引擎在集群模式下运行时,manager节点实现Raft 共识算法来管理全局集群状态.Docker s ...
- 深入理解Java中的final关键字(转)
文章转自http://www.importnew.com/7553.html Java中的final关键字非常重要,它可以应用于类.方法以及变量.这篇文章中我将带你看看什么是final关键字?将变量, ...
- leetcode538. Convert BST to Greater Tree
https://www.cnblogs.com/grandyang/p/6591526.html 这个题本质上是中序遍历的反向.中序遍历是从小到大,而这个题目是从大到小,然后每个数加上比自己大的所有数 ...
- kubespray -- k8s集群dashboard 访问方式
1.参考这篇文章: https://github.com/kubernetes/dashboard/wiki/Creating-sample-user 创建用户 2.获取token 3.kubectl ...
- [05] EL表达式
1.概述 EL = Expression Language 表达式语言,用来在JSP中替代<%=%>的数据表达方式,EL更简洁,它的语法如下: ${...} 1 1 ${...} ...
- OpenStack中的虚拟机(/dev/mapper/centos-root)进行磁盘扩容
一.虚拟机上先扩展分区: 二.centos系统root登入,新建分区 2.1 [fdisk -l] 最大分区为/dev/sda2,说明新创建的分区将会是sda3(在后面的步骤会进行选择) 2.2 输入 ...
- REST-framework快速构建API--源码解析
一.APIView 通过APIView实现API的过程如下: urls.py url(r'^books/$', views.BookView.as_view(),name="books&qu ...