登录
首页 >  文章 >  前端

JavaScript观察者模式：EventEmitter实现详解

时间：2026-03-15 19:20:32 248浏览 收藏

本文深入解析了JavaScript中观察者模式的经典实现——EventEmitter，通过清晰的原理阐述、核心API（on/emit/off/once）设计说明及简洁可靠的ES6代码实现，展示了如何用不到二十行代码构建一个轻量却功能完备的事件通信机制；它不仅揭示了Node.js内置事件系统与前端框架状态管理背后的共通思想，更让读者即学即用，轻松实现对象间低耦合、高内聚的灵活交互。

JavaScript观察者模式_EventEmitter实现

在JavaScript中，观察者模式是一种非常实用的设计模式，适用于解耦事件的发布者和订阅者。通过实现一个简单的EventEmitter类，可以让对象之间实现灵活的通信机制，而不必彼此了解对方的存在。

什么是EventEmitter

EventEmitter是一个典型的观察者模式实现，它允许你注册（on）、触发（emit）和移除（off）事件监听器。这种机制广泛应用于Node.js的内置模块，也被前端框架借鉴用于状态管理和组件通信。

核心API设计

一个基础的EventEmitter应包含以下方法：

  • on(event, callback)：绑定事件监听器
  • emit(event, ...args)：触发事件，执行所有该事件的回调函数
  • off(event, callback)：移除指定事件的某个监听器
  • once(event, callback)：绑定只执行一次的事件监听器

代码实现

下面是基于ES6语法的一个轻量级EventEmitter实现：

class EventEmitter {
  constructor() {
    this.events = {};
  }

  on(event, callback) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(callback);
  }

  emit(event, ...args) {
    if (this.events[event]) {
      this.events[event].forEach(callback => callback(...args));
    }
  }

  off(event, callback) {
    if (this.events[event]) {
      const index = this.events[event].indexOf(callback);
      if (index > -1) {
        this.events[event].splice(index, 1);
      }
    }
  }

  once(event, callback) {
    const wrapped = (...args) => {
      callback.apply(this, args);
      this.off(event, wrapped);
    };
    this.on(event, wrapped);
  }
}

使用示例

你可以这样使用上面定义的EventEmitter：

const emitter = new EventEmitter();

emitter.on('greet', (name) => {
  console.log(`Hello, ${name}!`);
});

emitter.once('init', () => {
  console.log('This will run only once.');
});

emitter.emit('greet', 'Alice'); // 输出: Hello, Alice!
emitter.emit('init');           // 输出: This will run only once.
emitter.emit('init');           // 无输出

基本上就这些。这个实现虽然简单，但已经具备了EventEmitter的核心能力，适合在小型项目或工具类中使用。如果需要更强大的功能（如事件命名空间、最大监听数警告等），可以考虑使用Node.js的events模块或第三方库。

到这里，我们也就讲完了《JavaScript观察者模式：EventEmitter实现详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！

资料下载
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>