JavaScript_javascript スキルで非同期プログラミング パターンを実装する 4 つの方法

JavaScript言語の実行環境は「シングルスレッド」であることはご存知かと思います。

いわゆる「シングルスレッド」とは、一度に 1 つのタスクのみを完了できることを意味します。複数のタスクがある場合は、それらをキューに入れる必要があり、前のタスクが完了したら、次のタスクが実行されます。

このモードの利点は、実装が比較的簡単で、実行環境が比較的シンプルであることです。欠点は、1 つのタスクに時間がかかると、後続のタスクをキューに入れる必要があり、実行が遅れることです。プログラム全体の。一般的なブラウザの応答不能 (サスペンドデス) は、特定の Javascript コードが長時間実行される (無限ループなど) ことが原因で発生することが多く、その結果、ページ全体がその場所でスタックし、他のタスクが実行できなくなります。

この問題を解決するために、JavaScript 言語ではタスクの実行モードを同期 (Synchronous) と非同期 (Asynchronous) の 2 種類に分けています。

「同期モード」は、前の段落で説明したモードであり、後者のタスクは、前のタスクの終了を待ってから実行されます。「非同期モード」は、プログラムの実行順序が一致しており、タスクの順序と同期しています。各タスクには 1 つ以上のコールバック関数 (callback) があり、前のタスクが終了すると次のタスクは実行されませんが、前のタスクの終了を待たずに後のタスクが実行されます。プログラムの実行順序に一貫性がなく、タスクの順序と非同期です。

「非同期モード」は非常に重要です。ブラウザー側では、ブラウザーが応答しなくなることを避けるために、長時間実行される操作を非同期で実行する必要があります。その最良の例は Ajax 操作です。サーバー側では、実行環境がシングルスレッドであるため、すべての http リクエストの同期実行が許可されると、サーバーのパフォーマンスが急激に低下し、すぐに応答が失われます。

この記事では、「非同期モード」プログラミングの 4 つの方法をまとめています。これらを理解すると、より合理的な構造で、パフォーマンスが向上し、メンテナンスが容易な Javascript プログラムを作成できるようになります。

1. コールバック関数

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

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

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

f1();
f2();

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

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

関数 f1(コールバック){

setTimeout(function () {

// f1 のタスクコード

コールバック();

}, 1000);

}

実行されたコードは次のようになります:

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

f1(f2);

この方法を使用すると、F1 はプログラムの実行をブロックしません。これは、プログラムのメイン ロジックを最初に実行し、時間のかかる操作の実行を延期することと同じです。

コールバック関数の利点は、シンプルで理解しやすく、デプロイしやすいことです。欠点は、コードの読み取りと保守が容易ではないことです。プロセスは高度に結合されています。非常にわかりにくく、各タスクで指定できるコールバック関数は 1 つだけです。

2. イベント監視

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

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

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

f1.on('完了', f2);

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

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

関数 f1(){

setTimeout(function () {

// f1 のタスクコード

f1.trigger('done');

}, 1000);

}

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

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

3. 公開/購読

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

特定のタスクが実行されると、シグナル センターにシグナルを「発行」し、他のタスクがシグナル センターからのシグナルを「サブスクライブ」できることを前提としています。自分で実行を開始します。これは「パブリッシュ・サブスクライブ・パターン」（パブリッシュ・サブスクライブ・パターン）と呼ばれ、「オブザーバー・パターン」（オブザーバー・パターン）とも呼ばれます。

このパターンには多くの実装があります。以下で使用するものは、jQuery のプラグインである Ben Alman の Tiny Pub/Sub です。

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

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

jQuery.subscribe("完了", f2);

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

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

関数 f1(){

setTimeout(function () {

// f1 のタスクコード

jQuery.publish("done");

}, 1000);

}

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

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

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

jQuery.unsubscribe("完了", f2);

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

4. 約束オブジェクト

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

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

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

f1().then(f2);

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

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

関数 f1(){

var dfd = $.Deferred();

setTimeout(function () {

// f1 のタスクコード

dfd.resolve();

}, 500);

dfd.promise を返します;

}

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

たとえば、複数のコールバック関数を指定します:

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

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

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

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

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

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