因为项目没有涉及到一些复杂操作，当时看了博客据说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);
}
如果有不明白的欢迎提问 转载请注明出处~
