老师讲的这个，看起来高大上，如何使用呢？还有听起来声音不是连续的，代码质量是高，但是别的感觉不是很舒服
来源：7-12 -自定义hooks-useEventBus 使用事件机制实现跨组件通信
unbreakable_全栈
2023-06-06
type Fn = (…args: any[]) => void
interface Events {
[name: string]: Fn[]
}
export class EventEmitter {
events: Events
constructor() {
this.events = {}
}
on(type: string, fn: Fn) {
if (!this.events[type]) {
this.events[type] = []
}
this.events[type].push(fn)
}
off(type?: string, fn?: Fn) {
if (!type && !fn) {
this.events = {}
return this
}
if (type) {
if (!fn) {
this.events[type] = []
return this
}
const events = this.events[type]
if (!events) {
return this
}
let count = events.length
while (count–) {
if (events[count] === fn) {
events.splice(count, 1)
}
}
return this
}
}
emit(type: string, …args: any[]) {
const events = this.events[type]
if (!events) {
return
}
let ret
for (let i = 0; i < events.length; i++) {
const fn = events[i]
if (fn) {
ret = fn.apply(this, args) as unknown
if (ret === true) {
return ret
}
}
}
}
destroy() {
this.events = {}
}
}
1回答
-
one_pieces
2023-06-09
同学你好，这并不高大上哈，事件监听类可以说是平常工作中比较常用的设计模式哈～也是面试手写编程题里面非常常见的一道题。
简单来说，事件监听主要分三个部份，监听某个事件 on、触发某个事件 emit、解除监听某个事件 off。在课程项目里，具体的用法是在实现购物车的章节里，即 CartControl 和 ShopCart 这两个组件里。另外在 实现 OpScrollView 滚动视图组件里也有大量的使用，同学可以到对应的章节看看～
00
相似问题