JavaScript で非同期プログラミング パターンを実装する方法

JavaScript で非同期プログラミング モードを実装する方法: 1. 非同期プログラミングの最も基本的な方法であるコールバック関数、2. イベント リスニング、3. パブリッシュまたはサブスクライブ、4. Promises オブジェクト。

このチュートリアルの動作環境: Windows 7 システム、JavaScript バージョン 1.8.5、DELL G3 コンピューター。

JavaScript で非同期プログラミング モードを実装する方法:

1. コールバック関数

これは非同期の最も基本的なものです。プログラミング手法。

2 つの関数 f1 と f2 があり、後者は前者の実行結果を待つとします。

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

f1();
f2();

f1 が時間のかかるタスクである場合は、f1 を書き換えて、f1 のコールバック関数として f2 を記述することを検討できます。

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

　　function f1(callback){
　　　　setTimeout(function () {
　　　　　　// f1的任务代码
　　　　　　callback();
　　　　}, 1000);
　　}

実行コードは次のとおりです:

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

　　f1(f2);

このようにして、同期操作を非同期操作に変更します。F1 キーはプログラムの実行をブロックしません。これは、プログラムのメイン ロジックを最初に実行し、時間のかかる操作の実行を延期するのと同じです。

コールバック関数の利点は、シンプルで理解しやすく、デプロイしやすいことです。欠点は、コードの読み取りと保守に役立たないことです。さまざまな部分が高度に結合 (結合) されており、処理は非常に混乱し、各タスクはコールバック関数のみを指定できます。

2. イベント監視

もう 1 つの考え方は、イベント駆動型モデルを使用することです。タスクの実行はコードの順序ではなく、イベントが発生するかどうかによって決まります。

f1 と f2 を例に挙げてみましょう。まず、イベントを f1 にバインドします (ここでは jQuery を使用します)。

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

　　f1.on('done', f2);

上記のコード行は、done イベントが f1 で発生すると、f2 が実行されることを意味します。次に、f1 を書き換えます:

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

　　function f1(){
　　　　setTimeout(function () {
　　　　　　// f1的任务代码
　　　　　　f1.trigger('done');
　　　　}, 1000);
　　}

f1.trigger('done') は、実行が完了すると、done イベントがすぐにトリガーされ、開始されることを意味します。 f2を実行します。

この方法の利点は、比較的理解しやすいこと、複数のイベントをバインドできること、各イベントに複数のコールバック関数を指定できること、「分離」(デカップリング)できるため、モジュール化が容易であることです。欠点は、プログラム全体をイベント駆動型にする必要があり、実行プロセスが非常に不明確になることです。

3. パブリッシュ/サブスクライブ

前のセクションの「イベント」は「シグナル」として理解できます。

「シグナル センター」があると仮定します。タスクが完了すると、シグナル センターにシグナルを「発行」します。他のタスクはシグナル センターに「サブスクライブ」できます。実行を開始できます。これは「パブリッシュ/サブスクライブ パターン」(パブリッシュ/サブスクライブ パターン) と呼ばれ、「オブザーバー パターン」(オブザーバー パターン) とも呼ばれます。

このパターンの実装は多数ありますが、次に示すのは、jQuery のプラグインである Ben Alman の Tiny Pub/Sub です。

まず、f2 は「Signal Center」jQuery からの「done」シグナルをサブスクライブします。

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

　　jQuery.subscribe("done", f2);

次に、f1 は次のように書き換えられます:

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

　　function f1(){
　　　　setTimeout(function () {
　　　　　　// f1的任务代码
　　　　　　jQuery.publish("done");
　　　　}, 1000);
　　}

jQuery.publish( "done") は、f1 の実行が完了した後、"done" 信号が "シグナル センター" jQuery に解放され、それによって f2 の実行がトリガーされることを意味します。

また、f2 の実行完了後に購読を解除することもできます。

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

　　jQuery.unsubscribe("done", f2);

このメソッドの性質は「イベント リスニング」に似ていますが、明らかに後者よりも優れています。なぜなら、「メッセージ センター」を見て、存在するシグナルの数と各シグナルの加入者数を確認することで、プログラムの動作を監視できるからです。

4. Promises オブジェクト

Promises オブジェクトは、非同期プログラミング用の統一インターフェイスを提供するために CommonJS ワーキング グループによって提案された仕様です。

簡単に言えば、各非同期タスクが Promise オブジェクトを返し、そのオブジェクトにはコールバック関数を指定できる then メソッドがあるという考え方です。たとえば、f1 のコールバック関数 f2 は次のように記述できます:

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

　　f1().then(f2);

f1 は次のように書き換える必要があります (ここでは jQuery 実装が使用されています):

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

　　function f1(){
　　　　var dfd = $.Deferred();
　　　　setTimeout(function () {
　　　　　　// f1的任务代码
　　　　　　dfd.resolve();
　　　　}, 500);
　　　　return dfd.promise;
　　}

この方法で記述する利点は、コールバック関数がチェーン記述メソッドになること、プログラム フローが明確に見えること、および完全なセットがあることです。多くの強力な機能を実現できるメソッドをサポートします。

例: 複数のコールバック関数を指定します:

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

　　f1().then(f2).then(f3);

別の例、エラー発生時のコールバック関数を指定します:

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

　　f1().then(f2).fail(f3);

さらに、これには、前の 3 つのメソッドにはない利点があります。タスクが完了し、コールバック関数が追加された場合、コールバック関数がすぐに実行されます。そのため、イベントや信号を見逃すことを心配する必要はありません。この方法の欠点は、書くのも理解するのも比較的難しいことです。

関連する無料学習の推奨事項: JavaScript ビデオ チュートリアル

以上がJavaScript で非同期プログラミング パターンを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。