从Vue层面 - 解析发布订阅模式和观察者模式区别

这篇具有很好参考价值的文章主要介绍了从Vue层面 - 解析发布订阅模式和观察者模式区别。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

观察者模式和发布订阅模式作为日常开发中经常使用到的模式,我一直不能做到很好的区分。最近在看Vue的源码,里面设计到了观察者模式,比较感兴趣,就去学习了下,这里做个总结吧。

一、发布订阅模式

什么是发布订阅模式?

基于一个事件中心,接收通知的对象是订阅者,需要先订阅某个事件,触发事件的对象是发布者,发布者通过触发事件,通知各个订阅者。

举例:比如平时订阅的微信公众号,这里就涉及到两个角色:公众号(事件中心)和订阅了公众号的用户(订阅者)。当公众号的作者发布了文章之后,订阅公众号的用户就会收到消息,这里又涉及到了一个角色:公众号的作者(发布者).

应用场景

vue中的事件总线就是使用的发布订阅模式;它使用 $emit$on 进行兄弟组件通信,进行参数传递。

手动实现vue中的发布订阅模式:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 中发布订阅模式</title>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>  
    // Vue 的实例,创建事件总线
    let bus = new Vue()
    // 订阅事件
    bus.$on('eventName1', val => {
      console.log('eventName1---->', val)
    })
    bus.$on('eventName2', val => {
      console.log('eventName2---->', val)
    })

    // 发布事件
    bus.$emit('eventName1', 'eventName1')
    bus.$emit('eventName2', 'eventName2')
  }
  </script>
</body>
</html>

打印结果:

从Vue层面 - 解析发布订阅模式和观察者模式区别,Vue,JavaScript,vue.js,观察者模式,javascript

在上述代码中,bus 就是我们创建的 事件总线,它是一个 Vue 实例。我们可以在不同的组件中引入这个实例,并使用 $on 方法来监听事件,使用 $emit 方法来触发事件。通过共享同一个事件总线实例,不同组件之间可以通过事件进行通信,实现解耦。

需要注意的是,使用 事件总线模式 时要确保在适当的时候 销毁 事件总线,以避免出现 内存泄漏 的问题。可以在组件的生命周期钩子中销毁事件总线:

beforeDestroy() {
  bus.$off();
}

二、观察者模式

1)什么是观察者模式?

目标者对象 和 观察者对象 有相互依赖的关系,观察者对某个对象的状态进行观察,如果对象的状态发生改变,就会通知所有依赖这个对象的观察者进行更新操作。

观察者模式相比发布订阅模式少了个 事件中心

  • 目标者对象【Subject】:是被观察的对象,它维护一组观察者,并提供用于 添加、删除和通知 观察者的方法。
  • 观察者对象【Observe】:接收 Subject 状态变更通知并处理。
  • 目标者对象【Subject】状态变更时,通知所有观察者对象【Observe】进行更新操作。

2)应用场景

观察者模式在Vue中应用场景:数据响应式变化

在上一篇 Vue源码学习 - 数据响应式原理 文章中已经了解到,每个响应式属性都有 一个 dep实例 ,dep存放了依赖这个属性的 watcher(watcher是观测数据变化的函数),如果数据发生变化,dep 就会通知所有依赖它的 观察者watcher 去调用更新方法。因此,观察者需要被目标对象收集,目的是通知依赖它的所有观察者
为什么watcher中也要存放dep呢?原因是因为当前正在执行的 watcher 需要知道此时是哪个 dep 通知了自己

3)vue中的观察者模式

观察者(订阅者) - Watcher

  • update(): 当事件发生时,具体要做的事情。

目标者(发布者) - Dep

  • subs数组:存储所有的观察者。
  • addSub():添加观察者。
  • removeSub():移除观察者。
  • notify():通知观察者; 当事件发生后调用所有观察者的update()。

没有事件中心

手动实现观察者模式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>观察者模式</title>
</head>
<body>
  <script>
    // 目标者(发布者)
    class Dep {
      constructor () {
        // 记录所有的订阅者
        this.subs = []
      }
      // 添加订阅者
      addSub (sub) {
        if (sub && sub.update) {
          this.subs.push(sub)
        }
      }
      // 发布通知
      notify () {
        this.subs.forEach(sub => {
          sub.update()
        })
      }
    }
    
    // 观察者(订阅者)
    class Watcher {
      update () {
        console.log('update')
      }
    }
    
    //创建实例化对象 测试一下
    let dep = new Dep()
    let watcher = new Watcher()
    let watcher1 = new Watcher()
    // 添加订阅者
    dep.addSub(watcher)
    dep.addSub(watcher1)
    // 开启通知
    dep.notify()
    // 执行结果 update --->
  </script>
</body>
</html>

打印结果:触发两次更新通知。

从Vue层面 - 解析发布订阅模式和观察者模式区别,Vue,JavaScript,vue.js,观察者模式,javascript

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

1)从组成分析

  • 观察者模式里,只有两个角色:观察者目标者(也可以叫被观察者)。其中 被观察者 是重点。
  • 发布订阅模式里,不仅仅只有 发布者订阅者,还有一个 事件中心。其中 事件中心 是重点。
