发布订阅模式实现

Noodles 发布于2019-08-21 16:48 / 3138人阅读

摘要：发布订阅模式介绍常被称作观察者模式，或者消息机制，定义了一种依赖关系，主要是用来解决对象之间的耦合用例实现数据的深度响应，就用到了发布订阅模式的原理，视图订阅了其依赖的数据，数据改变则会通过，通知视图去刷新的事件机制，也是通过利用了发布订阅

1.发布订阅模式

介绍：常被称作观察者模式，或者消息机制，定义了一种依赖关系，主要是用来解决对象之间的耦合；

用例:

①Vue实现数据的深度响应，就用到了发布订阅模式的原理，视图订阅了其依赖的数据，数据改变则会通过notify，通知视图去刷新；

②D3.js的事件机制dispatch，也是通过利用了发布订阅模式；

特点：一般在全局中定义，保证在任何地方都可以发布和订阅；

2.代码：

on订阅,fire发布,remove移除

class Observer {
     constructor() {
         this.subs = []
     }
      //注册
     on(type, fn) {
         if (typeof this.subs[type] === "undefined") {
             this.subs[type] = [fn];
             return;
         }
         for (let i = 0, len = this.subs[type].length; i < len; i++) {
             if (this.subs[type][i] === fn)return;
         }
         this.subs[type].push(fn)
     }
     
     //触发
     fire(type,args){
         if (typeof this.subs[type] === "undefined") {
             throw "type is undefined";
             return;
         }
         this.subs[type].forEach(sub=>{
             sub.call(this,args)
         })
     }
     
     //移除
     remove(type,fn){

         if (typeof this.subs[type] === "undefined") {
             throw "type is undefined";
         }
         this.subs[type] = this.subs[type].filter(sub=>sub !== fn)

     }
 }

测试

 let ob = new Observer();
  function fn1(agrs) {
      console.log("注册成功第1次");
      console.log(agrs)
  }
  function fn2(agrs) {
      console.log("注册成功第2次");
      console.log(agrs)
  }
  function fn3(agrs) {
      console.log("注册成功第3次");
      console.log(agrs)
  }
  ob.on("click", fn1);
  ob.on("click", fn2);
  ob.on("click", fn3);
  ob.on("click", fn1);
  ob.on("click", fn2);
  ob.remove("click", fn2);
  function click1() {
      ob.fire("click", "传参成功")
  }

服务器托管海外云主机发布订阅模式订阅发布模式 DTS 订阅发布模式订阅模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88735.html

订阅发布模式和观察者模式的区别

摘要：或许以前认为订阅发布模式是观察者模式的一种别称，但是发展至今，概念已经有了不少区别。参考文章订阅发布模式和观察者模式真的不一样首选我们需要先了解两者的定义和实现的方式，才能更好的区分两者的不同点。或许以前认为订阅发布模式是观察者模式的一种别称，但是发展至今，概念已经有了不少区别。订阅发布模式在软件架构中，发布-订阅是一种消息范式，消息的发送者（称为发布者）不会将消息直接发送给特...

ysl_unh 2019-08-26 11:01 评论0 收藏0
JavaScript 设计模式（六）：观察者模式与发布订阅模式

摘要：观察者模式维护单一事件对应多个依赖该事件的对象关系发布订阅维护多个事件主题及依赖各事件主题的对象之间的关系观察者模式是目标对象直接触发通知全部通知，观察对象被迫接收通知。观察者模式（Observer）观察者模式：定义了对象间一种一对多的依赖关系，当目标对象 Subject 的状态发生改变时，所有依赖它的对象 Observer 都会得到通知。简单点：女神有男朋友了，朋友圈晒个图，甜...

bingo 2019-08-23 18:36 评论0 收藏0
发布订阅模式实现及发布订阅者模式与观察者模式的不同

摘要：发布订阅者模式中，订阅者是不知道也不关心事件是为什么触发，是由哪一个事件触发，只知道事件触发时候，会告诉自己。然而，在发布订阅模式中，发布者和订阅者不知道对方的存在。在发布订阅模式中，组件是松散耦合的，正好和观察者模式相反。概念发布订阅者模式，是javascript甚至大多数语言都有的语言模式，比较概念的解释是，订阅者把自己想订阅的事件注册到调度中心，当该事件触发时候，发布者发布...

YanceyOfficial 2019-08-22 17:34 评论0 收藏0
发布订阅模式实现及发布订阅者模式与观察者模式的不同

摘要：发布订阅者模式中，订阅者是不知道也不关心事件是为什么触发，是由哪一个事件触发，只知道事件触发时候，会告诉自己。然而，在发布订阅模式中，发布者和订阅者不知道对方的存在。在发布订阅模式中，组件是松散耦合的，正好和观察者模式相反。概念发布订阅者模式，是javascript甚至大多数语言都有的语言模式，比较概念的解释是，订阅者把自己想订阅的事件注册到调度中心，当该事件触发时候，发布者发布...

Jensen 2019-08-02 10:32 评论0 收藏0
JavaScript 发布-订阅模式

摘要：发布订阅模式订阅者把自己想订阅的事件注册到调度中心，当发布者发布该事件到调度中心，也就是该事件触发时，由调度中心统一调度订阅者注册到调度中心的处理代码。发布-订阅模式，看似陌生，其实不然。工作中经常会用到，例如 Node.js EventEmitter 中的 on 和 emit 方法；Vue 中的 $on 和 $emit 方法。他们都使用了发布-订阅模式，让开发变得更加高效方便。一...

13651657101 2019-08-26 13:53 评论0 收藏0
发布订阅模式-实现公众号订阅/内容发布/取消订阅功能

摘要：问观察者模式和发布订阅模式的有什么区别答一下，相信都会有满屏的结果告诉你什么是发布订阅模式，但还是希望自己通过一些例子融入去实现概念理解创建一个对象存储所有订阅者与其调用添加订阅者函数时入参有，将其存储到调用发布订阅信息函数时再根据入问：观察者模式和发布订阅模式的有什么区别？答：https://juejin.im/post/5a14e9... Google一下，相信都会有满屏的结果...

XiNGRZ 2019-08-26 10:22 评论0 收藏0