摘要
CocosCreator 有着内置的事件系统，我们用起来也很是方便。那么我们自己如何简单的实现一个 EventManager 呢？本文通过一个小例子带你学习。
- 使用版本
CocosCreator 版本 2.3.3 -
明确目标
我们要做一个事件管理模块，实现事件的监听方法 on，取消方法 off，事件发送 emit。
事件数据类型
- 首先，我们要想好事件用什么存储。选择用 Map，则需要一个事件名称，类型 string，还有就是一个对象，存放 callback 以及调用者 target。
- 写成单例模式
/**
* 事件数据接口
*/
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;
}
/**
* 事件监听
* @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});
}
/**
* 事件发送
* @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);
}
/**
* 取消事件监听
* @param eventName
*/
public off(eventName:string){
if(!this.eventsMap.has(eventName)){
console.warn(`$(eventName) 事件不存在`);
return;
}
this.eventsMap.delete(eventName);
}
}
