Skip to content

设计模式-发布订阅模式

发布订阅模式对于前端而言,再熟悉不过了。vue2 的基础就是一个发布订阅模式, addEvenListener 同样是一个发布订阅模式

发布订阅模式通用实现

不废话直接实现一个

js
var events = {
  clientList: [],
  listener: function (client, cb) {
    if (!this.clientList[client]) {
      this.clientList[client] = [];
    } else {
      this.clientList[client].push(cb);
    }
  },
  trigger: function (client, ...rest) {
    var cbs = this.clientList[client];
    if (!cbs || !cbs.length) {
      return;
    }
    for (let i = 0; i < cbs.length; i++) {
      const cb = cbs[i];
      cb.apply(this, rest);
    }
  },
};

events.listener('abc', function (...args) {
  console.log(this); // events
  console.log(args); // [1,2,3]
});

events.trigger('abc', 1, 2, 3);