观察者模式 发布订阅模式
2个角色 3个角色
重点是 被观察者(目标者) 重点是 事件中心

2)从关系上分析

  • 观察者和目标者,是松耦合的关系
  • 发布者和订阅者,则完全不存在耦合

3)从使用角度分析

  • 观察者模式,多用于 单个应用内部 (Vue中的数据响应式变化就是观察者模式)
  • 发布订阅模式,更多用于 跨应用的模式(比如我们常用的 消息中间件

可参考:
发布订阅模式和观察者模式文章来源地址https://www.toymoban.com/news/detail-617946.html

到了这里,关于从Vue层面 - 解析发布订阅模式和观察者模式区别的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • C++之观察者模式(发布-订阅)

    目录 模式简介 介绍 优点 缺点 代码实现 场景说明 实现代码 运行结果 观察者模式( Observer Pattern ) ,也叫我们熟知的 发布-订阅模式。 它是一种 行为型模式。 介绍 观察者模式主要关注的是对象的一对多的关系, 也就是多个对象依赖于一个对象,当该对象的 状态发生改变

    2024年02月15日
    浏览(43)
  • 观察者模式、中介者模式和发布订阅模式

    观察者模式定义了对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知,并自动更新 观察者模式属于行为型模式,行为型模式关注的是对象之间的通讯,观察者模式就是观察者和被观察者之间的通讯 例如生活中,我们可以用报

    2024年02月15日
    浏览(45)
  • JavaScript 简单实现观察者模式和发布-订阅模式

    大家好,我是南木元元,热衷分享有趣实用的文章。今天来聊聊设计模式中常用的观察者模式和发布-订阅模式。 观察者模式定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。 如何理解这句话呢?来举个生活中的例子

    2024年02月12日
    浏览(88)
  • 设计模式(四) —— 观察者模式/发布订阅模式,c和c++示例代码

    往期地址: 设计模式(一)——简单工厂模式 设计模式(二)——策略模式 设计模式(三)——装饰模式 本期主题: 使用c和c++代码,讲解观察者模式、发布订阅模式 发布-订阅模式是一种行为设计模式,它允许多个对象通过事件的发布和订阅来进行通信; 在这种模式中,

    2023年04月17日
    浏览(43)
  • 【JavaScript】手撕前端面试题:寄生组合式继承 | 发布订阅模式 | 观察者模式

    🧑‍💼个人简介:大三学生,一个不甘平庸的平凡人🍬 🖥️ NodeJS专栏:Node.js从入门到精通 🖥️ 博主的前端之路(源创征文一等奖作品):前端之行,任重道远(来自大三学长的万字自述) 🖥️ TypeScript知识总结:TypeScript从入门到精通(十万字超详细知识点总结) 👉

    2023年04月08日
    浏览(92)
  • 【RxJava】RxJava 简介 ( RxJava 概念 | RxJava 组成 - 被观察者 / 观察者 / 订阅 / 操作符 | RxJava 适用场景 )

    RxJava 框架 是一个 异步编程函数库 , 包含了如下要素 : 观察者模式 迭代器模式 函数式编程 RxJava 框架应用场景 : 异步操作 事件流 RxJava 组成要素 : Observable(被观察者): Observable 是一个 可以发送消息的数据源 , 可以同时发送若干消息 , 消息的格式可以通过泛型进行定义 ; 消

    2024年02月06日
    浏览(44)
  • 观察者模式(上):详解各种应用场景下观察者模式的不同实现方式

            从今天起,我们开始学习行为型设计模式。我们知道,创建型设计模式主要解决“对象的创建”问题,结构型设计模式主要解决“类或对象的组合或组装”问题,那行为型设计模式主要解决的就是“ 类或对象之间的交互 ”问题。 原理及应用场景剖析 在对象之间

    2024年02月16日
    浏览(52)
  • 【C++ 观察者模式 思想理解】C++中的观察者模式:松耦合设计与动态交互的艺术,合理使用智能指针观察者

    在进入技术细节之前,理解观察者模式(Observer Pattern)的基本概念和它在现代编程中的重要性是至关重要的。 观察者模式是一种设计模式,它定义了对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并自动更新。在C++中,这个

    2024年01月24日
    浏览(54)
  • 行为型模式 | 观察者模式

    观察者模式又叫做发布-订阅(Publish/Subscribe)模式,定义了一种一对多的依赖关系 。让多个观察者对象同时监听某一个主题对象,这个主题对象在状态上发生变化时,会通知所有观察者对象,使它们能够自动更新自己。 软件系统常常要求在某一个对象的状态发生变化的时候

    2024年01月22日
    浏览(76)
  • 设计模式——观察者模式

    观察者模式可以分为观察者和被观察者,观察者通过注册到一个被观察者中,也可视为订阅,当被观察者的数据发生改变时,会通知到观察者,观察者可以据此做出反应。 可以类比订阅报纸,报社就是被观察者,订阅者就是观察者,订阅者通过订阅报纸与报社建立联系,而报

    2024年02月15日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包