更方便的“单一”事件管理工具类

架构介绍

sole-Event 与传统的 eventBus 的实现思路有所不同，虽然都是发布订阅模式，但是 bus 的理念是“统一管理”，即只有一个订阅中心，就是 bus 本身，无论事件发布者或者订阅则，都是通过订阅中心进行处理，优点就是功能集中，用户只需要关注发布者和订阅的，缺点就是不好管理事件名称，于是我写了 sole-Event，将事件管理作为一个类，每个事件都是一个单独的管理实例，只能管理自己的事件，实例本身就是一个事件名称，并提供文档注释，方便代码提示。

sole-Event vs 传统 EventBus 对比指南

| 特性 | soleEvent | 传统 EventBus | | --------------- | --------------------------- | ---------------------- | | 🏷️ 事件命名管理 | 强制集中管理，避免拼写错误 | 松散字符串管理，易出错 | | 🔒 类型安全 | 完整 TypeScript 支持 | 通常无类型约束 | | 📝 调试支持 | 内置完整生命周期日志 | 需手动添加调试代码 | | 🧩 模块隔离 | 实例化隔离，避免污染 | 全局单例，可能交叉影响 | | 🧹 内存管理 | 显式清除机制 | 容易内存泄漏 | | ⛓️ 链式调用 | 支持 on().once().emit()链式 | 通常不支持 |

安装

npm install sole-event
或者
yarn add sole-event

使用示例

import { SoleEvent } from 'sole-event'

// 1.使用变量管理
export const setName = new SoleEvent('setName')

// 2.使用对象管理
export const myEvents = {
  /**设置名称 */
  setName: new SoleEvent('setName'),
  /**设置年龄 */
  setAge: new SoleEvent('setAge')
}

const handleOn = (value) => console.log(value)

/**页面：A */
import myEvents from 'xxx/myEvents'
import { onUnmount } from 'vue'

// 注册事件
myEvents.setName.on(handleOn)

// 注册单次触发的事件
myEvents.setName.once((value) => console.log(value))

// 页面销毁的处理
onUnmount(() => {
  // 取消指定事件订阅
  myEvents.setName.off(handleOn)
  // 取消全部事件订阅
  //myEvents.setName.off()
})

/**页面：B */
// 发送事件，并传递数据
myEvents.setName.emit('孙悟空')
myEvents.setName.emit('猪八戒')