JavaScript オブザーバーのパターン定義と DOM イベント インスタンスの詳細な説明

オブザーバー パターン (パブリッシュ/サブスクライブ パターン): オブジェクト間の 1 対多の依存関係を定義します。オブジェクトの状態が変化すると、それに依存するすべてのオブジェクトに通知されます。

JavaScript では、通常、イベント モデルは従来のオブザーバー パターンを置き換えるために使用されます。
利点:

(1) は非同期プログラミングで広く使用でき、コールバック関数を渡す代わりに使用できます。

(2) は、オブジェクト間のハードコーディングされた通知メカニズムを置き換えることができ、あるオブジェクトが別のオブジェクトのインターフェイスを明示的に呼び出す必要がなくなりました。 2 つのオブジェクトは簡単に分離できます。

DOM イベント – オブザーバー パターンの典型的な例

ユーザーによる document.body のクリックを監視する必要がありますが、ユーザーがいつクリックするかを予測する方法はありません。
そこで、document.body の click イベントをサブスクライブします。body ノードがクリックされると、body ノードはこのメッセージをサブスクライバーに発行します。

document.body.addEventListener("click", function() {
  console.log(1);
}, false);

// 可以多个订阅者
document.body.addEventListener("click", function() {
  console.log(2);
}, false);

doucment.body.click();

特定の Web サイトには、ヘッダー、ナビゲーション ナビゲーション、メッセージ リスト、その他のモジュールがあります。これらのモジュールをレンダリングするには、ユーザーのログイン情報を取得する必要があります。
(1) 一般的な書き方:

$.ajax({
  url: './login',
  type: 'post',
  contentType: 'application/json',
  dataType:'json',
  success: function(data) {
    if(data.status === "success") {
      // 登录成功，渲染header、nav
      header.setInfo(data.headerInfo);
      nav.setInfo(data.navInfo);
    }
  }
});

(2) オブザーバーパターンを使うと切り離しが簡単です！

以上がJavaScript オブザーバーのパターン定義と DOM イベント インスタンスの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。