react-native 之事件管理EventManager

因为项目没有涉及到一些复杂操作，当时看了博客据说redux很麻烦一般不建议用，当时写项目的时候觉的事件的处理回调很是麻烦，就写了一个EventManager，在此纪录一下，抛砖引玉，希望有更好的封装，后期可能也会转向redux。

先看代码吧 其实很简单。

  //建立一个事务管理对象
 let EventManager = {};
  //记录事物的操作  一个对象 key为type  value本质是一个一维数组
  EventManager.eventList = {};

 /**
 * 添加监听
 * @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);
}

  /**
   * 移除监听
   * @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);
    }
    }
}

/**
 * 事件触发
 * @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);
    }

如果有不明白的欢迎提问 转载请注明出处~