ホームページ > 記事 > ウェブフロントエンド > Deferred非同期オブジェクトのjQueryソースコード解析方法
Deferred非同期オブジェクトのjQueryソースコード解析方法
- 一个新手オリジナル
- 2017-10-26 10:21:171263ブラウズ
私たちの作業では、jQuery を独自のプロジェクトの基本ライブラリとして選択することがあります。これは、単純な DOM セレクターを提供し、 などの多くの実用的なメソッドをカプセル化しているためです。 $.ajax() により、xhr オブジェクトと xdr オブジェクトを操作せずにコード ロジックを直接記述することができます。さらに充実しているのは、ES6 がネイティブ サポートを持たなかった期間に、Promise オブジェクトと同様の Deferred オブジェクトが提供され、 をサポートしていたことです。 >done/fail/progress/always メソッドと when バッチ処理メソッド。プロジェクトに役立つ可能性があります。 jQuery选择做自己项目的基础库，因为其提供了简便的DOM选择器以及封装了很多实用的方法，比如$.ajax()，它使得我们不用操作xhr和xdr对象，直接书写我们的代码逻辑即可。更为丰富的是它在ES6没有原生支持的那段时间，提供了Deferred对象，类似于Promise对象，支持done/fail/progress/always方法和when批处理方法，这可能在项目上帮助过你。
ES6提供了Promise对象，但由于它是内置C++实现的，所以你也没法看它的设计。不如我们通过jQuery的源码来探究其设计思路，并比较一下两者的区别。本文采用jquey-3.1.2.js版本，其中英文注释为原版，中文注释为我添加。
jQuery的ajax总体设计
jQuery在内部设置了全局的ajax参数，在每一个ajax请求初始化时，用传递的参数与默认的全局参数进行混合，并构建一个jqXHR对象（提供比原生XHR更为丰富的方法，同时实现其原生方法），通过传递的参数，来判断其是否跨域、传递的参数类型等，设置好相关头部信息。同时其被初始化为一个内置Deferred对象用于异步操作（后面讲到），添加done/fail方法作为回调。同时我们也封装了$.get/$.post方法来快捷调用$.ajax方法。
上面提到的Deferred对象，与ES6的Promise对象类似，用于更为方便的异步操作，多种回调以及更好的书写方式。提供progress/fail/done方法，并分别用该对象的notify/reject/resolve方法触发，可以使用then方法快速设置三个方法，使用always添加都会执行的回调，并且提供when方法支持多个异步操作合并回调。可以追加不同的回调列表，其回调列表是使用内部Callbacks对象，更方便的按照队列的方式来进行执行。
Callbacks回调队列对象，用于构建易于操作的回调函数集合，在操作完成后进行执行。支持四种初始化的方式once/unique/memory/stopOnFalse，分别代表只执行依次、去重、缓存结果、链式调用支持终止。提供fired/locked/disabled状态值，代表是否执行过、上锁、禁用。提供add/remove/empty/fire/lock/disable方法操作回调函数队列。
主要涉及到的概念就是这三个，不再做延伸，三个对象的设计代码行数在1200行左右，断断续续看了我一周 (´ཀ`」 ∠) 。我们从这三个倒序开始入手剖析其设计。
jQuery.Callbacks对象
Callbacks对象，用于管理回调函数的多用途列表。它提供了六个主要方法：
add: 向列表中添加回调函数remove: 移除列表中的回调函数empty: 清空列表中的回调函数fire: 依次执行列表中的回调函数lock: 对列表上锁，禁止一切操作，清除数据，但保留缓存的环境变量（只在memory参数时有用）disable: 禁用该回调列表，所有数据清空
在初始化时，支持四个参数，用空格分割：
once: 该回调列表只执行依次memory: 缓存执行环境，在添加新回调时执行先执行一次unique: 去重，每一个函数均不同（指的是引用地址）stopOnFalse: 在调用中，如果前一个函数返回false，中断列表的后续执行
我们来看下其实例使用：
let cl = $.Callbacks('once memory unique stopOnFalse');
fn1 = function (data) {
console.log(data);
};
fn2 = function (data) {
console.log('fn2 say:', data);
return false;
};
cl.add(fn1);
cl.fire('Nicholas'); // Nicholas
// 由于我们使用memory参数，保存了执行环境，在添加新的函数时自动执行一次
cl.add(fn2); // fn2 say: Nicholas
// 由于我们使用once参数，所以只能执行（fire）一次，此处无任何输出
cl.fire('Lee');
// 后面我们假设这里没有传入once参数，每次fire都可以执行
cl.fire('Lee'); // Lee fn2 say: Lee
// 清空列表
cl.empty();
cl.add(fn2, fn1);
// 由于我们设置了stopOnFalse，而fn2返回了false，则后添加的fn1不会执行
cl.fire('Nicholas'); // fn2 say: Nicholas
// 上锁cl，禁用其操作，清除数据，但是我们添加了memory参数，它依然会对后续添加的执行一次
cl.lock();
// 无响应
cl.fire();
cl.add(fn2); // fn2 say: Nicholas
// 禁用cl，禁止一切操作，清除数据
cl.disable();除了上面所说的主要功能，还提供has/locked/disabled/fireWith/fired等辅助函数。
其所有源码实现及注释为：
jQuery.Callbacks = function( options ) {
options = typeof options === "string" ?
// 将字符串中空格分割的子串，转换为值全为true的对象属性
createOptions( options ) :
jQuery.extend( {}, options );
var // Flag to know if list is currently firing
firing,
// Last fire value for non-forgettable lists
memory,
// Flag to know if list was already fired
fired,
// Flag to prevent firing
locked,
// Actual callback list
list = [],
// Queue of execution data for repeatable lists
queue = [],
// Index of currently firing callback (modified by add/remove as needed)
firingIndex = -1,
// Fire callbacks
fire = function() {
// Enforce single-firing
locked = locked || options.once;
// Execute callbacks for all pending executions,
// respecting firingIndex overrides and runtime changes
fired = firing = true;
// 为quene队列中不同的[context, args]执行list回调列表，执行过程中会判断stopOnFalse中间中断
for ( ; queue.length; firingIndex = -1 ) {
memory = queue.shift();
while ( ++firingIndex < list.length ) {
// Run callback and check for early termination
if ( list[ firingIndex ].apply( memory[ 0 ], memory[ 1 ] ) === false &&
options.stopOnFalse ) {
// Jump to end and forget the data so .add doesn't re-fire
firingIndex = list.length;
memory = false;
}
}
}
// Forget the data if we're done with it
if ( !options.memory ) {
memory = false;
}
firing = false;
// Clean up if we're done firing for good
// 如果不再执行了，就将保存回调的list清空，对内存更好
if ( locked ) {
// Keep an empty list if we have data for future add calls
if ( memory ) {
list = [];
// Otherwise, this object is spent
} else {
list = "";
}
}
},
// Actual Callbacks object
self = {
// Add a callback or a collection of callbacks to the list
add: function() {
if ( list ) {
// If we have memory from a past run, we should fire after adding
// 如果我们选择缓存执行环境，会在新添加回调时执行一次保存的环境
if ( memory && !firing ) {
firingIndex = list.length - 1;
queue.push( memory );
}
( function add( args ) {
jQuery.each( args, function( _, arg ) {
// 如果是函数，则判断是否去重，如果为类数组，则递归执行该内部函数
if ( jQuery.isFunction( arg ) ) {
if ( !options.unique || !self.has( arg ) ) {
list.push( arg );
}
} else if ( arg && arg.length && jQuery.type( arg ) !== "string" ) {
// Inspect recursively
add( arg );
}
} );
} )( arguments );
if ( memory && !firing ) {
fire();
}
}
return this;
},
// Remove a callback from the list
// 移除所有的相同回调，并同步将firingIndex-1
remove: function() {
jQuery.each( arguments, function( _, arg ) {
var index;
while ( ( index = jQuery.inArray( arg, list, index ) ) > -1 ) {
list.splice( index, 1 );
// Handle firing indexes
if ( index <= firingIndex ) {
firingIndex--;
}
}
} );
return this;
},
// Check if a given callback is in the list.
// If no argument is given, return whether or not list has callbacks attached.
// 检查是否存在该函数，如果不传递参数，则返回是否有回调函数
has: function( fn ) {
return fn ?
jQuery.inArray( fn, list ) > -1 :
list.length > 0;
},
// Remove all callbacks from the list
empty: function() {
if ( list ) {
list = [];
}
return this;
},
// Disable .fire and .add
// Abort any current/pending executions
// Clear all callbacks and values
// 置locked为[],即!![] === true，同时将队列和列表都清空，即禁用了该回调集合
disable: function() {
locked = queue = [];
list = memory = "";
return this;
},
disabled: function() {
return !list;
},
// Disable .fire
// Also disable .add unless we have memory (since it would have no effect)
// Abort any pending executions
// 不允许执行，但如果有缓存，则我们允许添加后在缓存的环境下执行新添加的回调
lock: function() {
locked = queue = [];
if ( !memory && !firing ) {
list = memory = "";
}
return this;
},
locked: function() {
return !!locked;
},
// Call all callbacks with the given context and arguments
// 为fire附带了一个上下文来调用fire函数，
fireWith: function( context, args ) {
if ( !locked ) {
args = args || [];
args = [ context, args.slice ? args.slice() : args ];
queue.push( args );
if ( !firing ) {
fire();
}
}
return this;
},
// Call all the callbacks with the given arguments
fire: function() {
self.fireWith( this, arguments );
return this;
},
// To know if the callbacks have already been called at least once
fired: function() {
return !!fired;
}
};
return self;
};
jQuery.Deferred对象
jQuery.Deferred对象是一个工厂函数，返回一个用于异步或同步调用的deferred对象，支持链式调用、回调函数队列，并且能针对返回的状态不同执行不同的回调。它类似于ES6提供的Promise对象，提供9个主要的方法：
-
doneES6はPromiseオブジェクトを提供しますが、組み込みのC++で実装されているため、その設計を確認することはできません。jQueryのソース コードを通じてその設計アイデアを検討し、2 つの違いを比較してみてはいかがでしょうか。この記事ではjquey-3.1.2.jsバージョンを使用しています。英語のコメントはオリジナルのバージョンであり、中国語のコメントは私が追加したものです。 🎜
🎜jQueryのajaxの全体的な設計jQueryは、グローバルなajaxパラメータを内部的に設定します。各ajaxリクエストを初期化するときに、渡されたパラメータとデフォルトのグローバル パラメータを組み合わせて、jqXHRオブジェクトを構築します (ネイティブのXHRよりも優れたパフォーマンスを提供します) >ネイティブメソッドを実装しながら、よりリッチなメソッド)、渡されたパラメータを通じて、クロスドメインかどうか、渡されたパラメータのタイプなどを判断し、関連するヘッダー情報を設定します。同時に、非同期操作 (後述) 用の組み込みDeferredオブジェクトとして初期化され、done/failメソッドがコールバックとして追加されます。同時に、$.get/$.postメソッドもカプセル化し、$.ajaxメソッドをすばやく呼び出すことができます。 🎜🎜上記のDeferredオブジェクトは ES6 のPromiseオブジェクトに似ており、より便利な非同期操作、複数のコールバック、より優れたメソッドの作成に使用されます。progress/fail/doneメソッドを提供し、オブジェクトのnotify/reject/resolveメソッドでそれぞれトリガーします。thenを使用できます。メソッドを使用して 3 つのメソッドをすばやく設定し、alwaysを使用して実行されるコールバックを追加し、whenメソッドを使用してコールバックをマージする複数の非同期操作をサポートします。さまざまなコールバック リストを追加できます。コールバック リストは内部Callbacksオブジェクトを使用します。これは、キュー方式で実行する方が便利です。 🎜🎜Callbacksコールバック キュー オブジェクト。操作の完了後に実行される、操作が簡単なコールバック関数のコレクションを構築するために使用されます。 4 つの初期化メソッドonce/unique/memory/stopOnFalseをサポートします。これらはそれぞれ、順次実行のみ、重複排除、キャッシュされた結果、チェーン コール サポートの終了を表します。fired/locked/disabledステータス値を提供し、実行されたか、ロックされているか、無効になっているかを示します。コールバック関数キューを操作するためのadd/remove/empty/fire/lock/disableメソッドを提供します。 🎜🎜主なコンセプトはこの 3 つで、これ以上の拡張はありません。3 つのオブジェクトのデザイン コードの行数は約 1,200 行で、1 週間にわたって断続的に見ました。(´ཀ`‖ ∠) ）。これら 3 つの逆シーケンスから始めて、そのデザインを分析してみましょう。 🎜
🎜jQuery.CallbacksオブジェクトCallbacksオブジェクト。コールバック関数の管理に使用される多目的リストです。 6 つの主要なメソッドが提供されます: 🎜- 🎜
add: コールバック関数をリストに追加します 🎜 - 🎜 Remove: リスト内のコールバック関数を削除します🎜
- 🎜
empty: リスト内のコールバック関数をクリアします🎜 - 🎜
fire: リスト内のコールバック関数を順番に実行します🎜 - 🎜
lock: リストをロックし、すべての操作を禁止し、データをクリアしますが、キャッシュされた環境変数は保持します(memoryパラメーターが使用されている場合にのみ役立ちます) 🎜 - 🎜
disable: コールバック リストを無効にし、すべてのデータをクリアします🎜 ol> 🎜初期化中、スペースで区切られた 4 つのパラメータがサポートされます: 🎜 - 🎜
once: コールバック リストは順番にのみ実行されます🎜 - 🎜
memory: キャッシュ実行環境、新しいコールバックの追加時に 1 回実行 🎜 - 🎜
unique: 重複排除、それぞれ関数はすべて異なります (参照アドレスを参照) 🎜 - 🎜
stopOnFalse: 呼び出し中に、前の関数がfalseを返した場合、後続のリストは実行は中断されます 🎜 - 🎜
Done: 操作が正常に応答したときのコールバック関数 (同期または非同期、以下同じ) 🎜 fail: 操作失败响应时的回调函数progress: 操作处理过程中的回调函数resolve: 通过该方法解析该操作为成功状态，调用donereject: 通过该方法解析该操作为失败状态，调用failnotify: 通过该方法解析该操作为执行过程中，调用progressthen: 设置回调的简写，接收三个参数，分别是done/fail/progressalways: 设置必须执行的回调，无论是done还是failpromise: 返回一个受限制的Deferred对象，不允许外部直接改变完成状态
// 我们封装Deferred产生一个promise对象，其不能被外部手动解析，只能内部确定最终状态 asynPromise = function () { let d = $.Deferred(); (function timer() { setTimeout(function () { // 产生随机数，代替解析结果，来确定本次的状态 let num = Math.random(); if (num > 0.9) { d.resolve(); // 解析成功 } else if (num < 0.1) { d.reject(); // 解析失败 } else { d.notify(); // 解析过程中 } setTimeout(timer, 1000); // 持续不断的解析数据 }, 1000); })(); // 如果不返回promise对象，则可以被外部手动调整解析状态 return d.promise(); }; // then方法的三个参数分别代表完成、失败、过程中的回调函数 asynPromise().then(function () { console.log('resolve success'); }, function () { console.log('reject fail'); }, function () { console.log('notify progress'); }); // 本地执行结果（每个人的不一样，随机分布，但最后一个一定是success或fail） notify progress notify progress notify progress notify progress notify progress reject fail // 后面不会再有输出，因为一旦解析状态为success或fail，则不会再改变🎜 上記の主な関数に加えて、has/locked/ などの補助関数も提供します。無効/fireWith/fired関数。 🎜🎜そのすべてのソース コード実装とコメントは次のとおりです: 🎜Deferred: function( func ) { var tuples = [ // action, add listener, callbacks, // ... .then handlers, argument index, [final state] // 用于后面进行第一个参数绑定调用第二个参数，第三个和第四个参数分别是其不同的回调函数队列 [ "notify", "progress", jQuery.Callbacks( "memory" ), jQuery.Callbacks( "memory" ), 2 ], [ "resolve", "done", jQuery.Callbacks( "once memory" ), jQuery.Callbacks( "once memory" ), 0, "resolved" ], [ "reject", "fail", jQuery.Callbacks( "once memory" ), jQuery.Callbacks( "once memory" ), 1, "rejected" ] ], state = "pending", promise = { state: function() { return state; }, // 同时添加done和fail句柄 always: function() { deferred.done( arguments ).fail( arguments ); return this; }, "catch": function( fn ) { return promise.then( null, fn ); }, then: function( onFulfilled, onRejected, onProgress ) { var maxDepth = 0; function resolve( depth, deferred, handler, special ) { return function() { var that = this, args = arguments, mightThrow = function() { var returned, then; // Support: Promises/A+ section 2.3.3.3.3 // https://promisesaplus.com/#point-59 // Ignore double-resolution attempts if ( depth < maxDepth ) { return; } returned = handler.apply( that, args ); // Support: Promises/A+ section 2.3.1 // https://promisesaplus.com/#point-48 if ( returned === deferred.promise() ) { throw new TypeError( "Thenable self-resolution" ); } // Support: Promises/A+ sections 2.3.3.1, 3.5 // https://promisesaplus.com/#point-54 // https://promisesaplus.com/#point-75 // Retrieve `then` only once then = returned && // Support: Promises/A+ section 2.3.4 // https://promisesaplus.com/#point-64 // Only check objects and functions for thenability ( typeof returned === "object" || typeof returned === "function" ) && returned.then; // Handle a returned thenable if ( jQuery.isFunction( then ) ) { // Special processors (notify) just wait for resolution if ( special ) { then.call( returned, resolve( maxDepth, deferred, Identity, special ), resolve( maxDepth, deferred, Thrower, special ) ); // Normal processors (resolve) also hook into progress } else { // ...and disregard older resolution values maxDepth++; then.call( returned, resolve( maxDepth, deferred, Identity, special ), resolve( maxDepth, deferred, Thrower, special ), resolve( maxDepth, deferred, Identity, deferred.notifyWith ) ); } // Handle all other returned values } else { // Only substitute handlers pass on context // and multiple values (non-spec behavior) if ( handler !== Identity ) { that = undefined; args = [ returned ]; } // Process the value(s) // Default process is resolve ( special || deferred.resolveWith )( that, args ); } }, // Only normal processors (resolve) catch and reject exceptions // 只有普通的process能处理异常，其余的要进行捕获，这里不是特别明白，应该是因为没有改最终的状态吧 process = special ? mightThrow : function() { try { mightThrow(); } catch ( e ) { if ( jQuery.Deferred.exceptionHook ) { jQuery.Deferred.exceptionHook( e, process.stackTrace ); } // Support: Promises/A+ section 2.3.3.3.4.1 // https://promisesaplus.com/#point-61 // Ignore post-resolution exceptions if ( depth + 1 >= maxDepth ) { // Only substitute handlers pass on context // and multiple values (non-spec behavior) if ( handler !== Thrower ) { that = undefined; args = [ e ]; } deferred.rejectWith( that, args ); } } }; // Support: Promises/A+ section 2.3.3.3.1 // https://promisesaplus.com/#point-57 // Re-resolve promises immediately to dodge false rejection from // subsequent errors if ( depth ) { process(); } else { // Call an optional hook to record the stack, in case of exception // since it's otherwise lost when execution goes async if ( jQuery.Deferred.getStackHook ) { process.stackTrace = jQuery.Deferred.getStackHook(); } window.setTimeout( process ); } }; } return jQuery.Deferred( function( newDefer ) { // progress_handlers.add( ... ) tuples[ 0 ][ 3 ].add( resolve( 0, newDefer, jQuery.isFunction( onProgress ) ? onProgress : Identity, newDefer.notifyWith ) ); // fulfilled_handlers.add( ... ) tuples[ 1 ][ 3 ].add( resolve( 0, newDefer, jQuery.isFunction( onFulfilled ) ? onFulfilled : Identity ) ); // rejected_handlers.add( ... ) tuples[ 2 ][ 3 ].add( resolve( 0, newDefer, jQuery.isFunction( onRejected ) ? onRejected : Thrower ) ); } ).promise(); }, // Get a promise for this deferred // If obj is provided, the promise aspect is added to the object // 通过该promise对象返回一个新的扩展promise对象或自身 promise: function( obj ) { return obj != null ? jQuery.extend( obj, promise ) : promise; } }, deferred = {}; // Add list-specific methods // 给promise添加done/fail/progress事件，并添加互相的影响关系，并为deferred对象添加3个事件函数notify/resolve/reject jQuery.each( tuples, function( i, tuple ) { var list = tuple[ 2 ], stateString = tuple[ 5 ]; // promise.progress = list.add // promise.done = list.add // promise.fail = list.add promise[ tuple[ 1 ] ] = list.add; // Handle state // 只有done和fail有resolved和rejected状态字段，给两个事件添加回调，禁止再次done或者fail，锁住progress不允许执行回调 if ( stateString ) { list.add( function() { // state = "resolved" (i.e., fulfilled) // state = "rejected" state = stateString; }, // rejected_callbacks.disable // fulfilled_callbacks.disable tuples[ 3 - i ][ 2 ].disable, // progress_callbacks.lock tuples[ 0 ][ 2 ].lock ); } // progress_handlers.fire // fulfilled_handlers.fire // rejected_handlers.fire // 执行第二个回调列表 list.add( tuple[ 3 ].fire ); // deferred.notify = function() { deferred.notifyWith(...) } // deferred.resolve = function() { deferred.resolveWith(...) } // deferred.reject = function() { deferred.rejectWith(...) } // 绑定notify/resolve/reject的事件，实际执行的函数体为加入上下文的With函数 deferred[ tuple[ 0 ] ] = function() { deferred[ tuple[ 0 ] + "With" ]( this === deferred ? undefined : this, arguments ); return this; }; // deferred.notifyWith = list.fireWith // deferred.resolveWith = list.fireWith // deferred.rejectWith = list.fireWith deferred[ tuple[ 0 ] + "With" ] = list.fireWith; } ); // Make the deferred a promise // 将deferred扩展为一个promise对象 promise.promise( deferred ); // Call given func if any // 在创建前执行传入的回调函数进行修改 if ( func ) { func.call( deferred, deferred ); } // All done! return deferred; },
🎜jQuery.DeferredオブジェクトjQuery.Deferredオブジェクトは、非同期または同期で呼び出されるユーザーのdeferredオブジェクトは、チェーン呼び出しとコールバック関数キューをサポートし、返されたさまざまな状態に応じてさまざまなコールバックを実行できます。これは、ES6によって提供されるPromiseオブジェクトに似ており、次の 9 つの主要なメソッドを提供します: 🎜它的实现思想是创建一个对象，包含不同状态下回调函数的队列，并在状态为失败或成功后不允许再次改变。通过返回的
Deferred对象进行手动调用resolve/reject/notify方法来控制流程。看一个实例（纯属胡扯，不要当真）。我们需要从间谍卫星返回的数据用不同的算法来进行解析，如果解析结果信号强度大于90%，则证明该数据有效，可以被解析；如果强度小于10%，则证明只是宇宙噪音；否则，证明数据可能有效，换一种算法解析：
// 我们封装Deferred产生一个promise对象，其不能被外部手动解析，只能内部确定最终状态 asynPromise = function () { let d = $.Deferred(); (function timer() { setTimeout(function () { // 产生随机数，代替解析结果，来确定本次的状态 let num = Math.random(); if (num > 0.9) { d.resolve(); // 解析成功 } else if (num < 0.1) { d.reject(); // 解析失败 } else { d.notify(); // 解析过程中 } setTimeout(timer, 1000); // 持续不断的解析数据 }, 1000); })(); // 如果不返回promise对象，则可以被外部手动调整解析状态 return d.promise(); }; // then方法的三个参数分别代表完成、失败、过程中的回调函数 asynPromise().then(function () { console.log('resolve success'); }, function () { console.log('reject fail'); }, function () { console.log('notify progress'); }); // 本地执行结果（每个人的不一样，随机分布，但最后一个一定是success或fail） notify progress notify progress notify progress notify progress notify progress reject fail // 后面不会再有输出，因为一旦解析状态为success或fail，则不会再改变除了上面的主要功能，还提供了
notifyWith/resolveWith/rejectWith/state辅助方法。其所有的源码实现和注释为：
Deferred: function( func ) { var tuples = [ // action, add listener, callbacks, // ... .then handlers, argument index, [final state] // 用于后面进行第一个参数绑定调用第二个参数，第三个和第四个参数分别是其不同的回调函数队列 [ "notify", "progress", jQuery.Callbacks( "memory" ), jQuery.Callbacks( "memory" ), 2 ], [ "resolve", "done", jQuery.Callbacks( "once memory" ), jQuery.Callbacks( "once memory" ), 0, "resolved" ], [ "reject", "fail", jQuery.Callbacks( "once memory" ), jQuery.Callbacks( "once memory" ), 1, "rejected" ] ], state = "pending", promise = { state: function() { return state; }, // 同时添加done和fail句柄 always: function() { deferred.done( arguments ).fail( arguments ); return this; }, "catch": function( fn ) { return promise.then( null, fn ); }, then: function( onFulfilled, onRejected, onProgress ) { var maxDepth = 0; function resolve( depth, deferred, handler, special ) { return function() { var that = this, args = arguments, mightThrow = function() { var returned, then; // Support: Promises/A+ section 2.3.3.3.3 // https://promisesaplus.com/#point-59 // Ignore double-resolution attempts if ( depth < maxDepth ) { return; } returned = handler.apply( that, args ); // Support: Promises/A+ section 2.3.1 // https://promisesaplus.com/#point-48 if ( returned === deferred.promise() ) { throw new TypeError( "Thenable self-resolution" ); } // Support: Promises/A+ sections 2.3.3.1, 3.5 // https://promisesaplus.com/#point-54 // https://promisesaplus.com/#point-75 // Retrieve `then` only once then = returned && // Support: Promises/A+ section 2.3.4 // https://promisesaplus.com/#point-64 // Only check objects and functions for thenability ( typeof returned === "object" || typeof returned === "function" ) && returned.then; // Handle a returned thenable if ( jQuery.isFunction( then ) ) { // Special processors (notify) just wait for resolution if ( special ) { then.call( returned, resolve( maxDepth, deferred, Identity, special ), resolve( maxDepth, deferred, Thrower, special ) ); // Normal processors (resolve) also hook into progress } else { // ...and disregard older resolution values maxDepth++; then.call( returned, resolve( maxDepth, deferred, Identity, special ), resolve( maxDepth, deferred, Thrower, special ), resolve( maxDepth, deferred, Identity, deferred.notifyWith ) ); } // Handle all other returned values } else { // Only substitute handlers pass on context // and multiple values (non-spec behavior) if ( handler !== Identity ) { that = undefined; args = [ returned ]; } // Process the value(s) // Default process is resolve ( special || deferred.resolveWith )( that, args ); } }, // Only normal processors (resolve) catch and reject exceptions // 只有普通的process能处理异常，其余的要进行捕获，这里不是特别明白，应该是因为没有改最终的状态吧 process = special ? mightThrow : function() { try { mightThrow(); } catch ( e ) { if ( jQuery.Deferred.exceptionHook ) { jQuery.Deferred.exceptionHook( e, process.stackTrace ); } // Support: Promises/A+ section 2.3.3.3.4.1 // https://promisesaplus.com/#point-61 // Ignore post-resolution exceptions if ( depth + 1 >= maxDepth ) { // Only substitute handlers pass on context // and multiple values (non-spec behavior) if ( handler !== Thrower ) { that = undefined; args = [ e ]; } deferred.rejectWith( that, args ); } } }; // Support: Promises/A+ section 2.3.3.3.1 // https://promisesaplus.com/#point-57 // Re-resolve promises immediately to dodge false rejection from // subsequent errors if ( depth ) { process(); } else { // Call an optional hook to record the stack, in case of exception // since it's otherwise lost when execution goes async if ( jQuery.Deferred.getStackHook ) { process.stackTrace = jQuery.Deferred.getStackHook(); } window.setTimeout( process ); } }; } return jQuery.Deferred( function( newDefer ) { // progress_handlers.add( ... ) tuples[ 0 ][ 3 ].add( resolve( 0, newDefer, jQuery.isFunction( onProgress ) ? onProgress : Identity, newDefer.notifyWith ) ); // fulfilled_handlers.add( ... ) tuples[ 1 ][ 3 ].add( resolve( 0, newDefer, jQuery.isFunction( onFulfilled ) ? onFulfilled : Identity ) ); // rejected_handlers.add( ... ) tuples[ 2 ][ 3 ].add( resolve( 0, newDefer, jQuery.isFunction( onRejected ) ? onRejected : Thrower ) ); } ).promise(); }, // Get a promise for this deferred // If obj is provided, the promise aspect is added to the object // 通过该promise对象返回一个新的扩展promise对象或自身 promise: function( obj ) { return obj != null ? jQuery.extend( obj, promise ) : promise; } }, deferred = {}; // Add list-specific methods // 给promise添加done/fail/progress事件，并添加互相的影响关系，并为deferred对象添加3个事件函数notify/resolve/reject jQuery.each( tuples, function( i, tuple ) { var list = tuple[ 2 ], stateString = tuple[ 5 ]; // promise.progress = list.add // promise.done = list.add // promise.fail = list.add promise[ tuple[ 1 ] ] = list.add; // Handle state // 只有done和fail有resolved和rejected状态字段，给两个事件添加回调，禁止再次done或者fail，锁住progress不允许执行回调 if ( stateString ) { list.add( function() { // state = "resolved" (i.e., fulfilled) // state = "rejected" state = stateString; }, // rejected_callbacks.disable // fulfilled_callbacks.disable tuples[ 3 - i ][ 2 ].disable, // progress_callbacks.lock tuples[ 0 ][ 2 ].lock ); } // progress_handlers.fire // fulfilled_handlers.fire // rejected_handlers.fire // 执行第二个回调列表 list.add( tuple[ 3 ].fire ); // deferred.notify = function() { deferred.notifyWith(...) } // deferred.resolve = function() { deferred.resolveWith(...) } // deferred.reject = function() { deferred.rejectWith(...) } // 绑定notify/resolve/reject的事件，实际执行的函数体为加入上下文的With函数 deferred[ tuple[ 0 ] ] = function() { deferred[ tuple[ 0 ] + "With" ]( this === deferred ? undefined : this, arguments ); return this; }; // deferred.notifyWith = list.fireWith // deferred.resolveWith = list.fireWith // deferred.rejectWith = list.fireWith deferred[ tuple[ 0 ] + "With" ] = list.fireWith; } ); // Make the deferred a promise // 将deferred扩展为一个promise对象 promise.promise( deferred ); // Call given func if any // 在创建前执行传入的回调函数进行修改 if ( func ) { func.call( deferred, deferred ); } // All done! return deferred; },jQuery.when方法$.when()提供一种方法执行一个或多个函数的回调函数。如果传入一个延迟对象，则返回该对象的Promise对象，可以继续绑定其余回调，在执行结束状态之后也同时调用其when回调函数。如果传入多个延迟对象，则返回一个新的master延迟对象，跟踪所有的聚集状态，如果都成功解析完成，才调用其when回调函数；如果有一个失败，则全部失败，执行错误回调。其使用方法：
$.when($.ajax("/page1.php"), $.ajax("/page2.php")) .then(myFunc, myFailure);其所有源码实现和注释为（能力有限，有些地方实在不能准确理解执行流程）：
// 给when传递的对象绑定master.resolve和master.reject，用于聚集多异步对象的状态 function adoptValue( value, resolve, reject, noValue ) { var method; try { // Check for promise aspect first to privilege synchronous behavior // 如果when传入的参数promise方法可用，则封装promise并添加done和fail方法调用resolve和reject if ( value && jQuery.isFunction( ( method = value.promise ) ) ) { method.call( value ).done( resolve ).fail( reject ); // Other thenables // 否则，就判断传入参数的then方法是否可用，如果可用就传入resolve和reject方法 } else if ( value && jQuery.isFunction( ( method = value.then ) ) ) { method.call( value, resolve, reject ); // Other non-thenables // 如果均不可用，则为非异步对象，直接resolve解析原值 } else { // Control `resolve` arguments by letting Array#slice cast boolean `noValue` to integer: // * false: [ value ].slice( 0 ) => resolve( value ) // * true: [ value ].slice( 1 ) => resolve() resolve.apply( undefined, [ value ].slice( noValue ) ); } // For Promises/A+, convert exceptions into rejections // Since jQuery.when doesn't unwrap thenables, we can skip the extra checks appearing in // Deferred#then to conditionally suppress rejection. } catch ( value ) { // Support: Android 4.0 only // Strict mode functions invoked without .call/.apply get global-object context // 一个安卓4.0的bug，这里不做阐释 reject.apply( undefined, [ value ] ); } } // Deferred helper when: function( singleValue ) { var // count of uncompleted subordinates remaining = arguments.length, // count of unprocessed arguments i = remaining, // subordinate fulfillment data resolveContexts = Array( i ), resolveValues = slice.call( arguments ), // the master Deferred master = jQuery.Deferred(), // subordinate callback factory // 将每一个响应的环境和值都保存到列表里，在全部完成后统一传给主Promise用于执行 updateFunc = function( i ) { return function( value ) { resolveContexts[ i ] = this; resolveValues[ i ] = arguments.length > 1 ? slice.call( arguments ) : value; if ( !( --remaining ) ) { master.resolveWith( resolveContexts, resolveValues ); } }; }; // Single- and empty arguments are adopted like Promise.resolve // 如果只有一个参数，则直接将其作为master的回调 if ( remaining <= 1 ) { adoptValue( singleValue, master.done( updateFunc( i ) ).resolve, master.reject, !remaining ); // Use .then() to unwrap secondary thenables (cf. gh-3000) if ( master.state() === "pending" || jQuery.isFunction( resolveValues[ i ] && resolveValues[ i ].then ) ) { return master.then(); } } // Multiple arguments are aggregated like Promise.all array elements // 多参数时，进行所有参数的解析状态聚合到master上 while ( i-- ) { adoptValue( resolveValues[ i ], updateFunc( i ), master.reject ); } return master.promise(); }后续
本来想把
jQuery.Deferred和jQuery.ajax以及ES6的Promise对象给统一讲一下，结果发现牵涉的东西太多，每一个都可以单独写一篇文章，怕大家说太长不看，这里先写第一部分jQuery.Deferred吧，后续再补充另外两篇。看
jQuery的文档很容易，使用也很方便，但其实真正想要讲好很复杂，更不要说写篇源码分析文章了。真的是努力理解设计者的思路，争取每行都能理解边界条件，但踩坑太少，应用场景太少，确实有很大的疏漏，希望大家能够理解，不要偏听一面之词。
- 🎜
以上がDeferred非同期オブジェクトのjQueryソースコード解析方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。