基于框架(angular,react,vue等)开发的项目都有合适的状态管理库,一般也很少使用eventEmitter,那么一些传统的或者遗留的基于 jQuery + template
的项目如何处理通信问题呢?
解决方案:
- 发布订阅(EventEmitter事件通信)
- callback(传递回调函数)
这里简要实现一下EventEmitter
class EventEmitter {
// 存储所有事件的监听器
es = {};
// 事件订阅
on(eventName, cb, once = false) {
if (!this.es[eventName]) {
this.es[eventName] = [];
}
this.es[eventName].push({
cb,
once,
});
}
// 仅订阅一次
once(eventName, cb) {
this.on(eventName, cb, true);
}
// 派发事件,通知订阅者
emit(eventName, ...params) {
const listeners = this.es[eventName] || [];
let l = listeners.length;
for (let i = 0; i < l; i++) {
const { cb, once } = listeners[i];
cb.apply(this, params);
if (once) {
listeners.splice(i, 1);
i--;
l--;
}
}
}
// 取消订阅
off(eventName, cb) {
// clean all
if (eventName === undefined) {
this.es = {};
} else {
if (cb === undefined) {
delete this.es[eventName];
} else {
const listeners = this.es[eventName] || [];
let l = listeners.length;
for (let i = 0; i < l; i++) {
if (listeners[i].cb === cb) {
listeners.splice(i, 1);
i--;
l--;
}
}
}
}
}
}
const eventEmitter = new EventEmitter();
export default eventEmitter;
可能有的小伙伴会迷惑,我在不同的模板文件中分别导入了这个类,那不是分别有一个EventEmitter
的实例吗?不同的实例之间没法通信啊!
其实是这样的:
多次重复执行同一句import语句,那么只会执行一次,而不会执行多次。
比如:
import 'lodash';
import 'lodash';
上面代码加载了两次lodash
,但是只会执行一次。
也就是,不同模板之间不过只是共享同一个EventEmitter
实例,所以能通信