不管是angular还是vue都暴露了自定义事件的接口,
$emit $on $broadcase
等,现在我们尝试自己封装一个简单结构的自定义事件,分别暴露:
- 事件注册 on
- 事件触发 emit
- 事件销毁 off
class Event {
maps = {};
emit(type,params) {
const stack = this.maps[type] || [];
stack.some(listener => listener(params));
}
on(type, listener) {
if (!this.maps.hasOwnProperty(type)) {
this.maps[type] = [];
}
this.maps[type].push(listener);
}
off(type, listener) {
const index = this.maps.indexOf(listener);
this.maps.splice(index, 1);
}
}
说明:注册的监听函数
listener
储存为一个maps里面的一个数组,就可以重复注册同一事件,然后同一触发;emit
触发方法携带params
参数,传给listener
函数
网友评论