文章目录

• 一、发布者-订阅者模式
• 二、举例
• 三、一步一步完成发布者-订阅者模式
• • 1. 发布者
  • 2. 订阅者
  • 3. 特定执行
  • 4. 全部代码
• 总结

一、发布者-订阅者模式

这是一种比较常见的设计模式。顾名思义，在这种设计模式下有发布者，订阅者两种角色，
发布者会记录下订阅者的需求，然后等到一个特定时间点会通知到订阅者。

二、举例

小明和小强是两位主播，由于最近人气低迷，都想搞一波福利给家人们，提升一下人气。小王想到了iPhone，小李想到了IPad，于是两人不约而同，到了某强北的二楼档口。可惜不巧，iPhone和iPad这几天都没货了，档口老板给他们在需求单上进行登记，等到货了就会通知他们。

分析：

在此例中，小明和小强充当订阅者，档口老板就是发布者。等到货，老板就会给登记用户发拿货通知

三、一步一步完成发布者-订阅者模式

1. 发布者

（1）定义发布者（档口老板）

  class Dep{}

（2）定义一张登记表（subList），并往表中添加客户需求和联系方式

class Dep {  constructor() {    // 登记表    this.subList = []  }  addList(sub) {    this.subList.push(sub)  }  // 到货后，老板根据登记表每位用户预留的电话，挨个通知客户  notify() {    this.subList.forEach((sub) => {      sub.phone()    })  }}

（3）到货后，老板根据登记表每位用户预留的电话，挨个通知客户

class Dep {  constructor() {    // 登记表    this.subList = []  }  addList(sub) {    this.subList.push(sub)  }  notify() {    this.subList.forEach((sub) => {      sub.phone()    })  }}

（4）实例化老板（发布者）

 const boss = new Dep()

至此，老板的动作定义完成。

2. 订阅者

（1）定义订阅者（档口客户）

 class Watcher {}

（2）档口客户需要登记需求，让老板知道他的诉求，并能到货后通知到他

 class Watcher {  constructor(cb) {    this.cb = cb  }  phone() {    this.cb()  }}

（3）实例化档口客户（订阅者）

const xiaoming = new Watcher(() => {  console.log('iPhone到货了')})const xiaoqiang = new Watcher(() => {  console.log('iPad到货了')})

3. 特定执行

console.log('小明需要IPhone,没货了，老板进行登记')boss.addList(xiaoming)console.log('小强需要IPad,没货了，老板进行登记')boss.addList(xiaoqiang)setTimeout(() => {  console.log('货来了,老板进行通知')  boss.notify()}, 1000)

4. 全部代码

// 定义发布者（档口老板）class Dep {  constructor() {    // 老板手中的登记表    this.subList = []  }  // 老板往登记表中添加客户需求信息和联系方式  addList(sub) {    this.subList.push(sub)  }  // 到货后，老板根据登记表预留的电话挨个通知客户  notify() {    this.subList.forEach((sub) => {      sub.phone()    })  }}// 实例化发布者const boss = new Dep()// 定义订阅者（档口客户）class Watcher {  constructor(cb) {    this.cb = cb  }  phone() {    this.cb()  }}// 实例化订阅者const xiaoming = new Watcher(() => {  console.log('iPhone到货了')})const xiaoqiang = new Watcher(() => {  console.log('iPad到货了')})console.log('小明需要IPhone,没货了，老板进行登记')boss.addList(xiaoming)console.log('小强需要IPad,没货了，老板进行登记')boss.addList(xiaoqiang)setTimeout(() => {  console.log('货来了,老板进行通知')  boss.notify()}, 1000)

总结

以上就是今天要讲的内容，本文仅仅以一个生活示例，简单介绍了发布者-订阅者模式的机理，其应用场景非常广泛，Vue中的响应式背后就有其影子。