订阅发布和观察者模式_订阅观察者模式-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_38560742/article/details/120316133

本文探讨了发布订阅模式和观察者模式在软件设计中的重要性，通过案例展示了如何在事件调度和数据双向绑定中应用这两种模式。利用发布订阅模式，可以实现代码解耦，提高模块间的独立性；而观察者模式则通过维护对象间的一对多依赖关系，当被观察者状态改变时，所有观察者都会收到通知并自动更新。以Vue2.x的响应式数据绑定为例，阐述了观察者模式在实际开发中的具体实践。

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

发布订阅模式

把多个方法暂存起来，最后一次触发执行

作用: 解偶
使用场景: 如，多个类或者函数内，可以分散订阅某个操作，最后统一发布。分散的好处就是不做代码侵入，各自为政，实现代码低耦合。
几乎所有的库，都会有基于该设计模式的功能

案例

事件调度中心

// 事件中心,做事件调度
 const fs = require("fs");
 let events = {
   _events: [],
   on(fn) {
     this._events.push(fn);
   },
   emit(data) {
     this._events.forEach((fn) => fn(data));
   },
 };

订阅

 let arr = [];
 events.on((data) => {
   // 订阅
   console.log("读取");
   arr.push(data);
   if (arr.length === 2) {
     console.log("读取完毕", arr); // 订阅完成
   }
 });

发布

 fs.readFile("./a.txt", "utf-8", (err, data) => {
   events.emit(data); // 发布
 });

 fs.readFile("./b.txt", "utf-8", (err, data) => {
   events.emit(data);
 });

观察者模式

基于发布/订阅模式
该模式存在两个角色：观察者和被观察者
结合vue理解
在vue2.x 数据双向绑定中，只要vue的数据（状态）变化,依赖该数据的视图就要更新

案例

被观察者

class Subject {
  constructor(name) {
    this.name = name;
    this.observers = []; // 存放有哪些对象正在观察我
    this.state = "state"; // 状态数据
  }
  attach = (o) => {
    this.observers.push(o); // 订阅要观察我的对象
  };
  setState = (newState) => {
    this.state = newState;
    this.observers.forEach((o) => o.update(this.name, newState)); //只要我状态发生变化，我就会同步给我给所有观察我的对象
  };
}

观察者

class Observer {
  constructor(name) {
    this.name = name;
  }
  update = (o, state) => { //接收被观察者同步过来的状态
    console.log(this.name + ":" + o + state);
  };
}

被观察者实例

let s = new Subject("sub");

有若干的观察者

let o1 = new Observer("ob1");
let o2 = new Observer("ob2");

建立观察者和被观察者之间的关系

s.attach(o1);
s.attach(o2);

变更被观察者状态

s.setState(“变化了”);
s.setState(“状态变更了”);

关联技术

vue 数据双向绑定
vuex…