オブザーバー パターン (パブリッシャー/サブスクライバー パターンとも呼ばれます) は、私たちが普段使用する dom イベントを含め、最も一般的に使用されているパターンの 1 つです。と dom オブザーバー パターン。
div.onclick = 関数 click (){
アラート (「クリック」)
}
div の click イベントをサブスクライブしている限り、div がクリックされると、関数のクリックがトリガーされます。
それでは、観察者のパターンとは何でしょうか? まず、人生における観察者のパターンを見てみましょう。
ハリウッドには「電話しないでください、私が電話します。」という有名な言葉があります。この文は観察者パターンの詳細を説明しています。 ここで、「私」は発行者、「あなた」は購読者です。
別の例として、私が面接のためにその会社に来たとき、面接の後にどの面接官も私にこう言いました。「連絡先を残してください。何かニュースがあればお知らせします。」 ここで「私」は購読者であり、インタビュアーは発行者です。したがって、面接の結果について毎日または毎時間尋ねる必要はありません。コミュニケーションの主導権は面接官にあります。そして、連絡先情報を提供する必要があるだけです。
オブザーバー パターンは、2 つのモジュール間の分離を適切に実現できます。 チームで HTML5 ゲームを開発しているとします。ゲームの開始時に、いくつかの画像素材を読み込む必要があります。これらのイメージをロードした後、ゲーム ロジックが実行されます。これは複数人の協力が必要なプロジェクトであるとします。私が Gamer モジュールと Map モジュールを完成させ、同僚 A がイメージ ローダーのloadImage を作成したとします。
loadImage のコードは次のとおりです:
loadImage( imgAry, function(){
Map.init();
Gamer.init();
} )
画像がロードされた後、マップがレンダリングされ、ゲーム ロジックが実行されます。このプログラムは、ある日突然、ゲームにサウンド関数を追加する必要があることを思い出しました。画像ローダー。
loadImage( imgAry, function(){
Map.init();
Gamer.init();
Sount.init();
} )
しかし、このモジュールを作成した同僚 A が海外旅行に行ったので、こんにちは。loadImage 関数はどこにありますか? ご想像のとおり、変更後の副作用はありますか?不安なことが起こりました。
のように書くことができたらどうでしょうか。
loadImage.listen( ”準備完了”, function(){
Map.init();
})
loadImage.listen( ”準備完了”, function(){
Gamer.init();
})
loadImage.listen( ”準備完了”, function(){
Sount.init();
})
loadImage が完了したら、その作業は完了しているため、その後何が起こるかは気にしません。次に必要なのはシグナルを発行することだけです。
loadImage.trigger( ”準備完了” );
その後、loadImage の「ready」イベントをリッスンするオブジェクトに通知が行われます。面接者は、面接結果を受け取った後にどこに食事に行くかについてはまったく気にしません。面接の実施のため、候補者の履歴書を集めてください。面接の結果が出たら、履歴書に記載されている電話番号に従って個別に通知されます。
非常に多くの概念について話した後、具体的な実装を説明しましょう。実装プロセスは実際には非常に簡単です。面接官は履歴書を箱に入れ、面接官に 1 人ずつ電話をかけます。結果を知らせるのに最適な時期です
コードをコピー コードは次のとおりです:
イベント = function() {
var listen、log、obj、one、remove、trigger、__this;
obj = {};
__this = これ;
listen = function( key,eventfn ) { //履歴書をボックスに放り込んでください。キーは連絡先情報です。
var stack, _ref; // スタックはボックスです
stack = ( _ref = obj[key] ) != null : obj[key] = [];
return stack.push(eventfn);
};
one = function(key,eventfn){
削除(キー);
return listen( key,eventfn );
};
削除 = function( key ) {
var _ref;
return ( _ref = obj[key] ) != null _ref.length = 0 : void 0;
};
trigger = function() { //面接官が面接官に通知するために電話をかけます
var fn、スタック、_i、_len、_ref、キー;
key = Array.prototype.shift.call( 引数 );
stack = ( _ref = obj[ key ] ) != null : obj[ key ] = [];
for ( _i = 0, _len = stack.length; _i
fn = stack[_i ];
if ( fn.apply( __this, argument ) === false) {
false を返します;
}
}
戻り値 {
聞いてください: 聞いてください
1:1、
削除: 削除、
トリガー: トリガー
}
}
最後に、オブザーバー モードを使用して、小さなアダルト TV アプリケーションを作成します。
//購読者
var AdultTv = イベント();
アダルトテレビ .listen( ”play', function( data ){
alert (「今日は誰の映画ですか」 data.name );
});
//発行者:
AdultTv .trigger( ”play', { 'name': '麻生希' } )
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
