增加监听on、派发事件emit、移除指定监听off、移除所有监听removeAllListenners
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> class SimpleEventEmitter { /** * 存储事件名到监听器列表的映射 * @private * @type {Map<string, Function[]>} */ _events = new Map(); /** * 注册⼀个事件监听器。 * @param {string} eventName 事件的名称。 * @param {Function} listener 事件发⽣时应调⽤的函数。 * @returns {this} 返回 EventEmitter 实例，⽅便链式调⽤。 */ on(eventName, listener) { if (typeof listener !== 'function') { throw new TypeError('Listener must be a function'); } if (!this._events.has(eventName)) { this._events.set(eventName, []); } // 避免重复添加相同的监听器，简化版可以不考虑，但实际通常会考虑 // if (!this._events.get(eventName).includes(listener)) { this._events.get(eventName).push(listener); // } return this; } /** * 触发⼀个事件，调⽤所有注册到该事件的监听器。 * @param {string} eventName 要触发的事件的名称。 * @param {...any} args 传递给监听器的参数。 * @returns {boolean} 如果事件有监听器被调⽤，则返回 true；否则返回 false。 */ emit(eventName, ...args) { if (!this._events.has(eventName)) { return false; // 没有注册该事件的监听器 } const listeners = this._events.get(eventName).slice(); // 创建副本 以防⽌在遍历过程中修改数组 for (const listener of listeners) { try { // 在这⾥，监听器中的 `this` 通常会丢失，如果是类⽅法，需要绑定或使⽤箭头函数 // `listener.call(this, ...args);` 如果需要绑定触发者的上下⽂ listener(...args); } catch (error) { // 实际 EventEmitter 通常会有⼀个 'error' 事件来处理监听器中的错误 console.error(`Error in event listener for "${eventName}":`, error); } } return listeners.length > 0; } /** * 移除指定的事件监听器。 37. 实现⼀个简化版 EventEmitter 2 / 5 * @param {string} eventName 事件的名称。 * @param {Function} listener 要移除的监听器函数。 * @returns {this} 返回 EventEmitter 实例，⽅便链式调⽤。 */ off(eventName, listener) { if (typeof listener !== 'function') { throw new TypeError('Listener must be a function'); } if (!this._events.has(eventName)) { return this; // 没有注册该事件的监听器 } const listeners = this._events.get(eventName); const index = listeners.indexOf(listener); if (index !== -1) { listeners.splice(index, 1); } // 如果该事件没有剩余的监听器，可以考虑从 Map 中移除该键，以节省内存 if (listeners.length === 0) { this._events.delete(eventName); } return this; } /** * 移除所有事件的所有监听器，或指定事件的所有监听器。 * @param {string} [eventName] 如果指定，则只移除该事件的监听器；否则移除所 有事件的监听器。 * @returns {this} 返回 EventEmitter 实例，⽅便链式调⽤。 */ removeAllListeners(eventName) { if (eventName) { this._events.delete(eventName); } else { this._events.clear(); } return this; } } // --- 示例⽤法 --- const myEmitter = new SimpleEventEmitter(); function handler1(arg1, arg2) { console.log('Handler 1 received:', arg1, arg2); } // 4. 关键注意事项 (Key Considerations) function handler2(arg) { console.log('Handler 2 received:', arg); } myEmitter.on('data', handler1); myEmitter.on('data', handler2); myEmitter.on('status', (status) => { console.log('Status changed:', status); }); console.log('--- Emitting "data" ---'); myEmitter.emit('data', 'Hello', 'World'); // Output: Handler 1 received: Hello World, Handler 2 received: Hello World console.log('--- Emitting "status" ---'); myEmitter.emit('status', 'active'); // Output: Status changed: active console.log('--- Emitting non-existent event ---'); myEmitter.emit('nonexistent'); // Output: false (returned by emit) console.log('--- Removing handler2 from "data" ---'); myEmitter.off('data', handler2); console.log('--- Emitting "data" again ---'); myEmitter.emit('data', 'Goodbye'); // Output: Handler 1 received: Goodbye console.log('--- Removing all listeners for "data" ---'); myEmitter.removeAllListeners('data'); console.log('--- Emitting "data" one last time ---'); myEmitter.emit('data', 'Final'); // No output </script> </body> </html>
