Javascript非同步編程的方法 - Pub/Sub
javascript
Lastmod: 2019-12-13

發布與訂閱模式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,下篇會詳細介紹它。

參考資料

comments powered by Disqus