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

事件总线

相关推荐
小程故事多_802 小时前
Agent Infra核心技术解析:Sandbox sandbox技术原理、选型逻辑与主流方案全景
java·开发语言·人工智能·aigc
沐知全栈开发2 小时前
SQL 日期处理指南
开发语言
黎雁·泠崖2 小时前
【魔法森林冒险】3/14 Allen类(一):主角核心属性与初始化
java·开发语言
黎雁·泠崖2 小时前
【魔法森林冒险】1/14 项目总览:用Java打造你的第一个回合制冒险游戏
java·开发语言
独好紫罗兰2 小时前
对python的再认识-基于数据结构进行-a006-元组-拓展
开发语言·数据结构·python
C++ 老炮儿的技术栈2 小时前
Qt 编写 TcpClient 程序 详细步骤
c语言·开发语言·数据库·c++·qt·算法
yuuki2332332 小时前
【C++】继承
开发语言·c++·windows
222you2 小时前
Redis的主从复制和哨兵机制
java·开发语言
牛奔2 小时前
如何理解 Go 的调度模型,以及 G / M / P 各自的职责
开发语言·后端·golang
梵刹古音2 小时前
【C++】 析构函数
开发语言·c++