第十一篇 手写原理代码 - 实现事件订阅中类

javaScript 中的订阅发布模式（也称为观察者模式）是一种设计模式，用于在对象之间的事件通信中。

该模式由两部分构成：发布者和订阅者。发布者持有所有订阅者的引用，在某个事件发生时通知所有的订阅者，从而触发它们的相应行为。

这种模式可以用于解耦发布者和订阅者之间的依赖关系，从而实现更加灵活的设计

实现事件的订阅发布

class EventBus {
  constructor() {
    this._events = {}; // 事件
  }

  // on 订阅事件
  on(eventname, fn) {
    if (!this._events[eventname]) {
      this._events[eventname] = [];
    }
    this._events[eventname].push(fn);
  }

  // off 取消事件
  off(eventname, fn) {
    if (!this._events[eventname]) return;
    if (!fn) {
      this._events[eventname] = undefined;
    } else {
      this._events[eventname] = this._events[eventname].filter(
        (item) => item != fn
      );
    }
  }

  // emit 发布事件
  emit(eventname) {
    if (!this._events[eventname]) return;
    this._events[eventname].forEach((item) => item());
  }

  // once 一次性订阅
  once(eventname, fn) {
    const cb = (...args) => {
      fn(...args);
      this.off(eventname, cb);
    };
    this.on(eventname, cb);
  }
}

使用

function fn4() {
  console.log("我是事件 fn4");
}

function fn5() {
  console.log("我是事件 fn5");
}

function fn6() {
  console.log("我是事件 fn6");
}

const car = new EventBus();

car.on("click", fn4);
car.on("click", fn5);

car.off("click", fn4);

car.emit("click");

car.once("get", fn6);

car.emit("get");

console.log("car", car);