美文网首页
Javascript 发布订阅模式

Javascript 发布订阅模式

作者: 我是一个前端 | 来源:发表于2020-05-25 18: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
    

    相关文章

      网友评论

          本文标题:Javascript 发布订阅模式

          本文链接:https://www.haomeiwen.com/subject/vbuyahtx.html