ScriptOJ设计模式题目：实现一个EventEmitter

今天刷到一道设计模式相关的题目，最近学习redux的时候跳过来看这道题，感觉和dispatch和reducer的形式很相似，redux本身是一种观察者模式，指定action来修改数据，再通过类似广播的形式去更新视图。本题中则是指定事件进行订阅，我们只实现了action的过程，实际上方式是相似的。

题目来源：#36 实现一个 EventEmitter

题目：

观察者模式在前端开发中非常常用，我们经常用的事件就是观察者模式的一种体现。它对我们解耦模块、开发基于消息的业务起着非常重要的作用。Node.js 原生自带 EventEmitter 模块，可见它的重要性。

完成 EventEmitter 模块，它是一个类，它的实例具有以下几个方法：on、emit、off： on(eventName, func)：监听 eventName 事件，事件触发的时候调用 func 函数。 emit(eventName, arg1, arg2, arg3…)：触发 eventName 事件，并且把参数 arg1, arg2, arg3… 传给事件处理函数。 off(eventName, func)：停止监听某个事件。 （本题来源：阿里巴巴前端笔试题）

题解：

class EventEmitter { constructor() { // 事件句柄数组 this.handlers = {} } on(eventName, func) { // 如果是已监听的事件，增加新的func let callbacks = eventName in this.handlers ? this.handlers[eventName] : [] callbacks.push(func) this.handlers[eventName] = callbacks } emit(eventName, ...args) { // 事件触发时，触发绑定的所有事件并传入参数 if (!eventName in this.handlers) return const callbacks = this.handlers[eventName] callbacks.map(cb => { cb(...args) }) } off(eventName, func) { // 注销事件中的对应func if (!eventName in this.handlers) return let callbacks = this.handlers[eventName] let index = callbacks.indexOf(func) callbacks.splice(index, 1) } }