观察者模式

最新推荐文章于 2025-03-11 10:43:25 发布

WebKoalaBoy

最新推荐文章于 2025-03-11 10:43:25 发布

阅读量117

点赞数

分类专栏：随笔文章标签： 1024程序员节 javascript 设计模式

本文链接：https://blog.youkuaiyun.com/hongyu799/article/details/109265909

版权

随笔专栏收录该内容

8 篇文章

订阅专栏

本文介绍了观察者模式，也称为发布-订阅模式，它用于建立对象间一对多的关系，使得当一个对象状态改变时，所有依赖它的对象都会得到通知。通过示例展示了发布者和订阅者的角色，以及如何在需求变更时通知所有开发者。观察者模式常用于跨层级通信和事件绑定等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

观察者模式又叫发布-订阅模式，其用来定义对象之间的一对多依赖关系，以便当一个对象更改状态时，将通知其所有依赖关系。通过“别名”可以知道，观察者模式具备两个角色，即“发布者”和“订阅者”。

// 定义发布者类
class Publisher {
  constructor () {
    this.observers = [];
    this.prdState = null;
  }
  // 增加订阅者
  add (observer) {
    this.observers.push(observer);
  }
  // 通知所有订阅者
  notify () {
    this.observers.forEach((observer) => {
      observer.update(this);
    })
  }
  // 该方法用于获取当前的 prdState
  getState () {
    return this.prdState;
  }

  // 该方法用于改变 prdState 的值
  setState (state) {
    // prd 的值发生改变
    this.prdState = state;
    // 需求文档变更，立刻通知所有开发者
    this.notify();
  }
}

// 定义订阅者类
class Observer {
  constructor () {
  this.prdState = {};
  }
  update (publisher) {
    // 更新需求文档
    this.prdState = publisher.getState();
    // 调用工作函数
    this.work();
  }
  // work 方法，一个专门搬砖的方法
  work () {
    // 获取需求文档
    const prd = this.prdState;
    console.log(prd);
  }
}

// 创建订阅者：前端开发小王
const wang = new Observer();
// 创建订阅者：后端开发小张
const zhang = new Observer();
// 创建发布者：产品经理小曾
const zeng = new Publisher();
// 需求文档
const prd = {
  url: 'xxxxxxx'
};
// 小曾开始拉人入群
zeng.add(wang);
zeng.add(zhang);
// 小曾发布需求文档并通知所有人
zeng.setState(prd);

使用场景： 跨层级通信、事件绑定等。