over 2 years ago

發布與訂閱模式Pub/Sub它主要的概念為定義一對多的關係,當一件事情發布時會同時通知所有的訂閱者,在Javascript與Jquery非常容易看到該模式的使用。例如Jquery裡的on,下面的程式就可以想成,$('.SomeThing')為訂閱者,訂閱了click,如果click事件發生了,發布者就會執行doSomething

$('.SomeThing').on('click'fucntion doSomething(){
    //doSomething
});

該模式的優點在於解耦合,發行者與訂閱者不需要知道對方的存在。

而使用的時機為當一個對象改變時,需要同時改變其它對象,但確不知道實際有多少個對象時,這種情況下,就可以考慮使用Pub/Sub模式。


Pub/Sub 簡單版範例

var EventHub = {
    topics: {},

    subscribe: function(topic, handler) {       
        if(!this.topics[topic]){
            this.topics[topic] = [];
        } 

        this.topics[topic].push(handler);
    },

    publish: function(topic, data) {

        if(!this.topics[topic] || this.topics[topic].length < 1) 
            return;

        this.topics[topic].forEach(function(listener) {
            listener(data || {});
        });
    }
};

然後就可以使用了,首先訂閱一個Task,並且當Task被觸發時,會自動執行task函數

EventHub.subscribe('Task',function task(data){
    console.log(data + 'by Task1');
});

EventHub.subscribe('Task',function task(data){
    console.log(data + 'by Task2');
});

然後在來觸發Task

EventHub.publish('Task','Hello pub and sub~');

執行結果為,

Hello pub and sub ~ by Task1
Hello pub and sub ~ by Task2

Pub/Sub不適合處理的類型

PubSub不適合應用於一次性事件,所謂一次性事件就是指執行一次任務但可能產生多種結果(例如成果事件與失敗事件),做不同的處理,Ajax請求就是很常見的一次性事件。而專門用來解決這類型的方法被稱稱為Promise,下篇會詳細介紹它。


參考資料

← Javascript非同步編程的方法(setTimeout) Javascript非同步編程的方法(Promise) →
 
comments powered by Disqus