likes
comments
collection

手写实现一个浏览器端的EventEmitter

作者站长头像
站长
· 阅读数 15

「这是我参与2022首次更文挑战的第3天,活动详情查看:2022首次更文挑战」。

EventEmitter是什么

javascript这门语言,除了前端我们常用的DOM(描述处理网页内容的方法和接口)、BOM(描述与浏览器进行交互的方法和接口)等,还有用于后端的Node.js,其中内置的各种模块里,events就是其中比较重要的一个模块,因为Node.js的事件驱动机制就是建立在events模块上,许多需要实现异步事件驱动架构Node.js模块都内置了events,掌握其实现原理还是非常重要的。 events模块对外提供了一个EventEmitter对象,用于对Node中的事件进行统一管理。EventEmitter对象上的一些重要方法和功能如下。

  • addListener(event,listener),给指定事件添加一个监听器,on方法的别名。
  • emit(event,[arg1],[arg2],[arg3]...),根据参数的顺序执行每个监听器。
  • removeListener(event,listener),移除指定事件的某个监听器,off方法的别名。
  • removeAllListener([event]),移除指定事件的所有监听器,如果没有指定事件,则是移除所有事件的监听器。
  • once(event,listener),为指定事件注册一个一次性的监听器,监听器触发一次后立即移除该监听器。
  • listeners(event),返回指定事件的监听器数组。

EventEmitter的用法

介绍了这么久,我们赶紧看看EventEmitter该如何使用,其实很简单,代码如下。

// 定义三个监听器函数
function hello_1(name){
    console.log('hello',name);
}
function hello_2(name){
    console.log('HELLO',name);
}
function hello_3(name){
    console.log('hello HELLO',name);
}
const events = require('events');
let eventEmitter = new events.EventEmitter();
eventEmitter.addListener('hello',hello_1);
eventEmitter.addListener('hello',hello_2);
eventEmitter.once('hello',hello_3);
eventEmitter.emit('hello','xiaomi'); 
// 输出 hello xiaomi
// 输出 HELLO xiaomi
// 输出 hello HELLO xiaomi
eventEmitter.removeListener('hello',hello_1); // 移除hello事件对应的hello_1监听器
eventEmitter.emit('hello','xiaomi'); 
// 只输出 HELLO xiaomi ,因为once,所以hello_3触发一次后就被移除了
eventEmitter.removeAllListener('hello'); // 移除hello事件对应的所有监听器
eventEmitter.emit('hello','xiaomi'); 
// 没有任何输出,说明移除了hello事件的所有监听器

通过new实例化一个EventEmitter对象,然后通过实例上的addListener方法监听hello事件并定义一个对应的执行函数,用once定义一个只触发一次的监听器,再通过emit方法派发hello事件通知执行函数执行,最后移除hello事件的监听器。这就是一般使用方式,用到了addListener、once、emit、removeListener、removeAllListener等方法,这里补充一个知识点,添加一个事件监听,在页面销毁的时候就应该移除这个事件监听,以免造成不必要的内存浪费,比如上面的addListener 和 removeListener,这类似的还有比如on 和 off、subscribe 和 unsubscribe、setInterval 和 clearInterval等。 看完使用方式,大家一起思考下,EventEmitter应用了什么设计模式?以及这样的方式组织代码有什么益处? 答案我们在最后再补上。

手写实现一个EventEmitter

结合上面的介绍,我们先来实现一个浏览器端的基础版EventEmitter,其中包括addListener、once、emit、removeListener、removeAllListener这些方法。

class EventEmitter {
    constructor(){
        // 初始化__events对象,用于存放自定义事件和对应的回调函数
        /*
        对象结构:{
            'hello':[{listener: function,once: boolean},...]
        }
        */
        this.__events = {};
    }

