オブザーバーモード（パブリッシャーサブスクリバーモードとも呼ばれます）は、最も一般的に使用されるモードの1つである必要があります。これは、通常連絡するDOMイベントを含む多くの言語で広く使用されています。また、JSとDOMの間に実装されるオブザーバーモードでもあります。
コードコピーは次のとおりです。
div.onclick = function click（）{
アラート（ "Click '）
}
DIVのクリックイベントを購読する限り、関数クリックがトリガーされます。
では、オブザーバーモードは何ですか？人生のオブザーバーモードを見てみましょう。
ハリウッドには有名なことわざがあります。 「私に電話しないでください、私はあなたに電話します。」この文は、オブザーバーパターンの内と外を説明しています。その中で、「私」は出版社であり、「あなた」はサブスクライバーです。
別の例を挙げましょう。私がインタビューのために会社に来たとき、すべてのインタビュアーは、「連絡先情報を残してください。ニュースがあるかどうかは通知します。」ここに「I」は加入者であり、インタビュアーは出版社です。したがって、私は毎日または1時間ごとにインタビューの結果について尋ねる必要はありません。コミュニケーションのイニシアチブはインタビュアーの手にあります。そして、連絡先情報を提供する必要があります。
オブザーバーモードは、2つのモジュール間のデカップリングを非常によく実現できます。チームでHTML5ゲームを開発していた場合、ゲームが始まったとき、いくつかの画像資料をロードする必要がありました。ゲームロジックは、これらの画像をロードした後にのみ実行されます。これが複数の人と協力することを要求するプロジェクトであると仮定します。ゲーマーとマップモジュールを完成させ、同僚Aは画像ローダーのロードイメージを書きました。
負荷コードは次のとおりです。
コードコピーは次のとおりです。
loadimage（imgary、function（）{
map.init（）;
gamer.init（）;
}）
画像がロードされると、マップがレンダリングされ、ゲームロジックが実行されます。さて、プログラムはうまく実行されています。突然、ある日、私はゲームにサウンド関数を追加する必要があることを思い出しました。画像ローダーにコードの行を追加する必要があります。
コードコピーは次のとおりです。
loadimage（imgary、function（）{
map.init（）;
gamer.init（）;
sount.init（）;
}）
しかし、このモジュールを書いた私の同僚Aは、海外旅行に行きました。だから私は彼に電話した。あなたの負荷機能はどこにありますか？変更できますか？変更後に副作用はありますか？ご想像のとおり、あらゆる種類の不安なことが起こりました。最初にこのように書くことができれば：
コードコピーは次のとおりです。
loadimage.listen（ "ready '、function（）{
map.init（）;
}）
loadimage.listen（ "ready '、function（）{
gamer.init（）;
}）
loadimage.listen（ "ready '、function（）{
sount.init（）;
}）
LoadImageが完了した後、その作業が行われているため、将来何が起こるかは気にしません。次に、信号を公開するだけです。
コードコピーは次のとおりです。
loadimage.trigger（ "ready '）;
その後、「準備ができている」ロードイメージのイベントを聞いた被験者は、通知を受け取ります。最後のインタビューの例のように。インタビュアーは、インタビューの結果を受け取った後、インタビュアーがどこで食事をするかを気にしません。彼は、インタビュアーの履歴書を一緒に収集する責任者のみです。インタビューの結果が発生すると、履歴書の電話番号に従って1つずつ通知します。
非常に多くの概念について話した後、特定の実装を実現できます。実装プロセスは実際には非常に簡単です。インタビュアーは履歴書を箱に投げ込み、インタビュアーは1つずつ電話して結果に適切なタイミングで通知します。
コードコピーは次のとおりです。
events = function（）{
var risten、log、obj、one、削除、トリガー、__ this;
obj = {};
__これ= this;
聞き= function（key、eventfn）{//履歴書をボックスに投げます。キーは連絡先情報です。
var stack、_ref; //スタックはボックスです
stack =（_ref = obj [key]）！= null？ _ref：obj [key] = [];
return stack.push（eventfn）;
};
One = function（key、eventfn）{
削除（key）;
return reath（key、eventfn）;
};
remove = function（key）{
var _ref;
return（_ref = obj [key]）！= null？ _ref.length = 0：void 0;
};
trigger = function（）{//インタビュアーが電話をかけてインタビュアーに通知する
var fn、stack、_i、_len、_ref、key;
key = array.prototype.shift.call（arguments）;
stack =（_ref = obj [key]）！= null？ _ref：obj [key] = [];
for（_i = 0、_len = stack.length; _i <_len; _i ++）{
fn = stack [_i];
if（fn.apply（__ this、arguments）=== false）{
falseを返します。
}
}
戻る {
聞いてください：聞いて、
1つ：1つ、
削除：削除、
トリガー：トリガー
}
}
最後に、オブザーバーモードを使用して、アダルトテレビステーションに小さなアプリケーションを作成します。
コードコピーは次のとおりです。
//購読者
var adulttv = event（）;
adulttv .listen（ "play '、function（data）{
alert（ "foymes today" + data.name）;
}）;
//出版社
adulttv .trigger（ "play '、{' name '：' ki aso '}）