关键词：

一、发布订阅模式

发布订阅模式其实是一种对象间一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到状态改变的通知。

多方订阅，一方发布，订阅放会收到通知

举例：教学楼中每个教室都有一个广播器，例如甲同学进入了A教室，甲同学可以理解为订阅，A教室有着A教室的订阅者，当校长只对A教室的广播进行播放时，只有A教室的所有学生可以受到广播信息。

常见的发布订阅比如 Vue中eventBus的 $on - $emit  

js实现一个发布订阅

<script>
  // 发布订阅模式是一种对象间一对多的关系，当一个对象发生改变时，所有依赖于它的对象都能接收到状态的通知

  // 定义eventBus
  class eventBus 
    // 存放所有订阅者的对象
    clientList = ;

    // 发布  (事件名称，参数)
    $emit = function (event, params) 
      // 循环调用订阅的所有callback
      this.clientList[event].forEach((callback) => callback(params));
    ;

    // 订阅  (事件名称，回调)
    $on = function (event, callback) 
      // 如果之前键不存在  ?  updata:[()=>]  : updata:[()=>,()=>]
      !this.clientList[event]
        ? (this.clientList[event] = [callback])
        : this.clientList[event].push(callback);
    ;
  

  
  // 创建eventBus实例对象
  const events = new eventBus();

  // 定于 updata的事件名称
  events.$on("updata", (params) => 
    console.log("updata1", params);
  );

  // 定于 updata的事件名称
  events.$on("updata", (params) => 
    console.log("updata2", params);
  );

  // 发布订阅
  events.$emit("updata", "参数");
</script>

我们发现每次进行订阅、通知都是在使用events中的 clientList, 并不会直接用$on 和 $emit 发生关系。

 

二、观察者模式

观察者模式既一个对象被多个对象所依赖，当依赖的对象发生更新时，会自动通知所有依赖的对象。

观察者模式和发布订阅模式很相似，区别就是 发布订阅者模式会有一个调度中心去互相联系，而观察者模式 只有观察者和被观察者有直系的联系

举例：一家武校，有两位学生，两位学生为观察者，观察着老师的讲话及动作，老师就称为被观察者，老师一有变动，两位学生就能够观察到老师的变动。

  // 定义观察者
    class Teacher 
        constructor (name)
            this.name = name
            // 存储观察者
            this.students = []
        

        // 添加观察者
        addStu(student)
            this.students.push(student)
        

        // 删除观察者
        delStu(student)
            const idx =this.students.findIndex(it=>it==student)
            idx!=-1?this.students.splice(idx,1):''
        

        // 发送通知
        notice(msg)
            console.log(this.name+'老师说：'+msg);
            this.students.forEach(it=>it.updata(msg))
        
    

    // 定义被观察者
    class Student 
        constructor(name)
            this.name = name
        

        updata(msg)
            console.log(this.name+'收到了老师说的:',msg);
        
    

    const teacherMa  = new Teacher('马保国')
    const stuJia = new Student('甲')
    const stuYi = new Student('乙')

    teacherMa.addStu(stuJia)
    teacherMa.addStu(stuYi)

    teacherMa.delStu(stuYi)

    teacherMa.notice('我要开始练拳了')

 

总结

发布订阅者模式和观察者模式都是一对多的关系，每次有新的通知，都会告知订阅者和观察者，最大的区别就是，发布订阅者中有一个调度中心来通知订阅者，而不是像观察者那样 直接通过被（目标）观察者来通知观察者。

 

javascript设计模式-订阅发布模式(观察者模式)

