文章结尾有完整代码,可直接复制粘贴到项目中使用。
老样子,先给管理者上一个单例模式
class EventSystem {
/** 单例模式 */
public static readonly _Ins: EventSystem = new EventSystem();
}
首先,我们要想监听事件,除了需要事件名字外,还需要谁在监听?监听到后执行什么?那么我们就需要一个字符串索引签名,作用相对于map用来存储事件和需要调用的方法。
interface IEventTarget {
func: Function; // 监听的对象将调用的方法
target: any; // 监听的对象
}
class EventSystem {
...
/** 观察者列表 */
private _observers: { [key: string]: IEventTarget[] };
constructor(){
this._observers = {};
}
}
我们来写监听方法,其实就是往字典里的“怪物死亡事件”,添加玩家实例和获得经验的方法。
/** 监听事件 */
listen(key: string, callback: Function, target: any){
// 初始化一个数组
if (this._observers[key] == null)
this._observers[key] = [];
let eventTarget = { func: callback, target: target };
this._observers[key].push(eventTarget);
}
现在已经能监听事件了,那我们如何发送一个事件呢?发送事件我们肯定需要一个事件名,如果是怪物死亡是不是还需要携带着数据?比如说怪物的实例?或者是多少经验?我们把data设为可选参数,因为有些事件不一定要携带。用foreach来遍历触发回调函数。
/** 发送事件 */
send(key: string, data?: {}) {
// 如果没有人监听就直接返回
if (this._observers[key] == null)
return;
// 遍历所有监听此事件的对象 调用回调方法
this._observers[key].forEach(function (item: IEventTarget) {
item.func.call(item.target, data);
})
}
那取消监听也很简单了,那就是将满足IEventTarget的移除。
/** 取消监听某个事件 */
unListen(key: string, target: any, fun:Function) {
if (this._observers[key] == null)
return;
this._observers[key] = this._observers[key].filter(function (eventTarget: IEventTarget) {
return eventTarget.target != target && eventTarget.func != fun;
});
}
/** 取消监听所有事件 */
unListenAll(key:string, target:any){
if (this._observers[key] == null)
return;
this._observers[key] = this._observers[key].filter(function (eventTarget: IEventTarget) {
return eventTarget.target != target;
});
}
完整代码
interface IEventTarget {
func: Function;
target: any;
}
class EventSystem {
/** 单例模式 */
public static readonly _Ins: EventSystem = new EventSystem();
/** 观察者列表 */
private _observers: { [key: string]: IEventTarget[] };
constructor(){
this._observers = {};
}
/** 监听事件 */
listen(key: string, callback: Function, target: any){
if (this._observers[key] == null)
this._observers[key] = [];
let eventTarget = { func: callback, target: target };
this._observers[key].push(eventTarget);
}
/** 取消监听某个事件 */
unListen(key: string, target: any, fun:Function) {
if (this._observers[key] == null)
return;
this._observers[key] = this._observers[key].filter(function (eventTarget: IEventTarget) {
return eventTarget.target != target && eventTarget.func != fun;
});
}
/** 取消监听所有事件 */
unListenAll(key:string, target:any){
if (this._observers[key] == null)
return;
this._observers[key] = this._observers[key].filter(function (eventTarget: IEventTarget) {
return eventTarget.target != target;
});
}
/** 发送事件 */
send(key: string, data?: {}) {
if (this._observers[key] == null)
return;
this._observers[key].forEach(function (item: IEventTarget) {
item.func.call(item.target, data);
})
}
}
export const EventMgr = EventSystem._Ins;
使用方法
使用情景:当怪物死亡时,玩家获得经验。
我们在怪物脚本上面检测到HP少于0时,我们发送怪物死亡事件并携带10点经验值。
随后我们回到玩家脚本,监听怪物死亡事件。
当然'MONSTER_DIE'这种字符串我们可以用配置来代替,这样会防止我们防拼写错误。