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

事件总线

相关推荐
社恐的下水道蟑螂15 分钟前
从字符串到像素:深度解析 HTML/CSS/JS 的页面渲染全过程
javascript·css·html
Hello_WOAIAI18 分钟前
2.4 python装饰器在 Web 框架和测试中的实战应用
开发语言·前端·python
搬山.摧城25 分钟前
线程池和单例模式
开发语言·单例模式
百锦再28 分钟前
第1章 Rust语言概述
java·开发语言·人工智能·python·rust·go·1024程序员节
一叶之秋141239 分钟前
QT背景介绍与环境搭建
开发语言·qt
java1234_小锋1 小时前
PyTorch2 Python深度学习 - 模型保存与加载
开发语言·python·深度学习·pytorch2
行走的陀螺仪1 小时前
uni-app + Vue3 实现折叠文本(超出省略 + 展开收起)
前端·javascript·css·uni-app·vue3
冴羽1 小时前
JavaScript 异步循环踩坑指南
前端·javascript·node.js
ACP广源盛139246256731 小时前
(ACP广源盛)GSV2231---DisplayPort 1.4 MST 到 HDMI 2.0/DP/Type-C 转换器(带嵌入式 MCU)
c语言·开发语言·单片机·嵌入式硬件·音视频·mst
quant_19861 小时前
【教程】使用加密货币行情接口 - 查询比特币实时价格
开发语言·后端·python·websocket·网络协议