JavaScript設計模式 觀察者模式（釋出訂閱）

kkkkuuuu發表於2017-12-27
JavaScript設計模式

最近的學習中遇到了觀察者模式，剛好之前買了《Javascript設計模式與開發事件》，於是翻到相關章節進行學習。以下是學習之後的總結，希望能對看到的你有所幫助。

###理解觀察者模式 1.指定釋出者（比如售樓處） 2.給釋出者新增一個快取列表，向快取列表存放回掉函式，用以通知訂閱者（想買房的人） 3.釋出訊息，釋出者便利快取列表，以此觸發裡面存放的訂閱者回掉函式

#####例如一個Node.js 原生自帶 EventEmitter 模組

EventEmitter 模組，它是一個類，它的例項具有以下幾個方法：on、emit、off：

on(eventName, func)：監聽 eventName 事件，事件觸發的時候呼叫 func 函式。 emit(eventName, arg1, arg2, arg3...)：觸發 eventName 事件，並且把引數arg1, arg2, arg3... 傳給事件處理函式。 off(eventName, func)：停止監聽某個事件。

class EventEmitter {
  /* TODO */
  constructor(){
    this.subList={}  //釋出者
  }

  on(eventName,func){  
    if(!this.subList[eventName]){
     this.subList[eventName] = []   //是否有該訂閱者，如果沒有則新增
    }
   this.subList[eventName].push(func)   //向訂閱者列表新增回掉函式
  }

  emit(eventName, ... args){  
    var fns = this.subList[eventName]  
    if(!fns) return        //如果沒有該訂閱者，返回函式
    fns.map(cd => {        //存在該訂閱者時，遍歷列表觸發回掉函式
      cd(...args)
    })
  }

  off(eventName, func){
   var fns = this.subList[eventName]
    if(!fns || fns.length==0) return  
    var index = fns.indexOf(func)  
    fns.splice(index,1)   //將該事件從訂閱者列表中刪除
  }
}
複製程式碼

未完待續

相關文章