Javascript 发布订阅模式

2020-05-25  本文已影响0人  我是一个前端

发布订阅模式分为为两部分 on 和 emit

on 收集函数到一个数组
emit 依次执行这些函数
let fs = require("fs")

// 简版的发布订阅
let event = {
  arr:[],
  // 收集函数
  on(fn){
    this.arr.push(fn)
  },
  // 依次执行
  emit(){
    this.arr.forEach(fn => fn());
  }
}
let clump = []
event.on(()=>{
  console.log("收集一次")
  // 收集完毕执行条件
  if (clump.length === 2) {
    console.log("收集函数完毕-" + "收集结果-" + clump)
  }
  
})

fs.readFile('./a.text',"utf8",(err,data)=>{
  clump.push(data)
  event.emit()
})

fs.readFile('./b.text', "utf8", (err, data) => {
  clump.push(data)
  event.emit()
})

更新一版

// 简版的发布订阅
let event = { //发布订阅 相互之间是没有关联的 需要一个 event的作为一个操盘手来操作
  topics: {}, //收集订阅的一个集合对象,
  // 收集函数 subscribe
  /**
   * 
   * @param {订阅事件名} eventName 
   * @param {对应事件名的函数} fn 
   */
  on(eventName,fn){
    // 如果没有当前事件名集合,创建一个空集合
    if (!this.topics[eventName]) {
      this.topics[eventName] = []
    }
    // 如果有了直接push 还能查找订阅的历史。
    this.topics[eventName].push(fn)
  },
  // 发布 依次执行 publish
  /**
   * 
   * @param {订阅事件名} eventName
   * @param  {参数集合} arg 
   */
  emit(eventName,...arg) {
    this.topics[eventName].forEach(fn => fn(...arg));
  }
}

// 测试一下

// 订阅
event.on("test",(...arg) => {
  console.log(...arg)
})

//发布
event.emit("test", "a", "b") //a b
上一篇下一篇

猜你喜欢

热点阅读