练习:手写发布订阅

94 阅读1分钟

发布订阅是一种设计模式,订阅者订阅事件后,发布者通过触发该事件,可以将消息传给订阅者。下面几行代码就是发布订阅的简单练习

/**
 * 练习: 发布订阅模式
 * 
 */

const eventHub = {
  hashObj: {}, // 任务映射表

  on: (name, fn) => {
    // 1. 非空判断
    eventHub.hashObj[name] = eventHub.hashObj[name] || [];
    // 2. 将任务推入队列
    eventHub.hashObj[name].push(fn);
  },

  trigger: (name, data) => {
    // 1. 队列不存在
    if (!eventHub.hashObj[name]) { return };
    // 2. 执行
    eventHub.hashObj[name].map(fn => fn(data));

  },

  off: (name, fn) => {
    // 1. alias
    const queue = eventHub.hashObj[name];
    // 2. 队列不存在
    if(!queue) { return };
    // 3. 查找任务在队列中位置
    const index = queue.indexOf(fn);
    // 4. 任务不存在
    if (index < 0) { return };
    // 5. 删除任务
    queue.splice(index, 1);
  },
}

function square(number) {
  console.log('square', number*number);
}
function printSelf(number) {
  console.log('self', number);
}

eventHub.on('someEvent', square);
eventHub.on('someEvent', printSelf);

eventHub.trigger('someEvent', 12);
eventHub.off('someEvent', printSelf)

setTimeout(() => {
  eventHub.trigger('someEvent', 13);
}, 2000)

image.png