html模板本身不支持全局事件总线，必须借助javascript实例（如eventtarget）在模板使用前初始化，并由各组件显式监听与触发，同时需手动清理监听器以防内存泄漏。

HTML 模板本身不支持全局事件总线（Event Bus）——它没有运行时、没有事件循环、也没有对象实例，addEventListener 和 dispatchEvent 在纯静态 HTML 中无法跨组件通信。所谓“通过 HTML 模板实现”，实际是指：在基于 HTML 模板的前端框架或轻量运行环境中（如 Vue 的单文件组件、Alpine.js、或手写模板 + DOM 操作），如何用最小侵入方式搭建一个可被所有组件访问的事件中心。

为什么不能直接在 <template></template> 里写事件总线

HTML 模板（比如 <script type="text/html"></script> 或 <template></template> 标签）只是字符串或文档片段，不会自动执行 JS 逻辑。你无法在其中定义 new EventEmitter() 或挂载 on()/emit() 方法。事件总线必须由 JavaScript 实例承载，并确保所有组件能引用到同一个实例。

• 常见错误现象：Uncaught ReferenceError: EventBus is not defined，因为模板中写了 EventBus.$on(...) 但没提前声明
• 使用场景：多个独立 <div> 块用相同模板渲染，需响应彼此状态（如表单提交后刷新列表） <li>关键点：总线必须在模板“使用前”初始化，且生命周期长于任意组件</li> <h3>用 <code>const EventBus = new EventTarget() 是最轻量可行方案

  EventTarget 是浏览器原生 API，兼容性好（Chrome 59+、Firefox 52+、Edge 79+），无需额外依赖，比手写 on/emit/off 更可靠。它天然支持事件冒泡控制、once、detail 透传，且与 addEventListener 完全兼容。

  

  Wechat Article Html

  将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

  下载
  • 初始化位置：放在全局脚本最顶部，或模块入口处，例如：

    const EventBus = new EventTarget();

  • 组件内监听：

    EventBus.addEventListener('user:login', (e) => console.log(e.detail.token));

  • 组件内触发：

    EventBus.dispatchEvent(new CustomEvent('user:login', { detail: { token: 'abc123' } }));

  • 注意：不能用 EventBus.on —— EventTarget 没有这个方法，必须用 addEventListener

  在 Alpine.js 或 Vue 模板中接入需绕过模板编译限制

  Alpine.js 的 x-on 和 Vue 的 @click 不支持直接调用全局变量方法（如 @click="EventBus.dispatch(...)"），因为它们只解析当前组件作用域内的属性。必须把总线方法“代理”进组件上下文。

  • Alpine.js 示例（在 x-data 中注入）：

    x-data="{ bus: EventBus, login() { this.bus.dispatchEvent(new CustomEvent('auth:login')) } }"

  • Vue 2/3 Options API：在 created() 中 this.$bus = EventBus，然后模板用 @click="$bus.dispatchEvent(...)"
  • Vue 3 Composition API：用 const bus = EventBus 在 setup() 中定义，再通过 defineExpose 或 provide/inject 传递（更推荐后者）
  • 容易踩的坑：在 mounted 才绑定 addEventListener，但事件可能已在 created 阶段触发，导致丢失首条消息

  避免内存泄漏的关键是手动清理监听器

  不同于框架自带的事件系统（如 Vue 的 @click 会在组件卸载时自动解绑），EventTarget 的监听器一旦添加就永远存在，除非显式调用 removeEventListener。组件销毁时若不清理，会持续响应事件并持有闭包引用，造成内存泄漏。

  • Alpine.js：用 x-init 绑定，x-effect 监听销毁信号（需配合 cleanup）
  • Vue：在 beforeUnmount（Vue 3）或 beforeDestroy（Vue 2）中调用 EventBus.removeEventListener
  • 纯 DOM 场景：监听 DOMNodeRemoved 不可靠，建议组件主动暴露 destroy() 方法，在移除前调用
  • 性能影响：监听器过多（>100 个）会影响 dispatchEvent 性能，可考虑按命名空间过滤或改用发布-订阅模式（如 mitt）

  真正麻烦的不是怎么写总线，而是谁来负责销毁监听器、谁来保证事件名不冲突、以及如何让非 JS 开发者（比如只写 HTML 模板的人）也能安全地触发和监听。这些都得靠约定和文档，而不是模板语法本身能解决的。