首页 > 其他分享> 文章详细

发布订阅模式

2021-11-28 18:34:00 阅读：130 来源： 互联网

标签：订阅 console 队列模式发布 person1 message type fn

+ 有一个对象,有人一直看着他

+ 当这个对象发生变化的时候,第三方通知这个看着的人,触发技能

+ 例子:买书

1.普通程序员买书

=> 去书店,问,没有

=> 回家

=> 过一会再去,没有,回家

2.发布订阅的程序员

=> 去书店,问,没有,留下一个联系方式给店员

=> 一旦有了书,就会接到电话

=> 触发技能去买书

+ 只需要一个构造函数

=> 创建一个第三方店员的身份

=> 我们的任务就是模拟一个 addEventListener()

分析构造函数

+ 属性:消息队列

{

click:[fn1,fn2],

abc:[fn1,fn2,fn3]

}

+ 方法:能向消息队列里面添加内容

+ 方法:删除消息队列里面的内容

 // 创建一个第三方观察者构造函数          
      class Observer{
        constructor(){
          this.message = {

          }
        }

        // 1.向消息队列里面添加内容
        on(type,fn){
          // type 我拜托你看着的行为
          // fn 我让你在行为发生的时候做的事情
          // 就应该把写着记录在队列
          // 1.判断message里面有没有这个行为已经被注册过了
          // 如果没有,我应该给你赋值一个行为,赋值为[]
          // 如果有,直接向数组里添加就可以了
          if(!this.message[type]){
            // 表示消息队列里面还没有注册过
            this.message[type] = []
          }

          this.message[type].push(fn)
          // 直接进行push
        }
        // 2.删除消息队列里面的内容
        off(type,fn){
          // 判断 如果 fn 不存在,只有 一个参数的清空
          if(!fn){
            // 直接把这个事情取消掉
            // 从 message 里面把 a 成员删除掉就好了
            delete this.message[type]
            return
          }

          // 代码能来到这里,表示 fn 存在
          // 判断你是不是真的订阅过
          if(!this.message[type]) return

          // 你确实订阅过,我就可以使用filter删除
          this.message[type] = this.message[type].filter((item)=>{ return item!==fn })

        }
        // 3.触发消息队列
        emit(type){
          // 判断是不是有订阅过
          if(!this.message[type]) return

          // 找到这个数组,把里面的每一个函数触发
          this.message[type].forEach(fn => {
            // fn 就是每一个函数
            fn()
          });
        }
      }


      // 使用构造函数创建一个实例
      const person1 = new Observer()

      // 当你想拜托这个 person1 帮你观察一些内容的时候
      // 告诉你一个行为,当行为出现的时候,告诉你干什么
      person1.on('a',handlerA)
      person1.on('a',handlerB)

      // 告诉person1,我这个事情不用你管了
      // 1.我只告诉你这个事情不用你管了
      // person1.off('a') //把 消息队列 里面属于 a 的数组清空掉
      person1.off('a',handlerA) //告诉你a发生的时候,不用做handlerA这个事情了

      // person1 这个人一旦触发a行为,就要把后面的所有事件处理函数执行掉
      person1.emit('a')

      function handlerA(){console.log('handlerA')}
      function handlerB(){console.log('handlerB')}
      function handlerC(){console.log('handlerC')}
      function handlerD(){console.log('handlerD')}
      function handlerE(){console.log('handlerE')}
      function handlerF(){console.log('handlerF')}

标签：订阅,console,队列,模式,发布,person1,message,type,fn
来源： https://blog.csdn.net/freeman_xv1/article/details/121595216

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

发布订阅模式