varEvent=(function(){varglobal=this,Event,_default=‘default‘;Event=function(){var_create,_listen,_trigger,_remove,_shift=Array.prototype.shift,_unshift=Array.prototype.unshift,namespaceCache={},each=f 查看详情

javascript发布订阅者模式和观察者模式及区别(代码片段)

一、发布订阅模式发布订阅模式其实是一种对象间一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到状态改变的通知。多方订阅，一方发布，订阅放会收到通知举例：教学楼中... 查看详情

javascript发布订阅者模式和观察者模式及区别(代码片段)

一、发布订阅模式发布订阅模式其实是一种对象间一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到状态改变的通知。多方订阅，一方发布，订阅放会收到通知举例：教学楼中... 查看详情

观察者模式——javascript

观察者模式又被称为发布-订阅模型或消息机制。基本思想是观察者一个静态（或全局）对象，为大家提供三个方法：发布、订阅、取消订阅。想得到消息的订阅者需要通过订阅某些消息，当发布者发布某些消息的时候对应的订... 查看详情

javascript设计模式——观察者模式

观察者模式，又称发布-订阅模式或消息机制，定义了一种依赖关系，解决了主题对象与观察者之间功能的耦合。通过运用观察者模式，可以解决团队开发中的模块间通讯问题，这是模块间解耦的一种可行方案。首先，我们来把... 查看详情

javascript设计模式与开发实践–观察者模式

概述观察者模式又叫发布–订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个目标对象（为了方便理解，以下将观察者对象叫做订阅者，将目标对象叫做发布者）。发布者的状态发生... 查看详情

发布-订阅者模式(观察者模式)(代码片段)

发布订阅者模式还有一些好的列子应用可以看看javascript设计模式与开发实践这本书！！！！！一、发布订阅模式是什么发布订阅者模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，... 查看详情

javascript观察者模式

...状态发生该变时，所有依赖于它的对象都将得到通知。在JavaScript中，一般用事件模型来替代传统的观察者模式。   下面是售楼处(发布者)与各看房者(订阅者)的例子：   varevent={    查看详情

观察者模式（observer）和发布（publish/订阅模式（subscribe）的区别

...VA设计模式之观察者模式发布订阅模式之JAVA实现：发布者订阅者模式之JAVA实现   观察者模式（Observer）和发布（Publish/订阅模式（Subscribe）的区别在翻阅资料的时候，有人把观察者（Ob 查看详情

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

     观察者模式和发布订阅模式有什么区别？大多数的回答都是：Publishers+Subscribers=ObserverPattern，24种基本的设计模式并没有发布-订阅模式，发布订阅模式属于并发型模式；像典型的Mq；这两种相似单并不可以... 查看详情

javascript设计模式观察者模式

观察者模式又叫发布订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。举个例子，... 查看详情

观察者模式和订阅/发布者模式（转）

在翻阅资料的时候，有人把观察者（Observer）模式等同于发布（Publish）/订阅（Subscribe）模式，也有人认为这两种模式还是存在差异，而我认为确实是存在差异的，本质上的区别是调度的地方不同。观察者模式比较概念的解释是... 查看详情

设计模式之观察者模式

观察者模式观察者模式又被称作发布者订阅者模式，是一种管理对象行为和状态之间的关系的方法。这种模式的实质就是你可以对程序中的某个对象的状态进行观察，并且在其发生变化时能够得到通知。观察者模式存在两个角色... 查看详情

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

...(EventBus)的架构设计中，用到了发布/订阅模式，但发现和观察者模式挺接近，有时容易发生混淆，现试图分清一下他们的关系。     观察者模式的角色为观察者(observer)和主题(subject)对象，observer需要观察subject时... 查看详情

设计模式-发布-订阅者模式(代码片段)

1、发布-订阅者设计模式定义定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知观察者模式和发布订阅模式区别观察者模式是由具体目标（发布者／被观察者）调度的，而发... 查看详情

观察者模式vs发布-订阅模式

...行记录。然而，在发布订阅模式中，发布者（Publisher）和订阅者（Subscriber）不知道对方的存在。它们只有通过消息代理（信息中介）进行通信。2.在发布订阅模式中，组件是松散耦合的，正好和观察者模式相反。3.观察者模式大... 查看详情

javascript设计模式与开发实践–观察者模式http://web.jobbole.com/87809/

概述观察者模式又叫发布–订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个目标对象（为了方便理解，以下将观察者对象叫做订阅者，将目标对象叫做发布者）。发布者的状态发生变... 查看详情

[设计模式]观察者模式与订阅模式

　　在读《设计模式》时，观察者模式一直理解为订阅者/发布者，其实这两种模式还是有差异的。　　一、观察者模式　　　　相关概念：目标和观察者是基类，目标提供维护观察者的一系列方法，观察者提供更新接口。具体... 查看详情