Layui.event不能替代EventBus，因其强耦合模块系统、事件名受限且依赖layui.use；真正的EventBus需独立实例化、支持任意事件名、跨文件使用，可用纯对象实现on/emit/off方法。
为什么不用 layui.event 直接当 EventBus？
因为 layui.event 是为模块间通信设计的，依赖 layui.use 加载上下文，且事件名强制绑定到模块名（如 'form|submit'），无法自由注册/触发任意名称的全局事件。它本质是模块系统的一部分，不是松耦合的发布-订阅总线。
真正需要的 EventBus，得满足：可独立实例化、支持通配符或任意字符串事件名、不依赖 layui 模块加载流程、能跨页面 JS 文件使用。
用一个纯对象 + 数组实现最简 EventBus
不需要继承、不引入 class、不依赖任何框架 —— 就用一个带 on / emit / off 方法的 plain object：
const EventBus = {
events: {},
on(event, fn) {
if (!this.events[event]) this.events[event] = [];
this.events[event].push(fn);
},
emit(event, ...args) {
const fns = this.events[event] || [];
fns.forEach(fn => fn(...args));
},
off(event, fn) {
if (!this.events[event]) return;
if (!fn) {
delete this.events[event];
return;
}
this.events[event] = this.events[event].filter(f => f !== fn);
}
};
用法和 Vue 的 $bus 几乎一致：EventBus.on('user:login', handler)，EventBus.emit('user:login', data)。
- 所有方法都支持链式调用（返回
this），但 layui 原生不强调这个，按需加即可 - 注意
off时必须传入**同一个函数引用**才能精准移除，匿名函数无法解绑 - 如果需要通配符（如
'user:*'），就得自己加匹配逻辑，原生对象方案不内置
如何让 EventBus 在 layui 页面里“活”起来？
关键不是「怎么写」，而是「在哪挂、怎么确保全局可用」。常见错误是把 EventBus 写在某个 layui.use 回调里，结果别的模块访问不到。
- 把它定义在
<script></script>标签中、layui.use外部，或者作为单独 JS 文件（如eventbus.js）用<script src="eventbus.js"></script>同步加载 - 避免放在
layui.define里导出 —— 那样又绕回模块系统，失去轻量初衷 - 如果项目已用 webpack/vite，直接
export const EventBus = {...}，其他文件import { EventBus }即可，和 layui 无耦合 - 别试图给
window加太多属性，推荐统一挂到window.$bus或window.LAY_EVENT_BUS，语义清晰也方便调试
容易被忽略的内存泄漏点
EventBus 本身不自动清理监听器。只要没调 off，函数引用就一直存在，尤其在动态创建的弹窗、表格行内操作中极易堆积。
典型场景：table.render 渲染后对每行按钮绑定 EventBus.on('row:click', handler)，但销毁表格时没 off —— handler 闭包会持续持有 DOM 和数据引用。
- 组件销毁前务必手动
EventBus.off('xxx', handler)，尤其是闭包中用了this或局部变量的 handler - 如果 handler 是箭头函数或内联函数，基本没法
off，应改写为具名函数或提前存引用 - 不需要持久监听的事件（比如一次性的表单提交反馈），用完即
off，或考虑改用 Promise +emit触发 resolve
轻量不等于随意，EventBus 越简单，越要靠规范来兜底。
