摘要：什么是發布訂閱模式什么是發布訂閱模式我這里不多就不多闡述了，給大家提供幾個我覺得講的比較好的博文，請各位自行閱讀發布訂閱模式解釋這一篇文章應該是一個寫的，但是設計模式這種東西并不分語言，各位可以借鑒一下中理解發布訂閱模式這一篇是我們前

什么是發布訂閱模式我這里不多就不多闡述了，給大家提供幾個我覺得講的比較好的博文，請各位自行閱讀
發布-訂閱模式解釋 這一篇文章應該是一個java coder寫的，但是設計模式這種東西并不分語言，各位可以借鑒一下
Javascript中理解發布--訂閱模式這一篇是我們前端人寫的，但是比較長，大家有耐心可以看看

我對發布中心的實現，可以不看（看了能夠更好的理解發布訂閱模式）

//實現發布中心
/*
* log=[{
*   index: Number,                日志編號(自增)
*   type: String,                 日志類型("subscribe","unsubscribe","publish")
*   eventName: String,            事件名
*   time: new Date(),             時間
*   fun：Function                 訂閱/取訂的方法（只有日志類型為"subscribe"或"unsubscribe"的才有）
*   param：Object                 觸發事件時的參數（只有日志類型為"publish"的才有）
* }]
* eventCenter = {
*   eventName:[Function,Function]  //eventName即為事件名，其值為訂閱方法列表
* }
* .subscribe(eventName, fun)        訂閱  eventName:事件名 fun:訂閱方法
* .unsubscribe(eventName, fun)      取訂  eventName:事件名 fun:訂閱方法
* .publish(eventName[,param])       發布  eventName:事件名 param:事件參數
* .showLog([filter])                日志展示 filter 過濾器，同數組的過濾器用法 返回過濾后的log
* .showEventCenter([eventName])     事件中心 eventName 事件名 返回事件綁定的方法
* */
let subscribeCenter = function () {
  //事件中心
  let eventCenter = {};
  //日志
  let log = [];

  //添加日志函數
  function pushLog(type, eventName, fun, param) {
    let info = {
      index: log.length,
      type: type,
      eventName: eventName,
      time: new Date()
    };
    if (fun) {
      info.fun = fun;
    }
    if (param) {
      info.param = param;
    }
    log.push(info)
  }

  return {
    //訂閱
    subscribe(eventName, fun) {
      pushLog("subscribe", eventName, fun);
      eventCenter[eventName] = eventCenter[eventName] || [];
      eventCenter[eventName].push(fun);
    },
    //取消訂閱
    unsubscribe(eventName, fun) {
      pushLog("unsubscribe", eventName, fun);
      let onList = eventCenter[eventName];
      if (onList) {
        for (let i = 0; i < onList.length; i++) {
          if (onList[i] === fun) {
            onList.splice(i, 1);
            return
          }
        }
      }
    },
    //發布
    publish(eventName, param) {
      pushLog("publish", eventName, null, param)
      let onList = eventCenter[eventName];
      if (onList) {
        for (let i = 0; i < onList.length; i++) {
          onList[i](param)
        }
      }
    },
    //顯示日志
    showLog(filter) {
      filter = filter || (() => true);
      let returnLog = log.filter(filter);
      returnLog.forEach(x => {
        let y = {};
        for (let key in x) {
          y[key] = x[key]
        }
        return y
      });
      return returnLog;
    },
    //顯示事件中心
    showEventCenter(eventName) {
      let selectEM = eventName ? eventCenter[eventName] : eventCenter, returnEM = {};
      for (let key in selectEM) {
        returnEM[key] = [];
        selectEM[key].forEach(x => {
          returnEM[key].push(x)
        });
      }
      return returnEM
    }
  }
}();

如果有看我上一篇文章中事件監聽實現的朋友應該對這個不部分代碼有一種熟悉的感覺，確實事件監聽和發布訂閱的實現非常的像。我主要多做的就是一個日志的拓展，保證了每次的動作都可以被監聽和查看；

這個在上面是有的，但是因為上面的部分有一些同學是不看的，所以就在這里摘出來，方便這些同學了解發布中心的用法

/*
* log=[{
*   index: Number,                日志編號(自增)
*   type: String,                 日志類型("subscribe","unsubscribe","publish")
*   eventName: String,            事件名
*   time: new Date(),             時間
*   fun：Function                 訂閱/取訂的方法（只有日志類型為"subscribe"或"unsubscribe"的才有）
*   param：Object                 觸發事件時的參數（只有日志類型為"publish"的才有）
* }]
* eventCenter = {
*   eventName:[Function,Function]  //eventName即為事件名，其值為訂閱方法列表
* }
* .subscribe(eventName, fun)        訂閱  eventName:事件名 fun:訂閱方法
* .unsubscribe(eventName, fun)      取訂  eventName:事件名 fun:訂閱方法
* .publish(eventName[,param])       發布  eventName:事件名 param:事件參數
* .showLog([filter])                日志展示 filter 過濾器，同數組的過濾器用法 返回過濾后的log
* .showEventCenter([eventName])     事件中心 eventName 事件名 返回事件綁定的方法
* */

這里是重點，需要大家仔細看，理解了這段代碼不光可以解決異步問題，還可以理解發布訂閱者模式是如何應用的；

//發布者
let f1 = function () {
  setTimeout(function () {
    console.log(""done" 事件發布 參數:", 123);
    subscribeCenter.publish("done", 123);
    console.log("事件中心", subscribeCenter.showEventCenter());
    console.log("f3 取訂 "done"");
    subscribeCenter.unsubscribe("done", f3);
    setTimeout(function () {
      console.log(""done" 事件發布 參數:", 233);
      subscribeCenter.publish("done", 233);
      console.log("事件中心", subscribeCenter.showEventCenter());
      console.log("日志", subscribeCenter.showLog());
    }, 100)
  }, 100)
};
//訂閱者
let f2 = function (param) {
  console.log("f2 is running, param is", param);
};
//訂閱者
let f3 = function (param) {
  console.log("f3 is running, param is", param)
};

//訂閱
console.log("f2 訂閱 "done"");
subscribeCenter.subscribe("done", f2);
console.log("f3 訂閱 "done"");
subscribeCenter.subscribe("done", f3);
//發布
f1();

先貼運行結果

在這里可以看到，該模式與事件監聽模式非常相似，但是所有的發布都通過了同一個發布中心來控制，這樣的話可以方便我們追蹤整個事件的狀態；