订阅发布和观察者模式

╰+攻爆jí腚メ 2022-08-28 14:47 207阅读 0赞

# 发布订阅模式 #

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

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

## 案例 ##

> 事件调度中心

// 事件中心,做事件调度
     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…