ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。