发布订阅模式实现及发布订阅者模式与观察者模式的不同

YanceyOfficial 发布于2019-08-22 17:34 / 256人阅读

摘要：发布订阅者模式中，订阅者是不知道也不关心事件是为什么触发，是由哪一个事件触发，只知道事件触发时候，会告诉自己。然而，在发布订阅模式中，发布者和订阅者不知道对方的存在。在发布订阅模式中，组件是松散耦合的，正好和观察者模式相反。

概念

发布订阅者模式，是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

超融合服务器私有云发布订阅模式订阅发布模式 DTS 订阅发布模式订阅模式

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

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

发布订阅模式实现及发布订阅者模式与观察者模式的不同

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

Jensen 2019-08-02 10:32 评论0 收藏0
JavaScript 设计模式（六）：观察者模式与发布订阅模式

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

bingo 2019-08-23 18:36 评论0 收藏0
设计模式之观察者模式与发布订阅模式

摘要：观察者模式与发布订阅的区别在模式中，知道，同时还保留了的记录。发布者订阅者在大多情况下是异步方式使用消息队列。图片源于网络侵权必删如果以结构来分辨模式，发布订阅模式相比观察者模式多了一个中间件订阅器，所以发布订阅模式是不同于观察者模式的。学习了一段时间设计模式，当学到观察者模式和发布订阅模式的时候遇到了很大的问题，这两个模式有点类似，有点傻傻分不清楚，博客起因如此，开始对观察者和发布...

BaronZhang 2019-08-23 18:03 评论0 收藏0
简单理解观察者模式(pub/sub)在前端中的应用

摘要：概念观察者模式被广泛地应用于客户端编程中。所有的浏览器事件，等都是使用观察者模式的例子。在观察者模式中，一个对象订阅另一个对象的指定活动并得到通知，而不是调用另一个对象的方法。此外，观察者模式还可用于实现数据绑定。概念观察者模式被广泛地应用于JavaScript客户端编程中。所有的浏览器事件（mouseover，keypress等）都是使用观察者模式的例子。这种模式的另一个名字叫自...

guyan0319 2019-08-23 12:10 评论0 收藏0
JavaScript 发布-订阅模式

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

13651657101 2019-08-26 13:53 评论0 收藏0