javascriptのObserverパターン

Observer classを実装する


class Observer {
  
  /**
   * 登録する
   * [イベント名、Set(リスナー関数)]を管理するMap
   */
  constructor() {
    this._listener = new Map()
  }

  /**
   * 指定したイベントのイベントリスナーを登録する
   * @param {string} type
   * @param {Function} listener
   */
  on(type, listener) {
    if(!this._listener.has(type)) {
      this._listener.set(type, new Set())
    }
    const listenerSet = this._listener.get(type)
    listenerSet.add(listener)
    return this
  }

  /**
   * 指定したイベントリスナーイベントリスナーを解除する
   * @param {string} type
   * @param {Function} listener
   */
  off(type, listener) {
    const listenerSet = this._listener.get(type)
    if (!listenerSet) {
      return false
    }
    listenerSet.forEach(onwListener => {
      if (ownListener === listener) {
        listenerSet.delete(listener)
      }
    })
    return this
  }

  /**
   * 指定したイベントをディスパッチする
   * @param {string} type
   * @param {args} arguments
   */
  emit(type, ...args){
    const listener = this._listener.get(type)
    if (!listenerSet) {
      return
    }

    listenerSet.forEach(listener => {
      listener.call(this, ...args)
    })
    return this
  }
}

const observer = new Observer()

observer.on('trigger', () => {
  console('trigger on')
})

setTimeout(() => {
  observer.emit('trigger)
}, 3000)

observer.on('trigger')でイベントの種類に対するイベントリスナーを登録する。 observer.emit('trigger')でイベントをディスパッチしてイベントリイスナーを 呼び出す。

結果 javascriptを実行して3秒後にconsole.log('trigger on')が表示される

// trigger on