手把手教你写出一个发布订阅者模式

最近在写登录注册组件，由于使用的时原生js写的，需要监听组件的各种事件，所以用到了发布订阅者模式进行监听。在这之前一直都是对这个模式模模糊糊的，现在终于搞明白原理了。  下面我们一起来看看发布订阅者模式到底是啥吧~

定义一个对象eventProxy, 通过对象包含on,off,emit方法

const eventProxy = {
    onList: {}, // 事件对象
    on: function() {}, // 订阅
    off: function() {}, // 取消订阅
    emit: function() {} // 发布
}

订阅方法

on: function (key, fn) {    if (!this.onList[key]) { // 判断事件集合里有没有定义这个事件      this.onList[key] = [fn]; //没有的话加上需要执行的函数    }    this.onList[key].push(fn); // 有这个事件则直接push这个函数  },

取消方法

off: function (key, fn) {    if (!this.onList[key]) return false;  // 如果事件集合里没有这个事件 return    let fnIndex = this.onList[key].indexOf(fn); // 查找要删除事件的index    if (fnIndex === -1) return false; // 如果事件里没有这个函数 return    this.onList[key].splice(fnIndex, 1); // 否则 删除这个事件里函数  },

发布

emit: function (key, ...args) {    if (!args.length) return;  // 如果事件里的函数为空 return    //如果没有任何订阅则返回    if (!this.onList[key] || !this.onList[key].length) return;    // 发布对应的订阅事件    const subscriber = this.onList[key];    subscriber.forEach(cb => {      cb.apply(null, args); // 执行这些函数    })  }

整体代码

const eventProxy = {  onList: {},  //订阅  on: function (key, fn) {    if (!this.onList[key]) {      this.onList[key] = [fn];    }    this.onList[key].push(fn);  },  //取消订阅  off: function (key, fn) {    if (!this.onList[key]) return false;    let fnIndex = this.onList[key].indexOf(fn);    if (fnIndex === -1) return false;    this.onList[key].splice(fnIndex, 1);  },  // 发布  emit: function (key, ...args) {    if (!args.length) return;    //如果没有任何订阅则返回    if (!this.onList[key] || !this.onList[key].length) return;    // 发布对应的订阅事件    const subscriber = this.onList[key];    subscriber.forEach(cb => {      cb.apply(null, args);    })  }}

怎么样 这样一步步下来是不是很简单，你学会了没有~