ホームページ > 記事 > ウェブフロントエンド > JavaScript のオブザーバー パターン
今回は、Javascriptのオブザーバーモードと、JavaScriptのオブザーバーモードの注意点について説明します。以下は実際的なケースです。見てみましょう。
オブザーバー (パブリッシュ/サブスクライブとも呼ばれる) パターンは、オブジェクト間の 1 対多の依存関係を定義するため、オブジェクトの状態が変化すると、それに依存するすべてのオブジェクトが通知され、自動的に更新されます。
ユーザーがWebページ上で何らかの操作(クリックなど)を実行するとき、いくつかの所定のイベント(フォーム送信、ページへのジャンプなど)を実行する必要があります
利点:パブリッシャーとサブスクライバー間の結合の軽減
欠点: 弱体化 オブジェクト間の関係がコードの保守と理解に役立たない
実装アイデア
パブリッシャーを決定する
パブリッシャーのキャッシュリストを定義し、ストアするコールバック関数サブスクライバーに通知する
メッセージをパブリッシュし、キャッシュリストを実行するコールバック関数を順番に実行
シンプルな実装
let event = {}; event.list = [];//增加订阅者event.listen = function(fn){ event.list.push(fn); }//发布消息event.trigger = function(){ for(var i = 0,fn; fn = this.list[i++];) { fn.apply(this,arguments); } }let click = function(){ console.log('event:click'); }let hover = function(){ console.log('event:hover'); } event.listen(click); event.listen(hover); event.trigger();//打印:‘event:click’'event:hover'
完璧なオブザーバーモード
let Event = (function(){ var list = {}, listen, trigger, remove; listen = function(key,fn){ list[key] = list[key]||[]; list[key].push(fn); }; trigger = function(){ var key = Array.prototype.shift.call(arguments), fns = list[key]; if(!fns || fns.length === 0) { return false; } for(var i = 0, fn; fn = fns[i++];) { fn.apply(this,arguments); } }; remove = function(key,fn){ var fns = list[key]; if(!fns) { return false; } if(!fn) { fns && (fns.length = 0); }else { for(var i = fns.length - 1; i >= 0; i--){ var _fn = fns[i]; if(_fn === fn) { fns.splice(i,1); } } } }; return { listen: listen, trigger: trigger, remove: remove } })(); Event.listen('click', function(type) { console.log('event: ' + type +' click'); }); Event.trigger('click' , 'button');//打印'event: button click'
オブザーバーモードは、モジュール間通信、ユーザーイベントとステータスのサブスクライブ、および対応する論理処理の実行のトリガーに使用できます。
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨書籍:
以上がJavaScript のオブザーバー パターンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。