浅谈发布订阅者模式

1.概念理解（图形解析）

首先，从图中可以很直接的看到

1. [发布/订阅模式] 大致由3部分组成，分别是发布者、调度中心、订阅者；
2. 订阅者 与 发布者 属于一对多的关系；
3. 订阅者 和 发布者 之间不存在依赖关系，他们并不直接调度(调用)，而是通过这个调度中心产生联系

为便于理解，举个例子；

比如我们很喜欢看某个公众号的文章，但是我们不知道什么时候发布新文章，要不定时的去翻阅；这时候，我们可以关注该公众号，当有文章推送时，会有消息及时通知我们文章更新了。

上面一个看似简单的操作，其实是一个典型的发布订阅模式，公众号属于发布者，用户属于订阅者；用户将订阅公众号的事件注册到调度中心，公众号作为发布者，当有新文章发布时，公众号发布该事件到调度中心，调度中心会及时发消息告知用户

2.应用场景

1. 实时聊天室（消息可以异步落到数据库持久化）成员订阅同一个通道，并且发布消息在同一个通道；
2. 简单的消息队列场景，页面无刷新进行数据更新/自增；
3. vue双向绑定：像 vue中通常多个dom都使用同一个变量，也就是当变量的内容发生改变时，多个dom都需要执行相同的操作（更新页面），那么就需要用到发布订阅模式；

3.实现发布-订阅模式

实现步骤

1、创建一个空对象，用于存放 [发布者]、[订阅者]、[调度中心]
2、在该对象上创建一个缓存列表（调度中心）
3、在对象上创建一个 [订阅逻辑函数]，用来把订阅者订阅的内容及需要执行的 fn 都加到缓存列表中（订阅者注册事件到调度中心）
4、在对象上创建一个 [发布逻辑函数]，用来遍历执行调度中心的所有方法（发布者发布事件到调度中心，调度中心处理代码）

所以，多个订阅者订阅同一个内容（多对一），那么调度中心的数据结构应该是

{
  'aaa': [fn1, fn2, fn3, fn4],
  'bbb': [fn5, fn6, fn7, fn8]
}

'aaa' 和 'bbb'可以理解为订阅的内容，里面的数组是订阅者传递给调度中心要执行的逻辑函数；
把订阅 aaa 的所有逻辑函数放在同一个数组里，那么当发布者发布的时候遍历 aaa 中所有的函数并执行（可以接收由发布者传递的参数）

最后，实现一个简单的发布/订阅模式

  // 创建对象
  const bus = {
  	// 调度中心
    map: {},
    // 订阅
    subscribe(dataProp, fn) {
      if (!this.map[dataProp]) {
        this.map[dataProp] = []
      }
      this.map[dataProp].push(fn);
    },
    // 发布
    publish(dataProp, data) {
      this.map[dataProp] && this.map[dataProp].forEach(fn => {
        fn(data)
      })
    },
  }

  // 订阅者
  bus.subscribe('aaa', (arg) => {
    console.log("aaa1", arg);
  });
  bus.subscribe('aaa', (arg) => {
    console.log("aaa2", arg);
  })

  bus.subscribe('bbb', (arg) => {
    console.log("bbb1", arg);
  })
  bus.subscribe('bbb', (arg) => {
    console.log("bbb2", arg);
  })

  // 发布者
  bus.publish("aaa", "我是发布者，发布订阅aaa的参数");
  bus.publish("bbb", "我是发布者，发布订阅bbb的参数");