Modo de publicación y suscripción de escritura a mano EventEmitter
1. Introducción
Recientemente, descubrí que muchas de las preguntas de las entrevistas de las grandes fábricas tienen una versión escrita a mano y un modo de suscripción EventEmitter. La razón es que él realiza la comunicación entre los componentes no padre-hijo de vue y react. A continuación se muestra una versión simple de EventEmitter.
2. Código
// 发布订阅模式
class EventEmitter {
constructor() {
// 事件对象，存放订阅的名字和事件 如: { click: [ handle1, handle2 ] }
this.events = {
}
}
// 订阅事件的方法
on(eventName, callback) {
if (!this.events[eventName]) {
// 一个名字可以订阅多个事件函数
this.events[eventName] = [callback]
} else {
// 存在则push到指定数组的尾部保存
this.events[eventName].push(callback)
}
}
// 触发事件的方法
emit(eventName, ...rest) {
// 遍历执行所有订阅的事件
this.events[eventName] &&
this.events[eventName].forEach(f => f.apply(this, rest))
}
// 移除订阅事件
remove(eventName, callback) {
if (this.events[eventName]) {
this.events[eventName] = this.events[eventName].filter(f => f != callback)
}
}
// 只执行一次订阅的事件，然后移除
once(eventName, callback) {
// 绑定的时fn, 执行的时候会触发fn函数
const fn = () => {
callback() // fn函数中调用原有的callback
this.remove(eventName, fn) // 删除fn, 再次执行的时候之后执行一次
}
this.on(eventName, fn)
}
}
3. Utilice
const event = new EventEmitter()
const handle = (...pyload) => console.log(pyload)
event.on('click', handle)
event.emit('click', 100, 200, 300, 100)
event.remove('click', handle)
event.once('dbclick', function() {
console.log('click')
})
event.emit('dbclick', 100)
Link de referencia