用JS写一个发布订阅模式

目录

1 场景引入2 代码优化2.1 解决增加粉丝问题2.2 解决添加作品问题3 观察者模式4 经纪人登场5 发布订阅模式6 观察者模式和发布订阅模式的对比

什么是发布订阅模式？能手写实现一下吗？它和观察者模式有区别吗？...

1 场景引入

我们先来看这么一个场景：

假设现在有一个社交平台，平台上有一个大V叫Nami

Nami很牛，多才多艺，目前她有2个技能：会写歌、会拍视频

她会把这些作品发布到平台上。关注她的粉丝就会接收到这些内容

现在他已经有3个粉丝了，分别是：Luffy、Z}}

5 发布订阅模式

前面我们用了经纪人来负责发布和订阅的工作，而不让Star和Fan发生直接交互，达到了两者解耦的效果

这就是发布订阅模式

我们将4中的Manager进行进一步的抽象：

将“粉丝”看作订阅者(Subscriber)；将“大V”看作内容的发布者，在发布订阅模式中称为发布者(Publisher)；把“经纪人”看作发布订阅中心(或者说中间人Broker)

具体代码如下：

// 发布订阅调度中心class Broker {  constructor() {    this.subscribers = [];    // 代表主题状态    this.state = 0;  }  // 订阅  subscribe(subscriber) {    this.subscribers.push(subscriber);  }  // 更改主题状态  setState(state) {    this.state = state;    // 状态改变后，发布    this.publish();  }  getState() {    return this.state;  }  // 发布  publish() {    this.subscribers.forEach((subscriber) => subscriber.update());  }}// 发布者class Publisher {  constructor() {}  changeState(broker, state) {    broker.setState(state);  }}class Subscriber {  constructor(name, broker) {    this.name = name;    this.broker = broker;    this.broker.subscribe(this);  }  update() {    console.log(`${this.name}:${this.broker.getState()}`);  }}

来运行一下看看效果：

// 创建调度中心const broker = new Broker()// 创建发布者const publisher = new Publisher()// 创建订阅者const subscribe1 = new Subscriber('s1', broker)const subscribe2 = new Subscriber('s2', broker)const subscribe3 = new Subscriber('s3', broker)// 发布者改变状态并通知调度中心，调度中心就yHzGvE会通知各个订阅者publisher.changeState(broker, 1)

6 观察者模式和发布订阅模式的对比

从角色数量看

观察者模式只有两个角色：观察者和被观察者 发布订阅模式有三个角色：发布者、订阅者以及中间人（发布订阅中心）

从耦合程度看

观察者模式处于一种松耦合的状态，即两者依然有交互，但是又很容易各自扩展且不相互影响 发布订阅模式中的发布者和订阅者则完全不存在耦合，达到了对象之间解耦的效果

从意图来看

两者都：实现了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知并自动更新