cocos creator -实现事件监听-On与Emit的实现

摘要

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);
    }
}

项目地址 https://gitee.com/zhouhongpeng/MyEventManager