面试题，实现一个Event类

偏执的太偏执、 2022-02-27 07:46 180阅读 0赞

> **小编推荐：[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。**

> 题目：使用 ECMAScript（JS）代码实现一个事件类Event ，包含下面功能：绑定事件、解绑事件和派发事件。

在稍微复杂点的页面中，比如组件化开发的页面，同一个页面由两三个人来开发，为了保证组件的独立性和降低组件间耦合度，我们往往使用「订阅发布模式」，即组件间通信使用事件监听和派发的方式，而不是直接相互调用组件方法，这就是题目要求写的Event 类。

这个题目的核心是一个事件类型对应回调函数的数据设计。为了实现绑定事件，我们需要一个\_cache对象来记录绑定了哪些事件。而事件发生的时候，我们需要从\_cache 中读取出来事件回调，依次执行它们。一般页面中事件派发（读）要比事件绑定（写）多。所以我们设计的数据结构应该尽量地能够在事件发生时，更加快速地找到对应事件的回调函数们，然后执行。

class Event {
      constructor () {
        // 储存事件的数据结构
        // 为查找迅速， 使用对象（字典）
        this._cache = {}
      }
    
      // 绑定
      on(type, callback) {
        // 为了按类查找方便和节省空间
        // 将同一类型事件放到一个数组中
        // 这里的数组是队列， 遵循先进先出
        // 即新绑定的事件先触发
        let fns = (this._cache[type] = this._cache[type] || [])
        if(fns.indexOf(callback) === -1) {
          fns.push(callback)
        }
        return this
      }
    
      // 触发
      trigger(type, data) {
        let fns = this._cache[type]
        if(Array.isArray(fns)) {
          fns.forEach((fn) => {
            fn(data)
          })
        }
        return this
      }
      
      // 解绑
      off (type, callback) {
        let fns = this._cache[type]
        if(Array.isArray(fns)) {
          if(callback) {
            let index = fns.indexOf(callback)
            if(index !== -1) {
              fns.splice(index, 1)
            }
          } else {
            // 全部清空
            fns.length = 0
          }
        }
        return this
      }
    }

![v2-9f0cdc6af2bfd2b965cd3955e75ad9a6_b.jpg][]

这种事件【订阅发布模式】管理兄弟页面传值交互的，我们在vue里面用的就是中央事件总线，与此一样：

![v2-370d1b4351ad406097dae69e401b9e03_b.jpg][]

作者：白鲸鱼  
链接：https://zhuanlan.zhihu.com/p/60324936  
来源：知乎  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[Fundebug]: https://www.fundebug.com/
[v2-9f0cdc6af2bfd2b965cd3955e75ad9a6_b.jpg]: /images/20220227/c8325e60a7234a58b99acf7dcbfd1b2f.png
[v2-370d1b4351ad406097dae69e401b9e03_b.jpg]: /images/20220227/01529a2a7e2342f3bf4fac84eaeca961.png