JavaScript觀察者模式(publish/subscribe)原理與實現方法

2019-11-19 16:58:32

字體：大中小

來源：轉載

供稿：網友

本文實例講述了JavaScript觀察者模式(publish/subscribe)原理與實現方法。分享給大家供大家參考，具體如下：

觀察者模式又叫做發布訂閱模式，它定義了一種一對多的關系，讓多個觀察者對象同時監聽某一個主題對象，這個主題對象的狀態發生改變時就會通知所有觀察著對象。它是由兩類對象組成，主題和觀察者，主題負責發布事件，同時觀察者通過訂閱這些事件來觀察該主體，發布者和訂閱者是完全解耦的，彼此不知道對方的存在，兩者僅僅共享一個自定義事件的名稱。

在Nodejs中通過EventEmitter實現了原生的對于這一模式的支持。在JavaScript中事件監聽機制就可以理解為一種觀察者模式。

下面給出一個JS自定義的PubSub，仔細閱讀下面這段代碼有助于你理解觀察者模式。相關代碼請查看github。

function PubSub() { this.handlers = {};}PubSub.prototype = {  // 訂閱事件  on: function(eventType, handler){    var self = this;    if(!(eventType in self.handlers)) {      self.handlers[eventType] = [];    }    self.handlers[eventType].push(handler);    return this;  },   // 觸發事件(發布事件)  emit: function(eventType){    var self = this;    var handlerArgs = Array.prototype.slice.call(arguments,1);    for(var i = 0; i < self.handlers[eventType].length; i++) {     self.handlers[eventType][i].apply(self,handlerArgs);    }    return self;  },  // 刪除訂閱事件  off: function(eventType, handler){    var currentEvent = this.handlers[eventType];    var len = 0;    if (currentEvent) {      len = currentEvent.length;      for (var i = len - 1; i >= 0; i--){        if (currentEvent[i] === handler){          currentEvent.splice(i, 1);        }      }    }    return this;  }};var pubsub = new PubSub();var callback = function(data){  console.log(data);};//訂閱事件Apubsub.on('A', function(data){  console.log(1 + data);});pubsub.on('A', function(data){  console.log(2 + data);});pubsub.on('A', callback);//觸發事件Apubsub.emit('A', '我是參數');//刪除事件A的訂閱源callbackpubsub.off('A', callback);pubsub.emit('A', '我是第二次調用的參數');

運行結果。