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

事件总线

相关推荐
程序猿的程3 小时前
开源一个 React 股票 K 线图组件,传个股票代码就能画图
前端·javascript
大雨还洅下4 小时前
前端JS: 虚拟dom是什么? 原理? 优缺点?
javascript
唐叔在学习4 小时前
[前端特效] 左滑显示按钮的实现介绍
前端·javascript
青青家的小灰灰5 小时前
深入理解事件循环:异步编程的基石
前端·javascript·面试
前端Hardy6 小时前
HTML&CSS&JS:打造丝滑的3D彩纸飘落特效
前端·javascript·css
前端Hardy6 小时前
HTML&CSS&JS:丝滑无卡顿的明暗主题切换
javascript·css·html
UIUV7 小时前
node:child_process spawn 模块学习笔记
javascript·后端·node.js
烛阴8 小时前
Three.js 零基础入门:手把手打造交互式 3D 几何体展示系统
javascript·webgl·three.js
颜酱8 小时前
单调栈:从模板到实战
javascript·后端·算法
_AaronWong10 小时前
Electron 实现仿豆包划词取词功能:从 AI 生成到落地踩坑记
前端·javascript·vue.js