手写发布订阅

const eventHub = {
  map: {},

  on: (name, fn) => {
    eventHub.map[name] = eventHub.map[name] || [];
    eventHub.map[name].push(fn);
  },

  emit: (name, data) => {
    const q = eventHub.map[name];
    if (!q) return;
    q.map((fn) => fn.call(undefined, data));
    return undefined;
  },

  off: (name, fn) => {
    const q = eventHub.map[name];
    if (!q) return;
    const index = q.indexOf(fn);
    if (index < 0) return;
    q.splice(index, 1);
  },
};

// 使用

eventHub.on("click", console.log);

setTimeout(() => {
  eventHub.emit("click", "Zhoujia22");
});

使用Class

class EventHub {
  map = [];

  on(name, fn) {
    this.map[name] = this.map[name] || [];
    this.map[name].push(fn);
  }

  emit(name, data) {
    const fnList = this.map[name] || [];
    fnList.forEach((fn) => fn.call(undefined, data));
  }

  off(name, fn) {
    const fnList = this.map[name] || [];
    const index = fnList.indexOf(fn);
    if (index < 0) return;
    fnList.splice(index, 1);
  }
}

//使用

const e = new EventHub();

e.on("click", console.log);
setTimeout(() => {
  e.emit("click", "Zhoujia22");
});