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 のプロキシ パターン

Javascript の戦略パターン

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