因為項目沒有涉及到一些復雜操作，當時看了博客據說redux很麻煩一般不建議用，當時寫項目的時候覺的事件的處理回調很是麻煩，就寫了一個EventManager，在此紀錄一下，拋磚引玉，希望有更好的封裝，后期可能也會轉向redux。

先看代碼吧 其實很簡單。

  //建立一個事務管理對象
 let EventManager = {};
  //記錄事物的操作  一個對象 key為type  value本質是一個一維數組
  EventManager.eventList = {};

 /**
 * 添加監(jiān)聽
 * @param type  一個字符串 用來記錄事務名稱
 * @param callback   事務對應的方法回調
 * @param target    事務對應的類 一般為this
 */
  
  EventManager.on = function (type, callback, target) {
    //判斷是否有此事務，如果沒有就實例化value為空的一維數組。
    if (!EventManager.eventList.hasOwnProperty(type)) {
    EventManager.eventList[type] = [];
}
//通過target來記錄回調，確保在某個地方調用的callback
let event = {target: target, callback: callback};
EventManager.eventList[type].push(event);
}

  /**
   * 移除監(jiān)聽
   * @param type
   * @param target
   */
EventManager.off = function (type, target) {

if (!EventManager.eventList.hasOwnProperty(type)) {
    return;
}
//通過事務名稱和target來移除事務
for (let i = 0; i < EventManager.eventList[type].length; i++) {
    if (EventManager.eventList[type][i].target === target) {
        EventManager.eventList[type].splice(i, 1);
    }
    }
}

/**
 * 事件觸發(fā)
 * @param type
 */
EventManager.emitter = function (type,param) {
if (!EventManager.eventList.hasOwnProperty(type)) {
    return;
}
  //通過事務名稱和回調的參數進行回調事務
for (let i = 0; i < EventManager.eventList[type].length; i++) {
    EventManager.eventList[type][i].callback(param);
  }
}

export default EventManager;

一般在組件使用的時候 在生命周期地方進行注冊和移除

eg：

  componentWillMount() {
    EventManager.on('setQlcNumberCount', (num) => {
        DataUtil.qlcBasketCount = num;
        this.setState({
            number: num
        });
    }, this);
}

componentWillUnmount() {
    EventManager.off('setQlcNumberCount', this);
}

在需要回調的組件中就可以進行操作

 if (this.props.loton == Constants.QLC_TYPE) {
        EventManager.emitter('setQlcNumberCount', count);
    }

如果有不明白的歡迎提問 轉載請注明出處~