当前位置:首页 > JavaScript

js 实现 eventbus

2026-03-15 09:34:35JavaScript

实现 EventBus 的基本结构

EventBus 是一种发布/订阅模式,用于组件或模块间的通信。以下是一个简单的 EventBus 实现:

class EventBus {
  constructor() {
    this.events = {};
  }

  on(eventName, callback) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(callback);
  }

  emit(eventName, ...args) {
    if (this.events[eventName]) {
      this.events[eventName].forEach(callback => {
        callback(...args);
      });
    }
  }

  off(eventName, callback) {
    if (this.events[eventName]) {
      if (callback) {
        this.events[eventName] = this.events[eventName].filter(cb => cb !== callback);
      } else {
        delete this.events[eventName];
      }
    }
  }
}

使用示例

const eventBus = new EventBus();

// 订阅事件
eventBus.on('message', (text) => {
  console.log('Received:', text);
});

// 发布事件
eventBus.emit('message', 'Hello EventBus!');

// 取消订阅
const handler = (text) => console.log('Handler:', text);
eventBus.on('message', handler);
eventBus.off('message', handler);

支持一次性事件监听

可以通过扩展 on 方法或添加 once 方法实现一次性事件监听:

class EventBus {
  constructor() {
    this.events = {};
  }

  once(eventName, callback) {
    const onceWrapper = (...args) => {
      callback(...args);
      this.off(eventName, onceWrapper);
    };
    this.on(eventName, onceWrapper);
  }
}

// 使用示例
eventBus.once('greet', (name) => {
  console.log(`Hello ${name}, this will only run once!`);
});

eventBus.emit('greet', 'Alice'); // 触发
eventBus.emit('greet', 'Bob');   // 不触发

支持异步事件处理

可以通过 Promise 或 async/await 支持异步事件处理:

class AsyncEventBus extends EventBus {
  async emitAsync(eventName, ...args) {
    if (this.events[eventName]) {
      for (const callback of this.events[eventName]) {
        await callback(...args);
      }
    }
  }
}

// 使用示例
const asyncBus = new AsyncEventBus();
asyncBus.on('asyncEvent', async (data) => {
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log('Async processed:', data);
});

asyncBus.emitAsync('asyncEvent', 'Test Data');

支持事件优先级

可以通过扩展数据结构支持事件优先级:

js 实现 eventbus

class PriorityEventBus extends EventBus {
  on(eventName, callback, priority = 0) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push({ callback, priority });
    this.events[eventName].sort((a, b) => b.priority - a.priority);
  }

  emit(eventName, ...args) {
    if (this.events[eventName]) {
      this.events[eventName].forEach(({ callback }) => {
        callback(...args);
      });
    }
  }
}

// 使用示例
const priorityBus = new PriorityEventBus();
priorityBus.on('priorityEvent', () => console.log('Default Priority'), 0);
priorityBus.on('priorityEvent', () => console.log('High Priority'), 10);
priorityBus.emit('priorityEvent');

标签: jseventbus
分享给朋友:

相关文章

js实现选项卡

js实现选项卡

实现选项卡的基本思路 选项卡通常由一组标签和对应的内容面板组成。点击标签时,显示对应的内容面板,隐藏其他面板。实现这一效果需要结合HTML结构、CSS样式和JavaScript交互逻辑。 HTML结…

js实现图表

js实现图表

在JavaScript中实现图表通常使用流行的图表库,以下是几种常见的方法和工具: 使用Chart.js Chart.js是一个简单灵活的库,适合快速生成响应式图表。安装方式包括CDN引入或npm安…

js实现点击显示和隐藏

js实现点击显示和隐藏

实现点击显示和隐藏的JavaScript方法 使用classList.toggle切换类名 通过添加/移除CSS类控制元素的显示与隐藏,需提前在CSS中定义隐藏样式(如display: none)。…

js实现游标

js实现游标

使用JavaScript实现游标 在JavaScript中,可以通过操作DOM元素的cursor样式属性来实现自定义游标效果。以下是几种常见的实现方法: 修改默认鼠标指针样式 通过CSS的curso…

js实现跑马灯

js实现跑马灯

实现跑马灯效果 使用HTML和JavaScript可以轻松实现跑马灯效果。以下是两种常见的实现方式: HTML结构 <div id="marquee"> <span>…

js实现上传文件

js实现上传文件

文件上传的基本实现 使用HTML的<input type="file">元素配合JavaScript的File API可以实现文件上传功能。 <input type="file"…