js观察者模式

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

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 方法');

  }

}

  

// 具体观察者类 A

class ConcreteObserverA extends Observer {

  constructor() {

    super();

  }

  // 实现更新方法

  update() {

    console.log('具体观察者 A 收到通知并更新');

  }

}

  

// 具体观察者类 B

class 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响应式系统

事件总线

相关推荐
[J] 一坚21 分钟前
嵌入式高手C
c语言·开发语言·stm32·单片机·mcu·51单片机·iot
odoo中国21 分钟前
Odoo 19技术教程 : 如何在 Odoo 19 中创建 Many2one 组件
开发语言·odoo·odoo19·odoo技术·many2one
逻辑驱动的ken32 分钟前
Java高频面试考点场景题14
java·开发语言·深度学习·面试·职场和发展·求职招聘·春招
techdashen2 小时前
Cloudflare 如何把一个大型代理拆成三个小服务来提升可靠性
开发语言·rust
geovindu2 小时前
go: Chain of Responsibility Pattern
开发语言·设计模式·golang·责任链模式
十五年专注C++开发3 小时前
WaitingSpinnerWidget: 一个高度可配置的自定义Qt等待加载动画组件
开发语言·c++·qt·waitingspinner
苍煜3 小时前
ThreadPoolExecutor线程池终极全解:同步异步判定+SpringBoot生产实战
java·开发语言·spring boot
fengfuyao9853 小时前
EWT(经验小波变换)MATLAB实现与应用
开发语言·matlab
宁雨桥7 小时前
深入理解 async/await的原理
前端·javascript·es8
MasonYyp7 小时前
基于Python可定制开发的智能体框架
开发语言·python