    addListener(event,listener){
        if (!event || !listener) return;
        if (!isValidListener(listener)) {
            throw new TypeError('listener must be a function');
        }
        let events = this.__events;
        let listeners = (events[event] = events[event] || []);
        // 用于判断是否是对象,如果是函数则包裹成目标对象
        let listenerIsWrapped = typeof listener === 'object';
        // 排重,相同的监听器只需要添加一次
        if (indexOfListener(listeners, listener) === -1) {
            listeners.push(
                listenerIsWrapped ? listener : {
                    listener: listener,
                    // once 属性用于判断处理once机制
                    once: false
                }
            );
        }
        return this;
    }

    removeListener(event,listener){
        let listeners = this.__events[event];
        if (!listeners) return;
        let index;
        for (let i = 0, len = listeners.length; i < len; i++) {
            if (listeners[i] && listeners[i].listener === listener) {
                index = i;
                break;
            }
        }
        // 删除__events中对应的监听器
        if (typeof index !== 'undefined') {
            listeners.splice(index, 1);
        }
        return this;
    }

    removeAllListener(event){
        // 如果该 event 存在,则将其对应的 listeners 的数组直接清空
        if (event && this.__events[event]) {
            this.__events[event] = [];
        } else { // 全部清空
            this.__events = {};
        }
    }

    once(event,listener){
        // 直接调用 addListener 方法,once 参数传入 true,待执行之后进行 once 处理
        return this.addListener(event, {
            listener: listener,
            once: true
        });
    }

    emit(event,...args){
        // 直接通过内部对象获取对应自定义事件的回调函数数组
        let listeners = this.__events[event];
        if (!listeners) return;
        // 需要考虑多个 listener 的情况
        listeners.forEach(listener => {
            listener.listener.apply(this, args || []);
            // 给 listener 中 once 为 true 的进行特殊处理
            if (listener.once) {
                this.removeListener(event, listener.listener);
            }
        });
        return this
    }
}

// 判断是否是合法的 listener
function isValidListener(listener) {
    if (typeof listener === 'function') {
        return true;
    } else if (listener && typeof listener === 'object') {
        return isValidListener(listener.listener);
    } else {
        return false;
    }
}

// 查找新增自定义事件在__events里的位置,-1则说明不存在
function indexOfListener(array, item) {
    let result = -1;
    item = typeof item === 'object' ? item.listener : item;
    for (let i = 0, len = array.length; i < len; i++) {
        if (array[i].listener === item) {
            result = i;
            break;
        }
    }

    return result
}

从代码中可以看出addListener的实现思路就是当调用订阅一个自定义事件的时候,只要该事件校验成功后,就把该自定义事件 push到this.__events这个对象中存储,等emit发布的时候,则直接获取__events中对应事件的listener回调函数,而后直接执行该回调函数就能实现想要的效果。emit方法其实就是通过__events拿出对应自定义事件的回调函数数组遍历执行,在执行过程中对once选项为true的情况,额外触发removeListener方法移除该自定义事件的该回调函数,从而实现自定义事件只执行一次的效果。once方法也就是执行一次addListener方法,不过增加了个once为true的标志,在emit时做额外的处理。removeListener和removeAllListener也很简单,就是根据__events对象完成删除或者清空的操作。

测试结果

手写实现一个浏览器端的EventEmitter

手写实现一个浏览器端的EventEmitter

如图所示用我们手写的EventEmitter,替换上面例子中的events.EventEmitter,输出结果也是一样的。

总结

今天我们一起学习了EventEmitter的相关api,最后也手写了一个浏览器端简版的EventEmitter。回到实现前抛出的两个问题,其实不难发现EventEmitter正是采用了在前端非常常见的发布-订阅模式。发布-订阅模式的优点就是两个对象间不再是显性的调用,在完全不清楚双方细节的情况下依旧可以完成通信,实现代码的松耦合。但也不是一点缺点也没有,在弱化了对象间的通信的细节同时,如果过度使用,代码的可读性和易维护性也会有所降低!