1.發(fā)布/訂閱模式

/**
 * 發(fā)布訂閱者模式,
 * 每一個訂閱者都是相互獨立的只和發(fā)布者有關(guān)系恩静，
 * 與發(fā)布者是一對多的關(guān)系焕毫，也可以是一對一的關(guān)系蹲坷。
 */
function pubSub() {
  var topics = {};
  function subScribe(topic, fn) {
    if (!topics[topic]) {
      topics[topic] = [];
    }
    //并未去重,如果去重的話不能使用解構(gòu)賦值,因為[...new Set(arr)]這種方式只能去重基本數(shù)值類型,fn是函數(shù)引用類型
    topics[topic].push(fn);
  }
  function publish(topic, ...args) {
    // console.log(topics[topic].length)
    if (!topics[topic]) return;
    // 迭代相同topic值對應(yīng)的函數(shù)
    for (let fn of topics[topic]) {
      fn(...args)
    }

  }
  return {
    subScribe, publish
  }
}
var pubSub1 = new pubSub();
pubSub1.subScribe('add', function (a, b) {
  console.log(a + b)
})
pubSub1.subScribe('minus', function (a, b) {
  console.log(a - b)
})
// pubSub1.subScribe('minus', function (a, b) {
//   console.log(a - b - 1)
// })
/**
 * 發(fā)布訂閱者模式
 * 對象寫法
 */
console.log("==================================")
const event = {
  clientList: [],
  listen: function (key, fn) {
    if (!this.clientList[key]) {
      this.clientList[key] = []
    }
    this.clientList[key].push(fn)
  },
  trigger: function () {
    const key = Array.prototype.shift.call(arguments)
    const fns = this.clientList[key]
    if (!fns || fns.length === 0) {
      return false
    }
    for (let i = 0, fn; fn = fns[i++];) {
      fn.apply(this, arguments)
    }
  },
  remove: function (key, fn) {
    const fns = this.clientList[key]
    if (!fns) {
      return false
    }
    if (!fn) {
      fns && (fns.length = 0)
    } else {
      for (let l = fns.length - 1; l >= 0; l--) {
        const _fn = fns[l]
        if (_fn === fn) {
          fns.splice(l, 1)
        }
      }
    }
  }
}
const installEvent = (obj) => {
  for (let i in event) {
    obj[i] = event[i]
  }
}
const events = {}
installEvent(events)
// 訂閱信息
events.listen('newMessage', fn = (say) => {
  console.log('say:listen:' + say)
})
// 發(fā)布信息
events.trigger('newMessage', 'hello')
events.remove('newMessage', (say) => {
  console.log('say:remove:' + say)
})

2.觀察者模式

在觀察者模式中，觀察者需要直接訂閱目標(biāo)事件邑飒。在目標(biāo)發(fā)出內(nèi)容改變的事件后循签，直接接收事件并作出響應(yīng)。發(fā)布訂閱模式相比觀察者模式多了個事件通道疙咸，訂閱者和發(fā)布者不是直接關(guān)聯(lián)的县匠。
這段話可以看出上面的例子是發(fā)布訂閱模式。訂閱者A和發(fā)布者B是通過pubsub這個對象關(guān)聯(lián)起來的撒轮，他們沒有直接的交流乞旦。
直接上栗子：

/**
 * 觀察者模式
 */
//觀察者 ->可理解為訂閱者
class Observer {
  update() {
    console.log('update')
  }
}
class Observer1 {
  update() {
    console.log('update1')
  }
}
//目標(biāo) -> 可理解為發(fā)布者
class Subject {
  constructor() {
    this.subs = [];
  }
  //添加訂閱者，這里其實是添加觀察者题山，觀察者可理解為訂閱者
  addSub(subScribe) {
    this.subs.push(subScribe);
    console.log(this.subs)
  }
  notify() {
    this.subs.forEach(sub => {sub.update()})
  }
}

let subject = new Subject();
let observer = new Observer();
let observer1 = new Observer1();
//目標(biāo)添加觀察者了
subject.addSub(observer);
subject.addSub(observer1);
//目標(biāo)發(fā)布消息調(diào)用觀察者的更新方法了
subject.notify();   //update

可以看到目標(biāo)和觀察者是直接聯(lián)系在一起的兰粉。觀察者把自身添加到了目標(biāo)對象中，可見和發(fā)布訂閱模式差別還是很大的顶瞳。在這種模式下玖姑，目標(biāo)更像一個發(fā)布者，他讓添加進來的所有觀察者都執(zhí)行了update函數(shù)慨菱，而觀察者就像一個訂閱者焰络。

3.兩個模式的區(qū)別

定義

• 觀察者模式
  目標(biāo)和觀察者是基類，目標(biāo)提供維護觀察者的一系列方法符喝，觀察者提供更新接口闪彼。具體觀察者和具體目標(biāo)繼承各自的基類，然后具體觀察者把自己注冊到具體目標(biāo)里协饲，在具體目標(biāo)發(fā)生變化時候畏腕，調(diào)度觀察者的更新方法课蔬。

  
  
  8066565-e531d0901175b641.png
• 發(fā)布/訂閱模式
  訂閱者把自己想訂閱的事件注冊到調(diào)度中心，當(dāng)該事件觸發(fā)時候郊尝，發(fā)布者發(fā)布該事件到調(diào)度中心（順帶上下文）二跋，由調(diào)度中心統(tǒng)一調(diào)度訂閱者注冊到調(diào)度中心的處理代碼。
  
  8066565-4ecebbe0a281dc53.png
  
  我們再用一個圖來直觀地感受一下兩種模式之間的區(qū)別：
  
  8066565-591c8c1ebef13ce6.jpg
  
  觀察者模式和發(fā)布／訂閱模式的區(qū)別是：
  從上面的圖片中可以看到流昏，最大的區(qū)別是調(diào)度的地方扎即。雖然兩種模式都存在訂閱者和發(fā)布者（具體觀察者可認為是訂閱者、具體目標(biāo)可認為是發(fā)布者）况凉，但是觀察者模式是由具體目標(biāo)調(diào)度的谚鄙，而發(fā)布/訂閱模式是統(tǒng)一由調(diào)度中心調(diào)的，所以觀察者模式的訂閱者與發(fā)布者之間是存在依賴的刁绒，而發(fā)布/訂閱模式則不會闷营。
  在發(fā)布訂閱模式中，組件是松散耦合的知市，正好和觀察者模式相反傻盟。
  參考博客：http://www.reibang.com/p/f0f22398d25d
  http://www.reibang.com/p/2f94d7596522
  http://www.reibang.com/p/e751d0ef4557