1. 程式人生 > 實用技巧 >pubSub-js觀察者模式訂閱觸發實現原理

pubSub-js觀察者模式訂閱觸發實現原理

先上實現程式碼:

function PubSub() {
    this.handlers = {};
}
PubSub.prototype = {
  // 訂閱事件(定義的key值,繫結的函式)
  on: function(eventType, handler){
    var self = this;
    if(!(eventType in self.handlers)) {
      self.handlers[eventType] = [];
    }
    self.handlers[eventType].push(handler);
    return this;
  },
   
// 觸發事件(定義的key值) 後一個引數建議傳遞物件 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);//將傳過來的物件綁定於函式中 apply立即執行 }
return self; }, // 刪除訂閱事件(定義的key值,繫結的函式(一般傳個函式變數)) off: function(eventType, handler){ var currentEvent = this.handlers[eventType];//返回PubSub被繫結的函式 var len = 0; if (currentEvent) { len = currentEvent.length; for (var i = len - 1; i >= 0; i--){ if (currentEvent[i] === handler){ currentEvent.splice(i,
1);//PubSub物件中的函式被刪除 splice用於刪除專案 } } } return this; } }
on訂閱事件,可將事件傳入到PubSub物件的handlers物件中。 emit觸發事件,將傳入的物件繫結到訂閱的函式中,並立即執行。 off刪除訂閱,將PubSub物件的指定key的事件刪除。

使用方法:

var pubsub = new PubSub();
//訂閱事件A
// pubsub.on('A', function(data){
//   console.log(1, data);
// });
pubsub.on('A', a2=function(data){
  console.log(2 , data);
});
//觸發事件A
pubsub.emit('A', {a:2});
//刪除事件A的訂閱源a2
pubsub.off('A', a2);