js 实现 EventBus 事件总线

 EventBus 一般用做单例，EventEmiter 一般在组件或模块内使用

复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件管理器</title>
</head>

<body>
  <button id="id1">play 绑定1</button>
  <button id="id2">play 绑定2</button>
  <button id="id3">pause</button>
  <button id="id4">unsubcribe play1</button>
  <button id="id5">mute绑定一次</button>
  <script>
    class EventBus {
      constructor() {
        this.eventMap = {}
      }
      subcribe(eventName, callback) {
        if (this.eventMap[eventName]) {
          this.eventMap[eventName].push(callback)
        } else {
          this.eventMap[eventName] = [callback]
        }
      }
      publish(eventName, params) {
        if (this.eventMap[eventName]) {
          this.eventMap[eventName].forEach((fn) => {
            fn && fn(params)
          })
        }
      }
      unsubcribe(eventName, callback) {
        if (this.eventMap[eventName]) {
          // 注意这里一定要重新赋值
          this.eventMap[eventName] = this.eventMap[eventName].filter((fn) => fn !== callback)
          console.log(this.eventMap[eventName])
        }
      }
      once(eventName, callback) {
        // 传参在这里传入
        const cb = (params) => {
          callback && callback(params)
          // 注意这里解绑的封装后的 cb
          this.unsubcribe(eventName, cb)
        }
        // 还是调用监听事件
        this.subcribe(eventName, cb)
      }
    }

    const video = new EventBus();
    const fn = (time) => {
      console.log('play1', time)
    }
    video.subcribe('play', fn)
    video.subcribe('play', (time) => {
      console.log('play2', time)
    })
    video.subcribe('pause', (time) => {
      console.log('pause', time)
    })
    video.once('mute', (time) => {
      console.log('mute', time)
    })
    const id1 = document.getElementById('id1')
    const id2 = document.getElementById('id2')
    const id3 = document.getElementById('id3')
    id1.onclick = () => {
      video.publish('play', new Date().getTime())
    }
    id2.onclick = () => {
      video.publish('play', new Date().getTime())
    }
    id3.onclick = () => {
      video.publish('pause', new Date().getTime())
    }
    id4.onclick = () => {
      video.unsubcribe('play', fn)
    }
    id5.onclick = () => {
      video.publish('mute', new Date().getTime())
    }
  </script>
</body>

</html>
复制代码

 

posted @   蓓蕾心晴  阅读(386)  评论(0)  编辑  收藏  举报
相关博文：
· js实现发布订阅模式
· js防抖和节流实现
· Vue组件间通信--EventBus(事件总线)/7
· vue 事件总线简单介绍
· Vue使用事件总线（Event Bus）
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
历史上的今天：
2022-07-05 vscode常用配置
2022-07-05 vscode调试配置
2022-07-05 mac下找到 vscode插件安装位置
点击右上角即可分享
微信分享提示
AI IDE Trae