因為項目沒有涉及到一些復(fù)雜操作肯骇，當(dāng)時看了博客據(jù)說redux很麻煩一般不建議用，當(dāng)時寫項目的時候覺的事件的處理回調(diào)很是麻煩张足，就寫了一個EventManager愤钾，在此紀錄一下瘟滨，拋磚引玉，希望有更好的封裝能颁，后期可能也會轉(zhuǎn)向redux杂瘸。
先看代碼吧 其實很簡單。
//建立一個事務(wù)管理對象
let EventManager = {};
//記錄事物的操作 一個對象 key為type value本質(zhì)是一個一維數(shù)組
EventManager.eventList = {};
/**
* 添加監(jiān)聽
* @param type 一個字符串 用來記錄事務(wù)名稱
* @param callback 事務(wù)對應(yīng)的方法回調(diào)
* @param target 事務(wù)對應(yīng)的類 一般為this
*/
EventManager.on = function (type, callback, target) {
//判斷是否有此事務(wù)伙菊，如果沒有就實例化value為空的一維數(shù)組败玉。
if (!EventManager.eventList.hasOwnProperty(type)) {
EventManager.eventList[type] = [];
}
//通過target來記錄回調(diào)，確保在某個地方調(diào)用的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;
}
//通過事務(wù)名稱和target來移除事務(wù)
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;
}
//通過事務(wù)名稱和回調(diào)的參數(shù)進行回調(diào)事務(wù)
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);
}
在需要回調(diào)的組件中就可以進行操作
if (this.props.loton == Constants.QLC_TYPE) {
EventManager.emitter('setQlcNumberCount', count);
}
如果有不明白的歡迎提問 轉(zhuǎn)載請注明出處~
