>[danger]观察者模式,手写实现一个事件总线,怎么用? 观察者模式是一种常见的设计模式,用于实现对象之间的一对多依赖关系。在观察者模式中,有两种主要角色:观察目标(Subject)和观察者(Observer)。 观察目标维护一组观察者,并在状态发生变化时通知这些观察者。 观察者则订阅观察目标的变化,并在观察目标状态变化时接收到通知并进行相应的处理。 下面是一个简单的手写实现事件总线的示例,使用观察者模式来实现: ```javascript class EventBus { constructor() { this.subscribers = {}; } subscribe(eventType, callback) { if (!this.subscribers[eventType]) { this.subscribers[eventType] = []; } this.subscribers[eventType].push(callback); } unsubscribe(eventType, callback) { if (this.subscribers[eventType]) { this.subscribers[eventType] = this.subscribers[eventType].filter(cb => cb !== callback); } } publish(eventType, data) { if (this.subscribers[eventType]) { this.subscribers[eventType].forEach(callback => { callback(data); }); } } } ``` 在上面的示例中,我们定义了一个名为 `EventBus` 的事件总线类。它具有 `subscribe`、`unsubscribe` 和 `publish` 这三个方法,分别用于订阅事件、取消订阅事件和发布事件。 使用示例如下: ```javascript // 创建一个事件总线实例 const eventBus = new EventBus(); // 订阅事件 const callback1 = data => { console.log('Callback 1:', data); }; eventBus.subscribe('event1', callback1); // 发布事件 eventBus.publish('event1', 'Hello, world!'); // 取消订阅事件 eventBus.unsubscribe('event1', callback1); ``` 在这个示例中,我们首先创建了一个 `EventBus` 实例,然后通过 `subscribe` 方法订阅了名为 `event1` 的事件,接着使用 `publish` 方法发布了 `event1` 事件,并在回调函数中打印了收到的数据。最后,我们使用 `unsubscribe` 方法取消了对 `event1` 事件的订阅。 通过观察者模式实现的事件总线可以帮助我们在应用程序中实现组件之间的解耦,使得组件之间的通信更加灵活和可扩展。