前端练习25 实现一个EventEmitter

知识点

1. 观察者模式的概念和实现
2. class的使用

题目

完成EventEmitter模块，它是一个类，它的实例具有以下几个方法：on、emit、off：

• on(eventName, func)：监听eventName事件，事件触发的时候调用func函数。
• emit(eventName, arg1, arg2, arg3...)：触发eventName事件，并且把参数arg1, arg2, arg3… 传给事件处理函数。
• off(eventName, func)：停止监听某个事件。

使用例子：

const emitter = new EventEmitter()
const sayHi = (name) => console.log(`Hello ${name}`)
const sayHi2 = (name) => console.log(`Good night, ${name}`)

emitter.on('hi', sayHi)
emitter.on('hi', sayHi2)
emitter.emit('hi', 'ScriptOJ')
// => Hello ScriptOJ
// => Good night, ScriptOJ

emitter.off('hi', sayHi)
emitter.emit('hi', 'ScriptOJ')
// => Good night, ScriptOJ

const emitter2 = new EventEmitter()
emitter2.on('hi', (name, age) => {
  console.log(`I am ${name}, and I am ${age} years old`)
})
emitter2.emit('hi', 'Jerry', 12)
// => I am Jerry, and I am 12 years old

实现

之前实现过类似的单例的观察者模式，现在改用class来写，没什么区别：

class EventEmitter {
  constructor() {
    this.events = {}
  };
  on(eventName, func) {
    if (!this.events[eventName]) {
      this.events[eventName] = []
    }
    this.events[eventName].push(func);
  };
  emit(eventName, ...params) {
    const events = this.events[eventName];
    if (events) {
      events.forEach(event => {
        event.apply(this, params)
      })
    }
  };
  off(eventName, func) {
    if (this.events[eventName]) {
      if (!func) {
        this.events[eventName] = []
      } else {
        this.events[eventName].splice(this.events[eventName].indexOf(func), 1)
      }
    }
  }
}

参考

• #36 实现一个EventEmitter@ScriptOJ