js 手写一个发布订阅

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

  // 订阅事件
  on(eventName, callback) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(callback);
  }

  // 发布事件
  emit(eventName, ...args) {
    if (this.events[eventName]) {
      this.events[eventName].forEach(cb => {
        cb(...args);
      });
    }
  }

  // 取消订阅
  off(eventName, callback) {
    if (this.events[eventName]) {
      this.events[eventName] = this.events[eventName].filter(cb => cb !== callback);
    }
  }
}

// 使用
const ee = new EventEmitter();

// 订阅事件
ee.on('sayHi', () => console.log('Hello!'));

// 发布事件 
ee.emit('sayHi'); // Hello!

// 取消订阅
const cb = () => console.log('Hello!');
ee.on('sayHi', cb);
ee.off('sayHi', cb);
ee.emit('sayHi'); // 没有输出

这个简单的发布订阅实现包含:

• on方法:用于订阅事件,接收事件名和回调函数作为参数

• emit方法:用于发布事件,触发事件执行订阅的回调函数

• off方法:用于取消订阅,接收事件名和回调函数作为参数

使用时,先通过on方法订阅事件,然后通过emit方法发布事件从而执行回调。off方法用于取消之前的订阅关系。

这个简单实现仅作学习示例,实际开发中有更完善的发布订阅库可以选用,如Node.js中的Events模块等。但理解其基本原理和思想是非常重要的。

希望这个示例对您有所帮助,能加深对JavaScript事件和发布订阅模式的理解。

本内容来源于小豆包，想要更多内容请跳转小豆包 》