欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 汽车 > 维修 > js观察者模式

js观察者模式

2025/1/19 0:36:49 来源:https://blog.csdn.net/qq_73270720/article/details/145006425  浏览:    关键词:js观察者模式

它定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象。当主题对象发生变化时,它的所有观察者都会收到通知并自动更新。

在这里插入图片描述

// 定义主题类class Subject {constructor() {this.observers = [];}// 添加观察者方法addObserver(observer) {this.observers.push(observer);}// 移除观察者方法removeObserver(observer) {this.observers = this.observers.filter(o => o !== observer);}// 通知观察者方法notifyObservers() {this.observers.forEach(observer => observer.update());}// 主题状态改变方法setState(state) {this.state = state;this.notifyObservers();}}// 定义观察者接口class Observer {constructor() {if (this.constructor === Observer) {throw new Error('不能实例化抽象类');}}// 定义更新方法update() {throw new Error('必须实现 update 方法');}}// 具体观察者类 Aclass ConcreteObserverA extends Observer {constructor() {super();}// 实现更新方法update() {console.log('具体观察者 A 收到通知并更新');}}// 具体观察者类 Bclass ConcreteObserverB extends Observer {constructor() {super();}// 实现更新方法update() {console.log('具体观察者 B 收到通知并更新');}}// 使用观察者模式let subject = new Subject();let observerA = new ConcreteObserverA();let observerB = new ConcreteObserverB();subject.addObserver(observerA);subject.addObserver(observerB);subject.setState('状态已改变');

应用

vue响应式系统

事件总线

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com