JavaScript 非同期呼び出しフレームワーク (パート 3 - コード実装)_JavaScript スキル

クラス構造
まず、シェルフを設定し、使用する必要があるすべての変数をリストします。コールバック関数リストを保存するには配列が必要です。また、非同期操作が完了したかどうかを示すフラグも必要です。また、IAsyncResult を学習して、非同期操作の実装者がカスタム実行ステータスを公開できるようにすることもできます。 add a 変数は非同期操作の結果を保持します。

コードをコピー コードは次のとおりです:

Async = {
操作: {
var callbackQueue = [];
this.result = 未定義;
this.completed = false; 🎜>

addCallback メソッド

次に、addCallback メソッドを実装する必要があります。その役割は非常に簡単で、コールバック関数を callbackQueue に入れることです。また、この時点で completed が true の場合、非同期操作が放棄されたことを意味し、このコールバックがすぐに呼び出されます。

コードをコピー

コードは次のとおりです。 this.yield = function(callback) { callbackQueue.push(callback); if (this.completed) {

this.yield(this.result);

return this; 🎜>
yield メソッドは callbackQueue 内のコールバック関数を 1 つずつ取り出して呼び出すことを想定しています。そのため、completed が true の場合は、既存の結果を使用して再度 yield を呼び出すだけで、yield は自然に呼び出します。今回callbackQueueに追加したコールバック関数。
最後の return this; については、jQuery スタイルのチェーン記述を容易にするためのものです。




コードをコピーすることで、複数のコールバック関数を連続して追加できます。

コードは次のとおりです。 >

yield メソッド

最後に、yield メソッドを実装する必要があります。 callbackQueue 内のコールバック関数を 1 つずつ取り出してから、すべてを再度呼び出し、この操作が非同期であることを確認する必要があります。 コードをコピー

コードは次のとおりです。


this.yield = function(result) {

var self = this;
setTimeout(function() { self.result = result; self.state = "completed";
self.completed = true;
while (callbackQueue.length > 0) {

var callback = callbackQueue.shift(); } }; return this; 🎜>} setTimeout を使用することで、yield の実際の操作が非同期であることが保証されます。次に、ユーザーによってオブジェクト プロパティに渡された収量結果と関連ステータスを更新し、最後に callbackQueue を走査してすべてのコールバック関数を呼び出します。

概要

このようにして、単純な JavaScript 非同期呼び出しフレームワークを作成しました。完全なコードは、非同期呼び出しフレームワーク Async.Operation にあります。
このフレームワークは、コール スタックでの同期操作と非同期操作の共存の問題をうまく解決できます。すべての関数が Async.Operation を返すと仮定すると、フレームワークのユーザーは、統一モードを使用してコードを記述し、関数の戻り値を処理できます。この関数が実際に同期的に返すか非同期的に返すかを気にする必要はありません。
複数の非同期関数へのシリアル呼び出しについては、ネストされた addCallback 方式で関数を作成できるようになりましたが、ネスト レベルの数が増加するにつれて、コードはますます見苦しくなります:




コードをコピーします


コードは次のとおりです。

firstAsyncOperation().addCallback(function() {
secondAsyncOperation() .addCallback( function() {
thirdAsyncOperation().addCallback(function() { finalSyncOperation(); });


ネスト形式をjQuery風の連鎖記述に変更することはできますか？関連する議論を見逃したくない場合は、これが次に考えたい質問です。