发布订阅模式

发布/订阅模式

什么是发布订阅模式？

此模式分为发布者和订阅者两个概念，发布者收集订阅者的需求，然后在某个时刻告知订阅者

例子：

小王去小卖部买充电器，小李去小卖部买剃须刀，但是充电器和剃须刀都卖完了，于是他们在小卖部老板那儿进行了登记，等到货了老板就通知他们。

解析：
此案例中，小王和小李就是订阅者，小卖部老板就是发布者，等到货了之后老板就会给在他这儿登记过的人发送特定的消息

怎么一步一步实现发布订阅模式？

发布者

1. 首先定义发布者

class Dep {}

2. 因为是一个收集的过程，所以可以定义一个数组，每收集一个信息就保存到数组中，由此可以再定义一个方法将收集到的信息放进数组中

class Dep {
  constructor() {
    this.subList = [];
  }
  addSub(sub) {
    this.subList.push(sub);
  }
}

3. 发布者在特定时刻会将所有收集到的信息进行发布，所以可以定义一个发布的方法，将 subList 中的所有订阅者信息进行发布

class Dep {
  constructor() {
    this.subList = [];
  }
  addSub(sub) {
    this.subList.push(sub);
  }
  notify() {
    this.subList.forEach(sub => sub.callPhone());
  }
}

4. 实例化发布者

const laoban = new Dep();

订阅者

1. 首先定义发布者

class Watcher {}

2. 订阅者在发布者那里需要传递一个方法，来告知发布者到时传递给他什么，比如小王需要登记让老板告诉他充电器到货了，这里我们可以定义一个回调到订阅者里面，然后发布者发布的时候将此回调进行调用就行

class Watcher {
  constructor(cb) {
    this.cb = cb;
  }
  callPhone() {
    this.cb();
  }
}

3. 实例化订阅者

const xiaowang = new Watcher(() => {
  console.log("充电器到货了");
});
const xiaoli = new Watcher(() => {
  console.log("剃须刀到货了");
});

将订阅者添加进发布者中，然后在某个特定时机统一执行

console.log("小王来买充电器，充电器没货了，进行了登记");
laoban.addSub(xiaowang);
console.log("小李来买剃须刀，剃须刀没货了，进行了登记");
laoban.addSub(xiaoli);

setTimeout(() => {
  // 到货了
  console.log("两天后到货了");
  laoban.notify();
}, 2000);

全部代码

class Dep {
  constructor() {
    this.subList = [];
  }
  addSub(sub) {
    this.subList.push(sub);
  }
  notify() {
    this.subList.forEach(sub => sub.callPhone());
  }
}

class Watcher {
  constructor(cb) {
    this.cb = cb;
  }
  callPhone() {
    this.cb();
  }
}

const xiaowang = new Watcher(() => {
  console.log("充电器到货了");
});
const xiaoli = new Watcher(() => {
  console.log("剃须刀到货了");
});

const laoban = new Dep();

console.log("小王来买充电器，充电器没货了，进行了登记");
laoban.addSub(xiaowang);
console.log("小李来买剃须刀，剃须刀没货了，进行了登记");
laoban.addSub(xiaoli);
setTimeout(() => {
  // 到货了
  console.log("两天后到货了");
  laoban.notify();
}, 2000);

总结： 一个很常见的设计模式，在 vue 的双向数据绑定中有用到，代码很少，可以阅读一下