首頁  >  文章  >  web前端  >  Javascript的觀察者模式

Javascript的觀察者模式

php中世界最好的语言
php中世界最好的语言原創
2018-03-13 17:51:531428瀏覽

這次帶給大家Javascript觀察者模式,Javascript觀察者模式的注意事項有哪些,下面就是實戰案例,一起來看一下。

觀察者(又稱發布訂閱)模式定義了物件間的一種一對多的依賴關係,以便當一個物件的狀態發生變化時,所有依賴它的物件都被通知並自動刷新。

當使用者在網頁執行一些動作(如點擊)後就需要執行一些預定的事件(如表單提交、跳轉頁面)

優點:在發布者和訂閱者間耦合性降低

缺點:弱化了物件間的關係,不利於程式碼的維護與理解

實作想法

確定發布者

定義發布者快取列表,儲存回呼函數通知訂閱者

發布訊息依序執行快取列表回呼函數

簡單實作

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中文網其它相關文章!

推薦閱讀:

Javascript的代理模式

#Javascript的策略模式

以上是Javascript的觀察者模式的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn