js的发布-订阅者模式

旨在于能够实时监听状态的变化,例如像js的addEventListener方法,代码如下:

解释:创建一个监听对象,client包含所有的示例方法(例如addEventListener的click就是一个键,所对应的方法就是数组中的一个值),listen监听一个方法,trigger发布一个事件

var login = {
  client: {},
  listen: function (key, fn) {
    if (!this.client[key]) {
      this.client[key] = [];
    }
    this.client[key].push(fn);
  },
  trigger: function () {
    var key = Array.prototype.shift.call(arguments);
    var fns = this.client[key];
    if (!fns || fns.length === 0) {
      return false;
    }
    fns.forEach((fn) => {
      fn.apply(this, arguments);
    });
  },
  remove: function (key, fn) {
    if (!key) return;
    var fns = this.clientList[key];
    if (!fns) return;
    if (!fn) {
      fns && (fns.length = 0);
    } else {
      for (var l = fns.length - 1; l >= 0; l--) {
        var _fn = fns[l];
        if (_fn === fn) {
          fns.splice(l, 1);
        }
      }
    }
  },
};

var header = (function () {
  login.listen("suc", function (data) {
    header.setAvatar(data);
  });
  return {
    setAvatar: function (data) {
      console.log(data, 123456);
    },
  };
})();

setTimeout(() => {
  login.trigger("suc", { name: "xcc" });
}, 1000);

 

posted @ 2022-03-11 11:45  xiaochuchun  阅读(125)  评论(0编辑  收藏  举报