发布-订阅模式，简单了解

// 主题，接收对自己感兴趣的观察者，触发每个观察者
class Subject {
  constructor(name) {
    this.state = 0
    this.name = name
    // 存储一系列的（对这个主题感兴趣）观察者
    this.observers = []
  }
  addObservers(observer) {
    // 添加
    this.observers.push(observer)
  }
  removeObservers(observer) {
    // 删除
    this.observers = tthis.observers.filter(item => item != observer)
  }
  notifyObservers() {
    // 通知
    var observers = this.observers
    for (var i = 0, j = observers.length; i < j; i++) {
      observers[i].update(this.name)
    }
  }
  changeState(state) {
    this.state = state
  }
}
// 观察者，等待被触发
class Observer {
  constructor(name) {
    this.name = name
  }
  update(topic) {
    // 更新自己，对主题变化做响应
    console.log(`${this.name}订阅的${topic}更新了, ${this.name}: 做了更新操作`)
  }
  subscribe(subject) {
    subject && subject.addObservers(this)
  }
}
let book = new Subject('book')
let  coffee = new Subject('coffee')
let xiaobu = new Observer('小布')

// xiaobu 对book这个主题感兴趣，订阅了book
xiaobu.subscribe(book)
// xiaobu 对coffee感兴趣，订阅了coffee
xiaobu.subscribe(coffee)

book.changeState(2)
book.notifyObservers()

export default class Dep {
  constructor () {
    this.id = uid++
    this.subs = []
  }
  addSub (sub: Watcher) { // 添加
    this.subs.push(sub)
  }
  removeSub (sub: Watcher) {  // 删除
    remove(this.subs, sub)
  }
  depend () { // 调用观察者的 添加感兴趣的主题
    if (Dep.target) {// (Dep.target 记录了当前的观察者
      Dep.target.addDep(this)  // 观察者 对这个 主题感兴趣
    }
  }
  notify () { // 通知
    for (let i = 0, l = subs.length; i < l; i++) {
      subs[i].update()
    }
  }
}
class Watcher {
  constructor (
    vm: Component,
    cb: Function
  ) {
    this.vm = vm
    this.cb = cb
  }
  addDep (Dep) { // 添加感兴趣的主题
    dep.addSub(this)
  }
  update () { // 触发更新
    /* istanbul ignore else */
    if (this.lazy) {
      this.dirty = true
    } else if (this.sync) {
      this.run()
    } else {
      queueWatcher(this)
    }
  }
}

// 数据响应式
function defineReactive (object, key, value) {
  // dep 存储一系列的（对这个数据感兴趣）观察者
  const dep = new Dep()
  Object.defineProperty(obj, key, {
    get() {
      if (Dep.target) { // 观察者添加主题
        dep.depend() //  dep.depend() = Dep.target.addDep(this) 
      }
    },
    set(newVal) {
      dep.notify() // 通知所有人数据更新了
    }
  })
}

let eventTopic = {}
class Pushlish { // 发布者，发布通知 （通知 主题/事件通道对象  这个主题变化了，执行对应的事件)
  update (topic, ...rest) {
    eventTopic[topic]&&eventTopic[topic].forEach(listener => listener.apply(null,rest))
  }
}
class Subscriber { //  订阅者，注册主题，和事件（ 告诉 主题/事件通道对象，这个主题变换，对应执行事件)
  subscribe (topic,event) {
    if(eventTopic[topic]) {
      eventTopic[topic].push(event)
    } else {
      eventTopic[topic] = [event]
    }
  }
}
let publish = new Pushlish()
let subscribe = new Subscriber()
subscribe.subscribe('book',(name)=>{
  console.log(`${name}订阅的book更新了, ${name}: 做了更新操作`)
})
publish.update('book','小布')

class EventTopic {
  constructor() {
    this._eventTopic = {}
  }
  subscribe (topic,event) {
    if(this._eventTopic[topic]) {
      this._eventTopic[topic].push(event)
    } else {
      this._eventTopic[topic] = [event]
    }
  }
  update (topic, ...rest) {
    this.events[type]&&this.events[type].forEach(listener => listener.apply(this,rest))
  }
}
let eventTopic = new EventTopic()
eventTopic.subscribe('book',(name)=>{
  console.log(`${name}订阅的book更新了, ${name}: 做了更新操作`)
})
eventTopic.update('book','小布')