Javascript 发布订阅模式设计

// 发布订阅模式
class EventEmitter {
  constructor() {
    // 事件对象，存放订阅的名字和事件  如:  { click: [ handle1, handle2 ]  }
    this.events = {}
  }
  // 订阅事件的方法
  on(eventName, callback) {
    if (!this.events[eventName]) {
      // 一个名字可以订阅多个事件函数
      this.events[eventName] = [callback]; // 如果之前不存在则存进数组中
    } else {
      // 存在则push到指定数组的尾部保存
      this.events[eventName].push(callback)
    }
  }
  // 触发事件的方法
  emit(eventName, ...rest) {
    // 遍历执行所有订阅的事件
    // ... rest 是触发函数时所带的参数
    this.events[eventName] &&
      this.events[eventName].forEach(f => f.apply(this, rest))
  }
  // 移除订阅事件
  remove(eventName, callback) {
    if (this.events[eventName]) {
      this.events[eventName] = this.events[eventName].filter(f => f != callback)
    }
  }
  // 只执行一次订阅的事件，然后移除
  once(eventName, callback) {
    // 声明一个fn函数，在其内部执行callback
    const fn = () => {
      callback() // fn函数中调用原有的callback
      this.remove(eventName, fn) // 删除fn, 再次执行的时候之后执行一次
    }
    this.on(eventName, fn)
  }
}


const em = new EventEmitter();
let workday = 0;
em.on("work", function () {
    workday++;
    console.log("work everyday");
});

em.once("love", function () {
    console.log("just love you");
});

function makeMoney() {
    console.log("make one million money");
}

em.on("money", makeMoney);

const time = setInterval(() => {
    em.emit("work");
    em.remove("money", makeMoney);
    em.emit("money");
    em.emit("love");
    if (workday === 5) {
        console.log("have a rest")
        clearInterval(time);
    }
}, 1);

欢迎关注：http://www.w3schools.top/  学习您想要的一切IT教程！