花先生 前端
typeScript简单的事件管理器实现事件派发
1、原理
在全局函数中定义一个map存储事件名与要处理事件的回调函数，会有多个地方监听事件执行，所以处理事件的回调函数要数组保存。
当调用了被监听的函数执行了，其他页面写入的回调函数也会自动执行。
看代码了解一下
// 定义存储的map
var eventMap = new Map()
// 某事件名称
var eventName = "eventName"
/* 页面A中 */
// 写入监听
var eventArr = eventMap.get(eventName)
if (eventArr != undefined) {
eventArr.push(fn)
} else {
var eventArr = []
eventArr.push(fn)
}
eventMap.set(eventName, eventArr)
function fn(){
console.log("页面A")
}
/* 页面B中 */
var eventArr = eventMap.get(eventName)
for(var i = 0; i < eventArr.length; i++) {
eventArr[i]() // 执行监听方法
}
代码中在页面b执行了页面A的代码，就是页面B的事件派发到了页面A中执行了
2、实现步骤
我们使用typescript封装实现定义一个回调函数
定义事件管理类
代码中定义了三个方法，添加监听、移除监听、派发事件
3、开始使用
举个例子，我们玩游戏，当完成一个关卡后都会有一个结算的页面，告诉你得到了多少金币，而当前的页面在结算页面，游戏的首页也有一个展示你当前的金币，而你要做的事情是我完成一个关卡后得到的金币要同步到首页中展示，就要在结算页面去调用首页页面的代码。有同学就会用到了本地存储，把最新的金币数量存入到本地，打开或返回首页的时候再获取一下本地数据。有同学也会想到重新请求服务器接口。但是本地存储容易造成用户篡改，信息展示与数据库的会不一致，重新请求接口对服务器压力虽然不大，网络不好的情况下有延迟。
使用事件派发可以很好的解决问题
在需要派发的页面执行事件派发，比如在结算页面执行
EventManager.emit("species", "10000")在需要监听的页面执行监听事件执行，比如在首页
EventManager.on("species", this.upSpecies, this) // 设备在线upSpecies 是首页这里定义的方法
值得注意的是，监听函数后面传入的this，如果没有传入this，那么upSpecies 方法里面的this会报错
当你离开了首页，首页的active结束了，记得关闭一下事件监听
EventManager.off("species", this.upSpecies, this) // 设备在线