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

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

作者: _夏之_ | 来源:发表于2020-09-08 20:11 被阅读0次

创建一个发布/订阅事件器,拥有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);

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

相关文章

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

    创建一个发布/订阅事件器,拥有emit,on和off方法。 Javascript方法 示例 请关注我,每天获得一条...

  • js 观察者和发布订阅

    发布订阅 js中的事件模型就是基于发布订阅设计的。相当于订报的人和送报人的关系。js中很多都有发布订阅的思想。具体...

  • 异步编程解决方案

    事件发布/订阅模式 事件监听器模式是一种广泛用于异步编程的模式,是回调函数的事件化,又称发布/订阅模式。 事件发布...

  • 每日一条JS精华片段:deepClone

    创建对象的深层克隆。克隆基本值,数组和对象 Javascript方法 示例 执行结果 请关注我,每天获得一条精华小片段!

  • 每日一条JS精华片段:objectToQueryString

    根据键值对生成请求参数字符串 Javascript方法 示例 执行结果 请关注我,每天获得一条精华小片段!

  • 每日一条JS精华片段:bindAll

    将对象的方法绑定到对象本身,从而覆盖现有方法。 Javascript方法 示例 执行结果 请关注我,每天获得一条精...

  • JavaScript自定义事件和发布订阅模式

    在js和JQuery里都可以自定义事件,在我看来自定义事件的核心就是发布订阅模式的实现。所谓的发布订阅模式是Jav...

  • 发布订阅模式和观察者模式

    发布/订阅模式 订阅者 发布者 事件中心 我们假定,存在一个“事件中心”,某个任务执行完成,就向事件中心“发布”(...

  • 常见设计模式

    写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 使用发布订阅模式写一个事件管理器...

  • 前端设计模式

    写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 使用发布订阅模式写一个事件管理器...

网友评论

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

      本文链接:https://www.haomeiwen.com/subject/qmvjektx.html