js观察者模式使用案例
时间: 2023-11-29 19:00:55 浏览: 41
观察者模式(Observer Pattern)是一种常用的设计模式,它用于对象间的一对多依赖关系的处理,当一个对象的状态发生改变时,所有依赖它的对象都会得到通知并自动更新。
在JavaScript中,观察者模式通常用于DOM事件监听、异步回调、数据绑定等场景。下面是一个简单的实例,使用观察者模式实现一个发布-订阅模式的事件处理器。
```javascript
// 事件处理器
class EventHandler {
constructor() {
this.handlers = {};
}
// 订阅事件
subscribe(eventName, handler) {
if (!this.handlers[eventName]) {
this.handlers[eventName] = [];
}
this.handlers[eventName].push(handler);
}
// 取消订阅
unsubscribe(eventName, handler) {
if (!this.handlers[eventName]) {
return;
}
const index = this.handlers[eventName].indexOf(handler);
if (index !== -1) {
this.handlers[eventName].splice(index, 1);
}
}
// 发布事件
publish(eventName, ...args) {
if (!this.handlers[eventName]) {
return;
}
this.handlers[eventName].forEach(handler => handler(...args));
}
}
// 使用示例
const eventHandler = new EventHandler();
// 订阅事件
eventHandler.subscribe('click', () => console.log('click event fired'));
eventHandler.subscribe('change', (value) => console.log(`value changed to ${value}`));
// 发布事件
eventHandler.publish('click'); // 输出: "click event fired"
eventHandler.publish('change', 10); // 输出: "value changed to 10"
// 取消订阅
const handler = () => console.log('test');
eventHandler.subscribe('test', handler);
eventHandler.unsubscribe('test', handler);
```
在上面的代码中,我们创建了一个 EventHandler 类,它包含了三个方法:subscribe、unsubscribe 和 publish。它们分别用于订阅事件、取消订阅事件和发布事件。在使用时,我们可以通过调用 subscribe 方法来订阅事件,通过 publish 方法来发布事件,通过 unsubscribe 方法来取消订阅事件。当发布一个事件时,所有订阅该事件的处理器都会被调用。