订阅发布模式

Subscriber

概述

和观察者一样，包括：观察者和观察目标

观察者模式下，两者互相知道，如要添加观察目标，并没有完全解耦

可以细分管控：区分订阅

订阅发布者模式下，发布者只管发布，谁订阅了，它不知道

通过第三方集中调度，相当于解耦的观察者模式

应用

面包屑

参考代码

const Center = {
  message: {},
  publich(type, data) {
    if (!this.message[type]) return;
    this.message[type].forEach(item => item(data))
  },
  subscribe(type, cb) {
    if (!this.message[type]) {
      this.message[type] = [cb]
    } else {
      this.message[type].push(cb)
    }
  },
  unSubscribe(type, cb) {
    if (!this.message[type]) return;
    this.message = this.message[type].filter(item => item != cb)
  }
}
function test1(data) {
  console.log('test1', data);
}
function test2(data) {
  console.log('test2', data);
}          

Center.subscribe('a', test1)
Center.subscribe('b', test2)
Center.subscribe('b', test1)
Center.publich('a', 111)
Center.publich('b', 222)

面包屑

const Center = {
  message: {},
  publich(type, data) {
    if (!this.message[type]) return;
    this.message[type].forEach(item => item(data))
  },
  subscribe(type, cb) {
    if (!this.message[type]) {
      this.message[type] = [cb]
    } else {
      this.message[type].push(cb)
    }
  },
  unSubscribe(type, cb) {
    if (!this.message[type]) return;
    this.message = this.message[type].filter(item => item != cb)
  }
}
Center.subscribe('updateDOM', data => {
  document.querySelector('#bread').innerHTML = data
})
news.addEventListener('click', (e) => {
  if (e.target.tagName == 'LI') {
    Center.publich('updateDOM', e.target.innerHTML)
  }
})