码上掘金模拟发布订阅

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

介绍

发布订阅的设计模式在前端是十分常见的，我们在许多框架和实际应用中都可以接触到发布订阅的例子，接下来，我将设计一个发布订阅的例子，如果大家有任何疑问和难题都可以评论区留言，我会第一时间解决和处理的。谢谢各位观众老爷的支持。

码上掘金地址

核心功能讲解

class SubOrder {
  constructor() {
    this.tasks = {}
  }
  on(type,fn) {

    if(this.tasks[type]) {

      this.tasks[type].push(fn)
    }
    else this.tasks[type] = [fn]
  }
  emit(type) {
    if(this.tasks[type]) {
      let arr = this.tasks[type]
      arr.forEach(element => {
        element()
      });
    }
  }
  del(type,fn) {
    if(this.tasks[type]) {
      for(let i=0;i<this.tasks[type].length;i++) {
        if(this.tasks[type][i]===fn)
        this.tasks[type].splice(i,1)
      }
    }
  }

}
let ob = new SubOrder()
function cb1() {
  console.log("cb1")
}
function cb2() {
  console.log("cb2")
}
ob.on("event1",cb1)

ob.on("event1",cb2)
ob.emit("event1")

1. 首先，我们设计一个es6的class对象，用于模拟发布订阅的设计过程
2. 对象的内部初始化一个对象obj，保存所有订阅对象。
3. 添加一个方法on，表示发布事件的订阅，on的第一个参数是事件类型，第二个参数是一个函数，保存触发的回调函数
4. 添加一个方法emit,表示发布事件的触发，只有一个参数是事件类型，当对应事件被触发后，遍历执行所有的事件
5. 添加一个方法del,用于删除对应事件类型的具体事件。

总结

通过对发布订阅的实际说明和举例子，大家对其内部的设计和原理肯定有了一定的认识，大家可以根据我的分步骤讲解具体的设计一个发布订阅的例子，谢谢各位的观看，有疑问评论区见。