分析javascript觀察者模式的原理、功能

這篇文章主要介紹了JavaScript觀察者模式(publish/subscribe)原理與實現方法,簡單分析了javascript觀察者模式的原理、功能並結合實例形式給出了觀察者模式的實現技巧,需要的朋友可以參考下

本文實例講述了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);
};
//订阅事件A
pubsub.on(&#39;A&#39;, function(data){
  console.log(1 + data);
});
pubsub.on(&#39;A&#39;, function(data){
  console.log(2 + data);
});
pubsub.on(&#39;A&#39;, callback);
//触发事件A
pubsub.emit(&#39;A&#39;, &#39;我是参数&#39;);
//删除事件A的订阅源callback
pubsub.off(&#39;A&#39;, callback);
pubsub.emit(&#39;A&#39;, &#39;我是第二次调用的参数&#39;);

運行結果。

以上是分析javascript觀察者模式的原理、功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！