精华内容
下载资源
问答
  • 发布订阅者模式

    2020-09-20 20:58:03
    发布订阅者模式,基于一个事件(主题)通道,希望接收通知的对象Subscriber通过自定义事件订阅主题,被激活事件的对象Publisher通过发布主题事件的方式通知各个订阅该主题的Subscriber对象。 发布订阅模式与观察者...
     发布订阅者模式,基于一个事件(主题)通道,希望接收通知的对象Subscriber通过自定义事件订阅主题,被激活事件的对象Publisher通过发布主题事件的方式通知各个订阅该主题的Subscriber对象。
    

    发布订阅模式与观察者的不同,“第三者“(事件中心)出现。目标对象并不直接通知观察者,而是通过事件中心来派发通知。
    在这里插入图片描述
    其实 严格意义来讲DOM的事件监听是发布订阅模式
    在这里插入图片描述

    展开全文
  • 小而美的pubsub库,发布订阅者模式
  • 发布订阅者模式,是javascript甚至大多数语言都有的语言模式,比较概念的解释是, 订阅者把自己想订阅的事件注册到调度中心,当该事件触发时候,发布者发布该事件到调度中心(第三方),由调度中心统一调度订阅者...
        

    概念

    发布订阅者模式,是javascript甚至大多数语言都有的语言模式,比较概念的解释是,

    订阅者把自己想订阅的事件注册到调度中心,当该事件触发时候,发布者发布该事件到调度中心(第三方),由调度中心统一调度订阅者注册到调度中心的处理代码。

    优缺点

    优点
    1.一对多。
    一个发布者可以绑定多个订阅者,当事件触发时,由调度中心全部通知。
    2.解耦。
    发布订阅者模式中,订阅者是不知道也不关心事件是为什么触发,是由哪一个事件触发,只知道事件触发时候,会告诉自己。发布者也不用一一通知,只要告诉调度中心,事件触发了就好了。所以代码松耦合。
    3.程序便于扩展。
    缺点:
    实现方式麻烦?

    举例

    用平时身边的例子解释,比如你被阿里邀请面试,面试完你问面试官什么时候出结果,面试官告诉你结果出来时候会通知你的,这样你就不用天天打电话问面试结果了,等面试结果出来,面试官会把面试结果统一发邮件给面试者,当你收到面试结果后,进行下一步操作,是到阿里上班,还是面试下一家。

    代码实现

    var observer = function () {
        var _observer = {};     
        let _queue = {};     // 所有事件的队列
        /**
        * @param 注册的事件名称
        * @param 事件触发时执行的函数
        */
        _observer.on = function (eventName, fn) {
            if (Object.prototype.toString.call(fn) !== '[object Function]') return;
            if (_queue[eventName] && _queue[eventName].length > 0) {
                // 如果之前注册过eventName事件
                _queue[eventName].push(fn);
            } else {
                // 之前没有注册过eventName事件
                _queue[eventName] = [fn];
            }
        },
         /**
        * @param 已经触发的事件(发布事件)
        */
        _observer.trigger = function (triggerEventName) {
            var args = Array.prototype.slice.call(arguments,1);
            if (!_queue[triggerEventName]) return;
            for (var i = 0; i < _queue[triggerEventName].length; i++) {
                _queue[triggerEventName][i].apply(null, args);
            }
        },
        // 移除注册事件
        _observer.remove = function (removeEventName) {
            for(var k in _queue) {
                if (k === removeEventName) {
                    delete _queue[k];
                }
            }
        }
        // 移除所有注册事件
        _observer.removeAll = function () {
            _queue = {};
        }
        return _observer;
    }()
    

    发布订阅者模式与观察者模式区别

    发布订阅者模式与观察者模式是很相似的,之前的好多网站、博客上也把它们画上等号,但是我前段时间接到一个面试,问我,发布订阅者模式与观察者模式有什么却别,当时说一样的,结果面试管说其实不一样,好吧,一脸懵逼,结束时候自己查阅了一下,确实不太一样。

    区别

    • 在观察者模式中,观察者是知道Subject的,Subject一直保持对观察者进行记录。然而,在发布订阅模式中,发布者和订阅者不知道对方的存在。它们只有通过调度中心进行通信。
    • 在发布订阅模式中,组件是松散耦合的,正好和观察者模式相反。
    • 观察者模式大多数时候是同步的,比如当事件触发,Subject就会去调用观察者的方法。而发布-订阅模式大多数时候是异步的(使用消息队列)

    举个例子
    观察者模式就像你没有经验却买了比特币或者股票,然后害怕赔钱一直盯着k线图,一有变化立马就知道了,然后做下一步操作,是观望是买是抛都可以,熟悉vue的同学应该知道watch这个方法吧,对,就是观察者模式,国外有一图拿过来给你们看看
    图片描述

    参考

    1.观察者模式 vs 发布-订阅模式
    2.Observer vs Pub-Sub

    展开全文
  • 1、发布订阅者模式 //订阅发布平台应该是一个全局的 var pubsub={}; (function(pubsub){ var topics={}; pubsub.publish=function(topic){ //发布话题,订阅了该话题的都会收到消息 if(!topics[topic])...

    1、发布订阅者模式

    //订阅发布平台应该是一个全局的
    var pubsub={};
    (function(pubsub){
      var topics={};
      pubsub.publish=function(topic){
        //发布话题,订阅了该话题的都会收到消息
        if(!topics[topic]){
          //不存在该话题
          return;
        }
        var funs = topics[topic];
        funs.forEach(function(fun){
          var count = 6;
          var timer = setInterval(function(){
            fun(count--);
            if(count==0){
              clearInterval(timer);
            }
          },1000);
          
        });
      }
      pubsub.subscribe=function(topic,fun){
        console.info('开启晚餐通知');
        if(!topics[topic]){
          topics[topic] = [fun];
        }else{
          topics[topic].push(fun);
        }
      }
    })(pubsub);
    
    function dinner(){
      pubsub.subscribe('dinner',function(data){
         console.info(`还有${data}人在排队`);
      });
       pubsub.publish('dinner');
    }

    2、观察者模式

    //观察者模式
    //所有排队吃饭的人都需要监听餐馆的动态,所以吃饭的人是监听者,dinner是监听的一方
    //餐馆需要一个叫号的系统List,每次叫号,更新所有排队人的信息
    function Resturant(){
      //排队的队列
      this.list = new List();
      this.addDinner = function(dinner){
         //加入排队的队列中
         this.list.add(dinner);
      }
      this.notify = function(){
        this.list.get().forEach(function(dinner){
          dinner.update();
        });
      }
    }
    
    function List(){
      this.list=[];
      this.add = function(dinner){
        this.list.push(dinner);
      }
      this.get = function(){
        return this.list;
      }
    }
    
    function Dinner(number){
      this.update=function(){
        console.info(`用餐`);
      }
    }
    
    var dinner1 = new Dinner(1);
    var dinner2 = new Dinner(2);
    
    var resturant = new Resturant();
    resturant.addDinner(dinner1);
    resturant.addDinner(dinner2);
    resturant.notify();

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

    1、观察者模式,需要将观察者自身(对象)注册到消息队列中,等到有消息变动时,更新观察者的更新函数

    转载于:https://www.cnblogs.com/panyujun/p/11059579.html

    展开全文
  • 不管是观察者模式还是发布订阅者模式,参与角色只有两种,只是他们之间沟通机制不一样; 观察者模式:观察者模式的两种角色:“观察者和被观察者”,他们之间是直接进行关联,直接通信。所以他们需要知道对方是谁。...

    一、基本概述

    不管是观察者模式还是发布订阅者模式,参与角色只有两种,只是他们之间沟通机制不一样;

    1. 观察者模式:观察者模式的两种角色:“观察者和被观察者”,他们之间是直接进行关联,直接通信。所以他们需要知道对方是谁。

    在这里插入图片描述
    2. 发布订阅者模式:该模式也有两种角色:“发布者和订阅者”,他们是通过中间层进行相互通信,并将双方关系进行绑定。这两种角色相互不知道对方是谁。

    在这里插入图片描述

    总结:观察者模式和发布订阅者作用的目的其实是一样的,只不过他们之间的实现方式不一样。发布订阅者模式相对于观察者模式耦合度更低,因为他们之间不需要直接通信(订阅者只需要告诉中间层他订阅什么内容,而发布者只需要告诉中间层状态);

    二、代码实现

    1、观察者模式

    /**
    * ES5版本(建议采用函数表达式进行观察者定义)
    * @Function Subject 被观察者函数
    * @Function addObserver 添加观察者方法
    * @Function delObserver 删除观察者方法
    * @Function notify 通知单个观察者
    * @Function notifyAll 通知所以观察者
    **/
    function Subject(){
        //用来管理观察者
        this.observers = [];
    }
    Subject.prototype = {
        addObserver:function(observer){
            if(this.observers.indexOf(observer) == -1){
                this.observers.push(observer);   
            }
        },
        delObserver:function(observer){
            var _index = this.observers.indexOf(observer);
            if(_index === -1) return;
            this.observers.splice(_index,1);
        },
        notify:function(observer){
            var _index = this.observers.indexOf(observer);
            if(_index === -1) return;
            var msg = "这是给单个观察者的数据";
            this.observers[_index](msg);
        },
        notifyAll:function(){
            var i=0,len=this.observers;
            var msg = "这是给所有观察者的数据";
            for(;i<len;i++){
                this.observers[i](msg);
            }
        }
    }
    //定义观察者A(函数表单时形式定义观察者)
    var observerA = function(msg){
        console.log(msg);
    }
    //定义观察者B(函数表单时形式定义观察者)
    var observerB = function(msg){
        console.log(msg);
    }
    var sub = new Subject();
    sub.addObserver(observerA);
    sub.addObserver(observerB);
    sub.notify(observerA);  //通知观察者A
    sub.notify(observerB);  //通知观察者B
    sub.notifyAll();    //通知所有的观察者
    
    /**
    * ES6版本(建议采用函数表达式进行观察者定义)
    * @Class Subject 被观察者类
    * @Function addObserver 添加观察者方法
    * @Function delObserver 删除观察者方法
    * @Function notify 通知单个观察者
    * @Function notifyAll 通知所以观察者
    **/
    class Subject{
        constructor(){
            this.observers = [];
        }
        addObserver(observer){
            if(this.observers.indexOf(observer) == -1){
                this.observers.push(observer);   
            }
        }
        delObserver(){
            const _index = this.observers.indexOf(observer);
            if(_index === -1) return;
            this.observers.splice(_index,1);
        }
        notify(){
            const _index = this.observers.indexOf(observer);
            if(_index === -1) return;
            const msg = "这是给单个观察者的数据";
            this.observers[_index](msg);
        }
        notifyAll(){
            const msg = "这是给所有观察者的数据";
            this.observers.forEach((observer)=>{
                observer(msg);
            })
        }
    }
    //定义观察者A(函数表单时形式定义观察者)
    const observerA = function(msg){
        console.log(msg);
    }
    //定义观察者B(函数表单时形式定义观察者)
    const observerB = function(msg){
        console.log(msg);
    }
    const sub = new Subject();
    sub.addObserver(observerA);
    sub.addObserver(observerB);
    sub.notify(observerA);  //通知观察者A
    sub.notify(observerB);  //通知观察者B
    sub.notifyAll();    //通知所有的观察者
    

    2、发布订阅者模式

    //中间层
    function Broker(){
        this.subscribers = [];
    }
    Broker.prototype = {
        addSubscriber:function(subscriber){
            if(this.subscribers.indexOf(subscriber) == -1){
                this.subscribers.push(observer);   
            }
        },
        delSubscriber:function(subscriber){
            var _index = this.subscribers.indexOf(subscriber);
            if(_index === -1) return;
            this.subscribers.splice(_index,1);
        },
        notifyAll:function(msg){
            var i=0,len=this.subscribers;
            for(;i<len;i++){
                this.subscribers[i](msg);
            }
        }
    }
    //发布者
    function Publisher(broker){
        this.broker = broker;
    }
    Publisher.prototype = {
        notifyAll:function(){
            var msg = "这是给所有订阅者的数据";
            this.broker.notify(msg);
        }
    }
    //定义订阅者A(函数表单时形式定义订阅者)
    const subscriberA = function(msg){
        console.log(msg);
    }
    //定义订阅者B(函数表单时形式定义订阅者)
    const subscriberB = function(msg){
        console.log(msg);
    }
    //实例化中间层
    var brokerObj = new Broker();
    brokerObj.addSubscriber(subscriberA);
    brokerObj.addSubscriber(subscriberB);
    //实例化发布者
    var publisherObj = new Publisher(brokerObj);
    publisherObj.notifyAll();
    

    说明:ES6版本执行衍生实现

    从以上代码可知,“发布订阅者模式”发布者不需要知道订阅者是谁,只需要将消息下发到中间层即可;而“观察者模式”观察者需要知道观察者是谁。所以发布订阅者耦合度更低;

    划重点记录:

    1. 为什么用函数表达式声明观察者/订阅者:采用函数表达式形式声明“观察者”和“订阅者”,能够很好的暴露出所属函数,防止重复订阅,取消特定的观察者/订阅者;
    2. 发布订阅者为什么不能通知单个订阅者:上述代码可知,发布订阅者模式相对于观察者模式,少了通知单个订阅者方法(notify方法)。由于发布者和订阅者不知道双方的存在,只通过中间层通信,所以无法知道单个订阅者是谁?自然没有通知单个订阅者的功能。(注意:发布订阅者保持发布者和订阅者的完全不知情性,不要打破这种规则(强制添加通知单个订阅者功能));
    展开全文
  • 在软件开发领域,开发此功能往往用到发布订阅者模式。下面我以简单的javascript来说明。 定义发布者类。发布者最基本的两个属性:发送的消息,发送的人 function Publisher() { this.observers =[]; // 存储需要...
  • 前言:观察者模式、发布订阅者模式很容易产生混淆。 观察者模式(Observer)  是发布者和观察者直接交流,一对多。多个观察者依赖一个发布者的数据,从而不会让更多对象控制同一份数据,这样能够得到更干净的...
  • 设计模式:有助于提高代码的复用性和可维护性 常用的12种设计模式 工厂模式 单例模式 适配器模式 装饰器模式 ...观察者与发布订阅者模式 策略模式 原型模式 桥接模式 组合模式 命令模式 享元模式 ...
  • EventBus系列文章: ...在EventBus的学习当中,EventBus是基于发布订阅者模式的消息处理框架。 EventBus is an open-source library for Android and Java using the publisher/subscriber pattern for loose co...
  • js发布订阅者模式

    千次阅读 2019-06-03 21:16:52
    发布/订阅模式可以用一个全局的 Event 对象来实现,订阅者不需要了解消息来自哪个发布者,发布者也不知道消息会推送给哪些订阅者,Event 作为一个类似“中介者” 的角色,把订阅者发布者联系起来。 /** * 统一...
  • 图片来源 观察者模式理解 一个对象(称为主体subject)维持一系列依赖于它的对象(称为观察者observer),将有关状态的任何变更自动通知给它们(观察者)。 通俗点讲:有一个主体对象,这个...发布订阅者模式理解 ...
  • MQ发布订阅者模式

    2020-12-02 23:20:04
    注意:需先启动订阅者,再启动消费者 发布消息 ... import org.apache.activemq.... *发布订阅模式-- 消息生产者 */ public class PS_Producer { public static void main(String[] args) throws JMSException { //1,
  • 发布订阅者模式 发布 — 订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状 态发生改变时,所有依赖于它的对象都将得到通知。在 JavaScript开发中,我们一般用事件模型 来替代传统的发布...
  • 观察者模式: 观察者模式定义了对象间一对多依赖,当一个对象改变状态时,这个对象的所有依赖者都会收到通知并按照自己的方式进行更新 具体如下图所示: 观察者模式在实际应用中被使用的相当的广泛。这种...
  • 发布订阅者模式进化论 基础版本 第一步进化—仅订阅需要信息 第二步进化—通用型发布订阅 第三步进化—解耦发布者和订阅者关系 第四步进化—命名空间(防止代码越来越复杂,形成的全局冲突) PS:发布订阅者模式...
  • * 发布订阅者模式实现proxy数据劫持(vue)(TypeScript版) */ interface Publish { register(eventName : string, sub : Subscribe) : void;//注册订阅者 remove(eventName : string, sub ?: Subscribe) : ...
  • 发布---订阅模式又叫观察者模式,它定义了对象间的一种一对多(一个发布,多个观察)的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知。 优点 1、支持...
  • 首先我们用一个示例来演示一下什么是观察者模式,有这样一个场景,在一个院子里,有一个小偷,和若干条狗,小偷只要一行动,狗就会叫,狗叫的动作是依赖小偷的,如果小偷不行动,狗是不会叫的,也就是说狗的叫的状态...
  • 在ionic3 中实现订阅发布模式,需要用到Events。 Events下面有三个方法 events.subscribe() 订阅 events.publish() 发布 events.unsubscribe() 取消订阅 用法: 在一个页面上发布事件: import { Events} ...
  • 然后给发布者添加一个缓存列表,用于存放回调函数以便通知订阅者 最后发布消息的时候,发布者会遍历这个缓存列表,依次触发里面存放的订阅者回调函数;另外我们可以往回调函数里填入一些参数,订阅者可以接受这些...
  • Vue双向绑定(数据劫持,发布订阅者模式,diff算法) 最近一段时间自己找点东西学习,因为面试vue双向绑定问的挺多的,就想去深入研究一下本质原理,说是本质也不算,就是看了看别人的研究总结一点自己的看法和理解...
  • 占位
  • // 主题,接收状态变化,触发每个观察,这里你把它想象成微博这个系统的一部分 class Subject { constructor(name) { this.name=name this.state ="" //相当于发表的内容 this.observers = [] //想当于关注他...
  • 一个发布者,多个订阅者 1.发布者JMSProducer package com.java1234.activemq2; import javax.jms.Connection; import javax.jms.ConnectionFactory; import javax.jms.Destination; import javax.jms....
  • vue中发布订阅者模式

    千次阅读 2020-01-13 10:54:07
    https://www.jianshu.com/p/2ec316ca0f8b
  • <!... <... <head> ...meta charset="UTF-8">...非父子组件间的传值(Bus/总线/发布订阅者模式/观察着模式)</title> <script src="./vue.js"></script> </head> &...
  • 发布订阅模式:也称作观察者模式,定义对象间的一对多的依赖关系,当一个对象的状态发 生改变 时,所有依赖于它的对象都将得到通知; 编码中常用的场景: //订阅事件 window.addEventListener('click',()=&...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,813
精华内容 3,925
关键字:

发布订阅者模式