每日一条JS精华片段:创建一个发布/订阅 事件器

创建一个发布/订阅事件器,拥有emit,on和off方法。

Javascript方法

const createEventHub = () => ({
  hub: Object.create(null),
  emit(event, data) {
    (this.hub[event] || []).forEach(handler => handler(data));
  },
  on(event, handler) {
    if (!this.hub[event]) this.hub[event] = [];
    this.hub[event].push(handler);
  },
  off(event, handler) {
    const i = (this.hub[event] || []).findIndex(h => h === handler);
    if (i > -1) this.hub[event].splice(i, 1);
    if (this.hub[event].length === 0) delete this.hub[event];
  }
});

示例

const handler = data => console.log(data);
const hub = createEventHub();
let increment = 0;

// 订阅:监听不同类型的事件 
hub.on('message', handler);
hub.on('message', () => console.log('Message event fired'));
hub.on('increment', () => increment++);

// 发布
hub.emit('message', 'hello world'); // 会打印出 'hello world' 和 'Message event fired'
hub.emit('message', { hello: 'world' }); // 会打印出这个对象 和'Message event fired'
hub.emit('increment'); // `increment`变量现在为1

// 取消订阅:停止监听'message'事件 
hub.off('message', handler);

请关注我,每天获得一条精华小片段!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。