手写EventEmitter

在这里插入图片描述

一、概念#

1.EventEmitter#

EventEmitter （事件派发器）是 Node.js 的核心模块 events 中的类，用于对 Node.js 中的事件进行统一管理，用 events 特定的 API 对事件进行添加、触发和移除等等，EventEmitter 的核心就是事件触发与事件监听器功能的封装。

简而言之，EventEmitter就是一个典型的发布订阅模式，实现了事件调度中心。

javascript中常被提及的「发布订阅模式」，在面试的过程中，面试官往往会让你通过手写EventEmitter的方式来观察你对于这个模式的理解。

2.发布订阅模式#

发布订阅模式其实是一种对象间一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到状态改变的通知。

发布订阅模式中，包含发布者，事件调度中心，订阅者三个角色。发布者和订阅者是松散耦合的，互不关心对方是否存在，他们关注的是事件本身。发布者借用事件调度中心提供的publish方法发布事件，而订阅者则通过subscribe进行订阅。在这里插入图片描述

特点

发布订阅模式中，对于发布者Publisher和订阅者Subscriber没有特殊的约束，他们好似是匿名活动，借助事件调度中心提供的接口发布和订阅事件，互不了解对方是谁。
松散耦合，灵活度高，常用作事件总线。
易理解，可类比于DOM事件中的dispatchEvent和addEventListener。

缺点

当事件类型越来越多时，难以维护，需要考虑事件命名的规范，也要防范数据流混乱。

二、实现#

1.EventEmitter#

class EventEmitter {
    constructor() {
        // 维护事件及监听者
        this.listeners = {}
    }
    /**
     * 注册事件监听者
     * @param {String} type 事件类型
     * @param {Function} callback 回调函数
     */
    on(type, callback) {
        if (!this.listeners[type]) {  // 如果该事件类型不存在
            this.listeners[type] = [] // 为该事件类型设置数组，存放回调函数
        }
        this.listeners[type].push(callback) // 将回调函数放入该事件类型数组
    }
    /**
     * 发布事件
     * @param {String} type 事件类型
     * @param  {...any} args 参数列表，把emit传递的参数赋给回调函数
     */
    emit(type, ...args) {
        if (this.listeners[type]) { // 如果该事件类型存在
            this.listeners[type].forEach(callback => {
                callback(...args) // 调用该事件类型数组中的每一个回调函数，并传入参数
            })
        }
    }
    /**
     * 移除某个事件的一个监听者
     * @param {String} type 事件类型
     * @param {Function} callback 回调函数
     */
    off(type, callback) {
        if (this.listeners[type]) {
            // 查询传入回调函数在该事件类型数组中的下标，并将其下标用targetIndex存储
            const targetIndex = this.listeners[type].findIndex(item => item === callback)
            if (targetIndex !== -1) { // 说明该回调函数存在于事件类型数组中
                this.listeners[type].splice(targetIndex, 1) // 删除该回调函数
            }
            if (this.listeners[type].length === 0) { // 该事件类型数组为空
                delete this.listeners[type] // 删除该事件类型
            }
        }
    }
    /**
     * 移除某个事件的所有监听者
     * @param {String} type 事件类型
     */
    offAll(type) {
        if (this.listeners[type]) { // 如果该事件类型数组存在
            delete this.listeners[type] // 直接删除该事件类型
        }
    }
}

使用：

// 创建事件管理器实例
const ee = new EventEmitter()

// 注册一个imagine事件监听者
ee.on('imagine', function() { console.log('前端收割机') })

// 发布事件imagine
ee.emit('imagine')
// 前端收割机

// 也可以emit传递参数
ee.on('imagine', function(name,address) { console.log(`大家好，我是${name},我来自${address}！`) })
ee.emit('imagine', '前端收割机','广东') // 此时会打印两条信息，因为前面注册了两个imagine事件的监听者
// 前端收割机
// 大家好，我是前端收割机，我来自广东！

// 测试移除事件监听
const BeRemovedListener = function() { console.log('我是一个可以被移除的监听者') }

// 注册一个TestOff事件监听者
ee.on('TestOff', BeRemovedListener)

// 发布事件TestOff
ee.emit('TestOff')
// 我是一个可以被移除的监听者

// 移除事件监听
ee.off('TestOff', BeRemovedListener)
ee.emit('TestOff') // 此时事件监听已经被移除，不会再有console.log打印出来了

// 测试移除imagine的所有事件监听
ee.offAll('imagine')
console.log(ee) // 此时可以看到ee.listeners已经变成空对象了，再emit发送imagine事件也不会有反应了

补充：

findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。

findIndex() 方法为数组中的每个元素都调用一次函数执行：

当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 -1

注意:

findIndex() 对于空数组，函数是不会执行的。
findIndex() 并没有改变数组的原始值。

2.发布订阅模式#

class PubSub {
    constructor() {
        // 维护事件及订阅行为
        this.events = {}
    }
    /**
     * 注册事件订阅行为
     * @param {String} type 事件类型
     * @param {Function} callback 回调函数
     */
    subscribe(type, callback) {
        if (!this.events[type]) {
            this.events[type] = []
        }
        this.events[type].push(callback)
    }
    /**
     * 发布事件
     * @param {String} type 事件类型
     * @param  {...any} args 参数列表
     */
    publish(type, ...args) {
        if (this.events[type]) {
            this.events[type].forEach(callback => {
                callback(...args)
            })
        }
    }
    /**
     * 移除某个事件的一个订阅行为
     * @param {String} type 事件类型
     * @param {Function} callback 回调函数
     */
    unsubscribe(type, callback) {
        if (this.events[type]) {
            const targetIndex = this.events[type].findIndex(item => item === callback)
            if (targetIndex !== -1) {
                this.events[type].splice(targetIndex, 1)
            }
            if (this.events[type].length === 0) {
                delete this.events[type]
            }
        }
    }
    /**
     * 移除某个事件的所有订阅行为
     * @param {String} type 事件类型
     */
    unsubscribeAll(type) {
        if (this.events[type]) {
            delete this.events[type]
        }
    }
}

三、总结#

在EventEmitter （事件派发器）类中，每一个监听者（回调函数）相当于发布订阅模式中的订阅者Subscriber，而每一次发布事件相当于发布订阅模式中发布者Publisher的发布行为。