手摸手实现Mini-Observer，还原一把Vue背后的响应式（系列2）

---

一、发布者-订阅者模式

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

二、举例

小明和小强是两位主播，由于最近人气低迷，都想搞一波福利给家人们，提升一下人气。小王想到了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中的响应式背后就有其影子。