javascript闭包怎样实现回调注册表

function createEventEmitter() {
    const callbacks = {}; // 这是一个私有对象，用于存储不同事件类型的回调函数

    return {
        /**
         * 注册一个事件监听器
         * @param {string} eventType - 事件类型名称
         * @param {Function} callback - 当事件触发时执行的回调函数
         */
        on: function(eventType, callback) {
            if (typeof callback !== 'function') {
                console.warn(`Attempted to register a non-function callback for '${eventType}'. Ignored.`);
                return;
            }
            if (!callbacks[eventType]) {
                callbacks[eventType] = [];
            }
            // 避免重复注册同一个回调，尽管有时业务逻辑允许
            if (!callbacks[eventType].includes(callback)) {
                callbacks[eventType].push(callback);
            }
        },

        /**
         * 移除一个事件监听器
         * @param {string} eventType - 事件类型名称
         * @param {Function} callback - 要移除的回调函数
         */
        off: function(eventType, callback) {
            if (!callbacks[eventType]) {
                return; // 没有这个事件类型，直接返回
            }
            callbacks[eventType] = callbacks[eventType].filter(cb => cb !== callback);
        },

        /**
         * 触发一个事件，并执行所有注册的回调函数
         * @param {string} eventType - 要触发的事件类型名称
         * @param {...any} args - 传递给回调函数的参数
         */
        emit: function(eventType, ...args) {
            if (!callbacks[eventType]) {
                return; // 没有注册任何回调，直接返回
            }
            // 遍历并执行所有回调，这里用slice()是为了防止在遍历过程中数组被修改
            [...callbacks[eventType]].forEach(callback => {
                try {
                    callback(...args);
                } catch (e) {
                    console.error(`Error in callback for event '${eventType}':`, e);
                    // 实际应用中可能需要更复杂的错误处理机制
                }
            });
        },

        /**
         * 获取某个事件类型的所有已注册回调（调试或特定场景下可能需要）
         * 注意：直接暴露内部状态可能违反封装原则，谨慎使用
         */
        _getCallbacks: function(eventType) {
            return callbacks[eventType] ? [...callbacks[eventType]] : [];
        }
    };
}

// 示例用法
const myEvents = createEventEmitter();

function handler1(message) {
    console.log(`Handler 1 received: ${message}`);
}

function handler2(data, count) {
    console.log(`Handler 2 received: ${data}, count: ${count}`);
}

myEvents.on('dataReady', handler1);
myEvents.on('dataReady', handler2);
myEvents.on('userAction', (action) => console.log(`User did: ${action}`));

console.log("--- Triggering dataReady event ---");
myEvents.emit('dataReady', 'Hello World', 5);

console.log("--- Triggering userAction event ---");
myEvents.emit('userAction', 'click button');

console.log("--- Removing handler1 ---");
myEvents.off('dataReady', handler1);

console.log("--- Triggering dataReady again ---");
myEvents.emit('dataReady', 'Goodbye', 10);

// 尝试访问私有状态，会发现无法直接访问callbacks
// console.log(myEvents.callbacks); // undefined

createEventEmitter

callbacks

on

off

emit

createEventEmitter

myEvents

callbacks

on

off

emit

on

emit

callbacks

createEventEmitter

createEventEmitter

callbacks

'dataReady'

'userAction'

on(eventType, callback)

callbacks[eventType]

callback

off(eventType, callback)

filter

callback

on('click', () => {})

off('click', () => {})

'userLoggedIn'

'itemAddedToCart'

'formSubmitted'

emit

emit

try...catch

this

undefined

this

this

callback.bind(thisContext)

this

this

myEvents

off