摘要
CocosCreator 有著內(nèi)置的事件系統(tǒng)，我們用起來也很是方便。那么我們自己如何簡單的實(shí)現(xiàn)一個(gè) EventManager 呢？本文通過一個(gè)小例子帶你學(xué)習(xí)。
- 使用版本
CocosCreator 版本 2.3.3 -
明確目標(biāo)
我們要做一個(gè)事件管理模塊，實(shí)現(xiàn)事件的監(jiān)聽方法 on，取消方法 off，事件發(fā)送 emit。
事件數(shù)據(jù)類型
- 首先，我們要想好事件用什么存儲。選擇用 Map，則需要一個(gè)事件名稱，類型 string，還有就是一個(gè)對象，存放 callback 以及調(diào)用者 target。
- 寫成單例模式
/**
* 事件數(shù)據(jù)接口
*/
interface EventData{
callback : Function,
target:any
}
/**
* 單例模式
*/
export class MyEventManager {
private static mInstance: MyEventManager = null;
/**
* 事件存儲 Map
*/
private eventsMap:Map<string , EventData> = new Map();
public static instance(): MyEventManager {
if (this.mInstance == null) {
this.mInstance = new MyEventManager();
}
return this.mInstance;
}
/**
* 事件監(jiān)聽
* @param eventName 事件名字
* @param callback 返回方法
* @param target
*/
public on(eventName:string , callback:Function , target:any){
if(this.eventsMap.has(eventName)){
console.warn(`$(eventName) 事件已存在 ， 做了覆蓋處理`);
}
this.eventsMap.set(eventName , {callback , target});
}
/**
* 事件發(fā)送
* @param eventName
* @param data
*/
public emit(eventName:string , data:any){
if(!this.eventsMap.has(eventName)){
console.warn(`$(eventName) 事件不存在`);
return;
}
const {callback , target} = this.eventsMap.get(eventName);
callback.call(target , data);
}
/**
* 取消事件監(jiān)聽
* @param eventName
*/
public off(eventName:string){
if(!this.eventsMap.has(eventName)){
console.warn(`$(eventName) 事件不存在`);
return;
}
this.eventsMap.delete(eventName);
}
}
