简易事件发射器实现-优快云博客

本文链接：https://blog.youkuaiyun.com/cengjingcanghai123/article/details/104437101

简单版

class EventEmeitter {
    constructor () {
        this._events = this._events || new Map(); // 储存事件/键值对
        this._maxListeners = this._maxListeners || 10; // 设立监听上限
    }
}

// 触发名为type的事件
EventEmeitter.prototype.emit = (type, ...args) => {
    let handler;
    // 从储存事件键值对的this._events中获取对应事件回调函数
    handler = this._events.get(type);
    if (args.length > 0) {
        handler.apply(this, args);
    } else {
        handler.call(this);
    }
    return true;
}

// 监听名为type的事件
EventEmeitter.prototype.addListener = (type, fn) => {
    // 将type事件以及对应的fn函数放入this._events中储存
    if (!this._events.get(type)) {
        this._events.set(type, fn);
    }
}复制代码

完善版

class EventEmitter {
    constructor () {
        this._events = this._events || new Map();
        this._maxListeners = this._maxListeners || 10;
    }
}

// 触发名为type的事件
EventEmeitter.prototype.emit = (type, ...args) => {
    let handler;
    handler = this._events.get(type);
    if (Array.isArray(handler)) {
        // 如果是一个数组，说明有多个监听者，需要依次触发里面的函数
        for (let i = 0; i < handler.length; i++) {
            if (args.length > 0) {
                handler[i].apply(this, args);
            } else {
                handler[i].call(this);
            }
        }
    } else {
        // 单个函数直接触发即可
        if (args.length > 0) {
            handler.apply(this, args);
        } else {
            handler.call(this);
        }
    }
    return true;
}

// 监听名为type的事件
EventEmitter.prototype.addListener = (type, fn) => {
    const handler = this._events.get(type); // 获取对应事件名称的函数清单
    if (!handler) {
        this._events.set(type, fn);
    } else if (handler && typeof handler === 'function') {
        // 如果handler是函数，说明只有一个监听者
        this._events.set(type, [handler, fn]); // 多个监听者需要用数组储存
    } else {
        handler.push(fn); // 已经有多个监听者，直接往数组里面push函数即可
    }
}

EventEmitter.prototype.removeListener = (type, fn) > {
    const handler = this._events.get(type); // 获取对应事件名称的函数清单
    if (handler && typeof handler === 'function') {
        // 如果是函数，说明只被监听了一次
        this._events.delete(type, fn);
    } else {
        let position = -1;
        // 如果handler是数组，说明被监听多次，要找到对应的函数
        for (let i = 0; i < handler.length; i++) {
            if (handler[i] === fn) {
                position = i;
            }
        }
        // 如果找到匹配的函数，从数组中删除
        if (position !== -1) {
            // 找到数组对应的位置，直接清除此回调
            handler.splice(position, 1);
            // 如果清除后只有一个函数，那么取消数组，以函数的形式保存
            if (handler.length === 1) {
                this._events.set(type, handler[0]);
            }
        } else {
            return this;
        }
    }
}复制代码