前端異步解決方案-2（發(fā)布/訂閱模式）；

chuyao 發(fā)布于2019-08-23 16:46 / 736人閱讀

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

什么是發(fā)布訂閱模式

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

發(fā)布中心實(shí)現(xiàn)

我對發(fā)布中心的實(shí)現(xiàn)，可以不看（看了能夠更好的理解發(fā)布訂閱模式）

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

  //添加日志函數(shù)
  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
          }
        }
      }
    },
    //發(fā)布
    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
    }
  }
}();

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

發(fā)布中心API

這個(gè)在上面是有的，但是因?yàn)樯厦娴牟糠钟幸恍┩瑢W(xué)是不看的，所以就在這里摘出來，方便這些同學(xué)了解發(fā)布中心的用法

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

發(fā)布/訂閱模式在異步中的應(yīng)用

這里是重點(diǎn)，需要大家仔細(xì)看，理解了這段代碼不光可以解決異步問題，還可以理解發(fā)布訂閱者模式是如何應(yīng)用的；

//發(fā)布者
let f1 = function () {
  setTimeout(function () {
    console.log(""done" 事件發(fā)布 參數(shù):", 123);
    subscribeCenter.publish("done", 123);
    console.log("事件中心", subscribeCenter.showEventCenter());
    console.log("f3 取訂 "done"");
    subscribeCenter.unsubscribe("done", f3);
    setTimeout(function () {
      console.log(""done" 事件發(fā)布 參數(shù):", 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);
//發(fā)布
f1();

先貼運(yùn)行結(jié)果

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