手寫eventEmitter

[LeoWangJ]

eventBus又稱eventHub，中文意思為訂閱發布模式

 class eventEmitter {
     private cache = {}
     on (eventName, fn) {
         this.cache[eventName] = this.cache[eventName] ||  []
         this.cache[eventName].push(fn)
     }
     emit (eventName, data) {
         let array = this.cache[eventName] || []
         array.forEach(fn=>{
            fn(data)
         })
     }
     off(eventName, fn){
           this.cache[eventName] = this.cache[eventName] || []
           let index = this.cache[eventName].indexOf(fn)
           if(index === -1) return 
           this.cache[eventName].splice(index, 1)
     }
 } 

let event = new eventEmitter()
let fn1 =(data) => console.log(data)

event.on('test', fn1)  // 訂閱
event.emit('test','你好')  // 發布

event.off('test', fn1) // 取消訂閱
event.emit('test','你好') 

主要思路是

1. on方法將傳入的方法名稱與執行函式存進cache物件中，而執行函式使用陣列來儲存， 方便調用不同的訂閱要執行的方法。
2. emit方法則是執行所有訂閱該方法名稱的函式。
3. off方法則是取消該項方法名稱中要取消的函數(訂閱的函式與取消的函式不能使用匿名函式，否則不會知道要取消哪個方法)。