EventBus 事件总线

这篇内容是在有道云旧笔记基础上重新整理的 JavaScript 与前端开发 笔记。原始记录偏碎片化，这里补充了使用场景、阅读顺序和落地时需要注意的边界，方便以后在项目里快速复用。

适用场景 ​

• 前端业务中需要快速处理数据、DOM、浏览器能力或通用工具函数时参考。
• 把散落在项目里的小技巧抽成可复用代码片段，减少重复实现。
• 排查兼容性和边界输入问题前，先用本文示例确认核心思路。

核心要点 ​

• 正文以代码或命令片段为主，阅读时建议先确认目标问题，再挑选对应片段验证。
• 保留了 5 段可直接参考的代码或命令，主要涉及 typescript，复制前需要按当前项目路径、版本和变量名做调整。
• 涉及命令行操作时，建议先在测试目录或测试环境执行，确认输出符合预期后再应用到生产环境。

# https://github.com/landluck/iny-bus

# 1.在小程序中使用
#   
import bus from 'iny-bus'

  // 添加事件监听
  // 在 onLoad 中注册, 避免在 onShow 中使用
  onLoad () {
    this.eventId = bus.on('事件名', (a, b, c, d) => {
      // 支持多参数
      console.log(a, b, c, d)

      this.setData({
        a,
        b,
        c
      }
    })
  }

# // 移除事件监听，该函数有两个参数，第二个事件id不传，会移除整个事件监听，传入ID，会移除该页面的事件监听，避免多余资源浪费, 在添加事件监听后，页面卸载(onUnload)时建议移除
  onUnload () {
    bus.remove('事件名', this.eventId)
  }

  // 派发事件，触发事件监听处更新视图
  // 支持多参传递
  onClick () {
    bus.emit('事件名', a, b, c)
  }
#
#
#
#
#
#

import { Event } from '../types'
import { createUid, once } from '../utils'

class EventBus {
  /**
   * 储存事件的容器
   */
  private events: Event[] = []

  /**
   * on 新增事件监听
   * @param name 事件名
   * @param execute 回调函数
   * @param ctx 上下文 this
   * @returns { string } eventId 事件ID，用户取消该事件监听
   */

  on(name: string, execute: Function, ctx?: any): string {
    return this.addEvent(name, execute, ctx)
  }

  /**
   * one 只允许添加一次事件监听
   * @param name 事件名
   * @param execute 回调函数
   * @param ctx 上下文 this
   * @returns { string } eventId 事件ID，用户取消该事件监听
   */

  once(name: string, execute: Function, ctx?: any): string {
    return this.addEvent(name, once(execute), ctx)
  }

  /**
   * remove 移除事件监听
   * @param name 事件名
   * @param eventId 移除单个事件监听需传入
   * @returns { EventBus } EventBus EventBus 实例
   */

  remove(name: string, eventId: string): EventBus {
    const events = this.events

    const index = events.findIndex(event => event.name === name)

    if (index === -1) {
      return this
    }

    if (!eventId) {
      events.splice(index, 1)

      return this
    }

    const executeIndex = events[index].executes.findIndex(item => item.id === eventId)

    if (executeIndex !== -1) {
      events[index].executes.splice(executeIndex, 1)
    }

    return this
  }

  /**
   * emit 派发事件
   * @param name 事件名
   * @param args 其余参数
   * @returns { EventBus } EventBus EventBus 实例
   */

  emit(name: string, ...args: any[]): EventBus {
    const event = this.find(name)

    if (!event) {
      return this
    }
    const funcs = event.executes

    funcs.forEach(func => {
      if (func.ctx) {
        return func.execute.apply(func.ctx, args)
      }
      func.execute(...args)
    })

    return this
  }

  /**
   * 查找事件的方法
   * @param name
   */

  find(name: string): Event | null {
    const events = this.events

    for (let i = 0; i < events.length; i++) {
      if (name === events[i].name) {
        return events[i]
      }
    }

    return null
  }

  clear(): EventBus {
    this.events.length = 0

    return this
  }

  /**
   * 添加事件的方法
   * @param name
   * @param execute
   */

  private addEvent(name: string, execute: Function, ctx?: any): string {
    const eventId = createUid()

    const events = this.events

    const event = this.find(name)

    if (event !== null) {
      event.executes.push({ id: eventId, execute, ctx })

      return eventId
    }

    events.push({
      name,
      executes: [
        {
          id: eventId,
          execute,
          ctx
        }
      ]
    })

    return eventId
  }
}

export default EventBus

utils.ts

/**
 * 创建唯一id
 */

export function createUid(): string {
  return Math.random()
    .toString()
    .substr(2)
}

export function once(fn: Function): Function {
  let called = false

  return function(this: any, ...args: any[]) {
    if (!called) {
      called = true
      fn.apply(this, args)
    }
  }
}

export interface EventBus {
  on(name: string, execute: Function, ctx?: any): string

  once(name: string, execute: Function, ctx?: any): string

  remove(name: string, eventId?: string): EventBus

  emit(name: string, ...args: any[]): EventBus

  find(name: string): Event | null

  clear(): EventBus

  app<T extends Context>(ctx: T): InyApp<T>

  page<T extends Context>(ctx: T): InyPage<T>

  component<T extends Context>(ctx: T): InyComponent<T>

  [propName: string]: any
}

实践检查清单 ​

• 把示例函数放进业务前，先补齐空值、异常输入、异步失败和浏览器兼容性测试。
• 通用工具函数应尽量收敛到项目公共模块，避免多个页面复制出不同版本。
• 涉及 UI 或浏览器行为时，至少在桌面端和移动端各验证一次关键路径。

复盘小结 ​

这篇笔记更适合作为问题排查或方案落地前的速查材料。后续如果在真实项目中再次遇到同类问题，可以继续把具体版本、报错信息、最终取舍和验证结果补到对应小节里，让它从代码片段逐步沉淀成完整方案。