在前端开发中，我们经常需要处理事件的订阅与发布，以实现组件之间的解耦和通信。本文将介绍如何使用 JavaScript 实现一个简单的发布订阅模式，通过分步写代码的方式，带领读者一步步完成实现过程。
步骤一：定义 EventEmitter 类
首先，我们需要定义一个名为 EventEmitter 的类，作为发布订阅模式的核心组件。初始化一个空对象 events，用于存储不同事件及其对应的回调函数。
class EventEmitter {
constructor () {
this.events = {};
}
}
其次，我们需要定义三个主要方法：on、emit 和 off，分别用于订阅事件、发布事件和取消订阅事件。
1.订阅事件（on 方法）：
on(eventName, callback) {
// 订阅事件
this.events[eventName] = this.events[eventName] || [];
this.events[eventName].push(callback);
}
on 方法接受两个参数：eventName 表示事件名称，callback 表示事件发生时要执行的回调函数。该方法将事件名称作为键，回调函数作为值存储在 events 对象 中。如果已经有同名事件存在，则将回调函数添加到已有事件的回调函数数组中；如果不存在，则创建一个新的事件数组并添加。
2.发布事件（emit 方法）
emit(eventName, ...args) {
// 发布事件
if (this.events[eventName]) {
this.events[eventName].forEach(callback => {
callback.apply(null, args);
});
}
}
emit 方法接受至少一个参数 eventName，表示要发布的事件名称，可以额外传入任意数量的参数作为事件回调函数的参数。该方法首先检查是否存在指定名称的事件，如果存在，则依次调用该事件的所有回调函数，并传入额外参数；如果不存在，则不执行任何操作。
3.取消订阅事件（off 方法）：
off(eventName, callback) {
// 取消订阅事件
if (this.events[eventName]) {
this.events[eventName] = this.events[eventName].filter(cb => cb !== callback);
}
}
off 方法用于取消对指定事件的订阅。它接受两个参数：eventName 表示要取消订阅的事件名称，callback 表示要取消订阅的回调函数。该方法首先检查指定名称的事件是否存在，如果存在，则将传入的回调函数从事件的回调函数数组中移除，实现取消订阅的效果。
这样，我们就完成了 EventEmitter 类的定义，具备了基本的订阅、发布和取消订阅事件的功能。下面可以用一个demo验证一下
// 创建 EventEmitter 实例
const eventEmitter = new EventEmitter();
// 订阅事件
eventEmitter.on('message', message => {
console.log('Received message:', message);
});
// 发布事件
eventEmitter.emit('message', 'Hello, World!');
// 取消订阅事件
eventEmitter.off('message');
通过以上步骤，我们成功地实现了一个简单的发布订阅模式。通过 EventEmitter 类，我们可以方便地进行事件的订阅和发布，实现组件之间的解耦和通信。这种模式在前端开发中有着广泛的应用，可以帮助我们更好地组织和管理代码。