我看到有一个问题不太懂关于事件的注册

Question

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这里的注册的事件是通过什么方式触发的。代码上好像都没有看到调用这里的方式。

Answer 1

one_pieces 2024-01-07 17:25:05

同学你好，第3个问题，const scroller = createMScroll(el) 这里就是创建了一个滚动容器类，下面的一个 for 循环里，scroll.on 就是把 emitevent 里的事件注册上去。

第1和2 个问题，合起来就是为什么要注册这么多事件，但其实只用到某些事件。这是因为我们这个组件是一个通用组件，我们在设计通用组件的时候，要考虑到通用性，别人可能会用到其它的事件，当然你也可以说，有人用的时候再加就好，但新增逻辑涉及到版本发布，版本兼容问题。另外本次是课程讲解，老师也想尽量地多讲点内容给你们。

然后还有一个问题是，你会看到在不同的类里去监听事件，然后又把事件触发。这其实是一个典型的事件冒泡模型，类似 DOM 的事件冒泡，在这个多层层级结构里，在当前类监听到下层的事件，然后处理事件，最后再把事件往上抛，让上层的逻辑处理。至于这么做的好处就是解耦了各个类对事件的处理，不同的类可能对同一个事件的处理不一样，同时这些处理逻辑也能放在类里面，这样在代码结构上就很清晰了。

• 提问者 秋得法 #1

  结合了这两天对代码的分析，能理解老师的意思了

• one_pieces 回复 提问者 秋得法 #2

  感谢同学的理解，看得出同学是非常用心地在学习，从提的问题内容也能看出同学是在认真思考。这部分的内容，说句实话，难度是比较大的，工作几年的人都可能不一定能自己理解下来。当然，讲难度大的内容也有风险，一些同学可能看了之后不懂就想都不想，问都不问，觉得讲的不好啥的。但这些真的是含金量非常高的内容，如果吃透了，那么在面试的时候把这个滚动容器组件的原理讲给面试官，且讲透，我觉得大概技术方面的面试是没问题的