jQuery源码学习（版本1.11）-Deferred

概述

本分详细分析jquery-1.11.1.js源码文件行数：3251~3391；

代码简介：

使用jQuery.extend扩展了Deferred和when两个工具函数，其中when算是对Deferred的扩展应用；

Deferred函数返回一个Deferred对象，Deferred对象可分三种情况（resolve，reject，notify）分别保存各自的回调函数，这些回调会在Deferred状态变更的时候执行，不同的状态执行其各自的回调。可以说Deferred是管理异步回调的利器，可用于类似ajax请求，根据返回结果执行不同回调的场景；

When函数则是扩展Deferred，返回一个Deferred对象中的promise对象（只能添加回调，不能变更自身状态），这个对象可根据多个Deferred对象的状态去改变其状态；

下文对代码详细分析。

代码分析

// 扩展工具函数Deferred和when
jQuery.extend({

	Deferred: function( func ) {
		var tuples = [
				// 定义嵌套数组，内层数组里的项对应action, add listener, listener list, final state，每一个数组代表Deferred对象的一种状态
				[ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ],
				[ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ],
				[ "notify", "progress", jQuery.Callbacks("memory") ]
			],
			// 代表promise当前状态
			state = "pending",
			// 定义promise对象
			promise = {
				// 返回状态
				state: function() {
					return state;
				},
				// 往deferred添加回调，实际就是同时加进done跟fail的Callbacks对象里
				always: function() {
					deferred.done( arguments ).fail( arguments );
					return this;
				},
				// 一次性往deferred添加三种情况的回调
				// 并且可返回新deferred对象里的promise对象(不是直接返回deferred对象，这点很重要)
				// 返回的promise对象可以继续添加回调，但是只能根据原deferred的结果执行回调
				// 相当于依赖，生成一个子对象，依赖父对象的结果执行回调，延长了原deferred的作用范围
				then: function( /* fnDone, fnFail, fnProgress */ ) {
					// 缓存参数，以免后续作用域变更导致变量名冲突
					var fns = arguments;
					// promise()返回的是promise而不是deferred
					return jQuery.Deferred(function( newDefer ) {
						// 使用each将fns全部加进newDefer，并不是直接添加，可以看出外面还套了一层funcion
						jQuery.each( tuples, function( i, tuple ) {
							var fn = jQuery.isFunction( fns[ i ] ) && fns[ i ];
							// fn外面套了一层function才加进[ done | fail | progress ]三种场景的list中
							deferred[ tuple[1] ](function() {
								// 执行fn，得到返回值
								var returned = fn && fn.apply( this, arguments );
								// 返回值存在promise方法，说明是promise对象或deferred对象
								// 则将newDefer的触发方法[ done | fail | progress ] 加进去，returned又成为触发newDefer的另一个父对象，又必须触发returned才会触发newDefer
								if ( returned && jQuery.isFunction( returned.promise ) ) {
									returned.promise()
										.done( newDefer.resolve )
										.fail( newDefer.reject )
										.progress( newDefer.notify );
								// 否则直接触发newDefer已添加的回调
								} else {
									newDefer[ tuple[ 0 ] + "With" ]( this === promise ? newDefer.promise() : this, fn ? [ returned ] : arguments );
								}
							});
						});
						fns = null;
					}).promise();
				},
				// 如果obj存在，使用jQuery.extend将promise扩展进去（即promise的属性会复制到obj中），否则直接返回promise对象
				promise: function( obj ) {
					return obj != null ? jQuery.extend( obj, promise ) : promise;
				}
			},
			// 定义deferred对象
			deferred = {};

		// Keep pipe for back-compat
		promise.pipe = promise.then;

		// 调用each方法，实际就是用deferred，对tuples里的数组(三个Callbacks对象)进行包装的过程
		jQuery.each( tuples, function( i, tuple ) {
			// list获得的是一个Callbacks对象
			var list = tuple[ 2 ],
				stateString = tuple[ 3 ];

			// 引用Callbacks对象的add方法包装起来，promise[ done | fail | progress ] = list.add
			// promise对象里引用了[ done | fail | progress ] 三种方法，但没有[ resolve | reject | notify ]方法
			// 表明promise无法触发回调
			promise[ tuple[1] ] = list.add;

			if ( stateString ) {
				// 往list添加方法，由Callbacks对象的源码可知，这些方法会在list调用fire的时候执行
				list.add(function() {
					// 设置状态，只会出现两种情况state = [ resolved | rejected ]
					state = stateString;

				// resolved和rejected对对立的，异或取反添加对应Callbacks对象的disable方法，让其执行
				// 同时添加tuples[ 2 ][ 2 ].lock，即notify的方法
				}, tuples[ i ^ 1 ][ 2 ].disable, tuples[ 2 ][ 2 ].lock );
			}

			// 包装方法deferred[ resolve | reject | notify ]
			deferred[ tuple[0] ] = function() {
				// 实际就是调用Callbacks的fireWith方法，这里传递了上下文，可知最终执行方法的上下文就是promise或this
				deferred[ tuple[0] + "With" ]( this === deferred ? promise : this, arguments );
				return this;
			};
			// 包装Callbacks的fireWith方法
			deferred[ tuple[0] + "With" ] = list.fireWith;
		});

		// 将promise对象扩展进deferred对象
		promise.promise( deferred );

		// 创建对象的时候如果传入了fun参数，执行之
		if ( func ) {
			func.call( deferred, deferred );
		}

		// 返回deferred
		return deferred;
	},

	// Deferred helper 接收多个Deferred对象作为参数，返回一个新Deferred对象的promise，新对象的状态由所有参数共同控制
	when: function( subordinate /* , ..., subordinateN */ ) {
		var i = 0,
			resolveValues = slice.call( arguments ),
			length = resolveValues.length,

			// 获取传入的Deferred对象个数，如果只有一个，则取0
			remaining = length !== 1 || ( subordinate && jQuery.isFunction( subordinate.promise ) ) ? length : 0,

			// 最终返回deferred.promise()，如果不传参，为0或大于1，则新建一个Deferred对象，否则直接为第一个参数
			deferred = remaining === 1 ? subordinate : jQuery.Deferred(),

			// 当参数Deferred对象状态变化时，更新deferred状态
			updateFunc = function( i, contexts, values ) {
				// 实际是返回一个function到参数Deferred对象的list中，这样该Deferred对象状态变化时就会触发回调更新deferred状态
				return function( value ) {
					// 保存上下文，实际就是每次调用时的其中一个参数Deferred对象
					contexts[ i ] = this;
					// 保存该参数Deferred对象执行回调时传的参数
					values[ i ] = arguments.length > 1 ? slice.call( arguments ) : value;
					// 直接判断values是哪个数组对象可知当前执行的参数Deferred是哪个状态
					// deferred.notifyWith每当一个参数Deferred执行一次notify时都会执行
					if ( values === progressValues ) {
						deferred.notifyWith( contexts, values );

					// 只有当所有参数Deferred对象的状态都是resolved时才会调用deferred.resolveWith
					// 此时contexts即为resolveContexts已经存下了所有的参数Deferred对象，作为deferred里回调的参数
					} else if ( !(--remaining) ) {
						deferred.resolveWith( contexts, values );
					}
				};
			},
			
			// 定义三个数组，用于保存参数Deferred对象执行回调时的参数和上下文，作为deferred里回调的参数
			progressValues, progressContexts, resolveContexts;

		// 判断length长度，对每一个参数Deferred对象都使用done,fail,progress添加上updateFunc的返回值（即上述分析的一个更新deferred状态回调函数）
		// 这样每个参数Deferred对象状态变更时，都会更新deferred的状态，实现对deferred的控制
		if ( length > 1 ) {
			progressValues = new Array( length );
			progressContexts = new Array( length );
			resolveContexts = new Array( length );
			for ( ; i < length; i++ ) {
				if ( resolveValues[ i ] && jQuery.isFunction( resolveValues[ i ].promise ) ) {
					resolveValues[ i ].promise()
						.done( updateFunc( i, resolveContexts, resolveValues ) )
						.fail( deferred.reject )
						.progress( updateFunc( i, progressContexts, progressValues ) );
				} else {
					--remaining;
				}
			}
		}

		// remaining为0则在创建过程中直接就调用resolveWith，状态就会直接变为resolved
		if ( !remaining ) {
			deferred.resolveWith( resolveContexts, resolveValues );
		}

		// 最终只返回promise对象，这样就只能添加回调，而无法自己触发回调
		return deferred.promise();
	}
});