iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 30
0
Software Development

One Punch 一拳搞定前後端面試系列 第 30

[One Punch 一拳搞定前後端面試] DAY-30 - Event System

實作 jQuery 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]
    // this.events[eventName] = [] // 方法 2
  }
}

這樣就完成啦!

祝各位中秋佳節愉快~~

本文同時發布於好讀整理版


上一篇
[One Punch 一拳搞定前後端面試] DAY-29 - Selection Sort
系列文
One Punch 一拳搞定前後端面試30

尚未有邦友留言

立即登入留言