我看到有一个问题不太懂关于事件的注册
来源：8-3 -基础类-代理模式 MScroll 类和 Options 配置处理类
秋得法
2024-01-04
1）在MScroll.ts文件中super([‘beforeScrollStart’, ‘scrollStart’, ‘scroll’, ‘scrollEnd’])注册了事件
2）在
private eventBubbling() {
const hooks = this.scroller.hooks
Object.keys(this.eventTypes).forEach((event) => {
hooks.on(hooks.eventTypes[event], (...args) => {
this.emit(this.eventTypes[event], ...args)
})
})
}
方法中再次注册了事件
3）在OpScrollView.vue中
const scroller = createMScroll(el)
emitEvents.forEach((event) => {
scroller.on(event, (pos) => {
emits(event, pos)
})
})
这里又注册了事件，为什么注册这么多事件呢？
不清楚OpScrollView这里的注册的事件是通过什么方式触发的。代码上好像都没有看到调用这里的方式。
写回答
1回答
-
同学你好，第3个问题
，const scroller = createMScroll(el)这里就是创建了一个滚动容器类，下面的一个 for 循环里，scroll.on 就是把 emitevent 里的事件注册上去。第1和2 个问题，合起来就是为什么要注册这么多事件，但其实只用到某些事件。这是因为我们这个组件是一个通用组件，我们在设计通用组件的时候，要考虑到通用性，别人可能会用到其它的事件，当然你也可以说，有人用的时候再加就好，但新增逻辑涉及到版本发布，版本兼容问题。另外本次是课程讲解，老师也想尽量地多讲点内容给你们。
然后还有一个问题是，你会看到在不同的类里去监听事件，然后又把事件触发。这其实是一个典型的事件冒泡模型，类似 DOM 的事件冒泡，在这个多层层级结构里，在当前类监听到下层的事件，然后处理事件，最后再把事件往上抛，让上层的逻辑处理。至于这么做的好处就是解耦了各个类对事件的处理，不同的类可能对同一个事件的处理不一样，同时这些处理逻辑也能放在类里面，这样在代码结构上就很清晰了。
022024-01-09
相似问题