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

事件总线

相关推荐
华如锦10 分钟前
四:从零搭建一个RAG
java·开发语言·人工智能·python·机器学习·spring cloud·计算机视觉
每天吃饭的羊23 分钟前
媒体查询
开发语言·前端·javascript
北海有初拥32 分钟前
Python基础语法万字详解
java·开发语言·python
阿里嘎多学长43 分钟前
2026-01-02 GitHub 热点项目精选
开发语言·程序员·github·代码托管
XiaoYu20021 小时前
第8章 Three.js入门
前端·javascript·three.js
天远云服1 小时前
Go语言高并发实战:集成天远手机号码归属地核验API打造高性能风控中台
大数据·开发语言·后端·golang
这个一个非常哈1 小时前
element之,自定义form的label
前端·javascript·vue.js
2501_941877131 小时前
在法兰克福企业级场景中落地零信任安全架构的系统设计与工程实践分享
开发语言·php
李瑞丰_liruifengv1 小时前
Claude Agent SDK 最简玩法:几行代码配合 Markdown 轻松搭建 Agent
javascript·人工智能·程序员
bobringtheboys1 小时前
[el-tag]使用多个el-tag,自动判断内容是否超出
前端·javascript·vue.js