實作 event 系統#

題目:請用 JavaScript 製作出事件監聽系統(Event System)。

裡面必須包含 on , trigger, off 方法,請參考 jQuery 內的效果:

  1. on : 註冊監聽處理程序(event handler)。
  2. trigger : 觸發所有該監聽的調用(callback)方法。
  3. off : 移除所有該監聽名稱的調用(callback)方法。

想法與實作#

為了比較清楚解釋,作法寫在註解裡面。

class Events {
// 初始化時給一個 key, value 的 js 物件 events
constructor() {
this.events = {}
}
// 註冊監聽事件處理器 on
on(eventName, callback) {
// 若有事件在 key 了,則繼續往後放入陣列
if (this.events[eventName]) {
this.events[eventName].push(callback)
} else {
// 若沒有,則初始新的 eventName 當作 key, callback 放入 value 裡面(陣列)。
this.events[eventName] = [callback]
}
}
// 觸發所有該名字(eventName)的事件,
// 也就是上面 on 的 events 物件裡面的 key
trigger(eventName) {
if (this.events[eventName]) {
for (let aCallback of this.events[eventName]) {
aCallback()
}
}
}
// 移除所有某 eventName 的 callback
off(eventName) {
delete this.events[eventName]
// 方法 2
// this.events[eventName] = []
}
}

這樣就完成啦!

本文同時發布於鐵人賽