JavaScript观察者模式_EventEmitter实现-js教程-PHP中文网

JavaScript观察者模式_EventEmitter实现

betcha

发布： 2025-11-25 15:15:16

原创

602人浏览过

EventEmitter是观察者模式的典型实现，通过on、emit、off和once方法实现事件的订阅、触发、移除和单次绑定，适用于解耦对象间通信，广泛应用于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实现：

小鸽子助手

一款集成于WPS/Word的智能写作插件

查看详情

立即学习“Java免费学习笔记（深入）”；

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实现的详细内容，更多请关注php中文网其它相关文章！