你不知道的javascript设计模式(八)---- 发布-订阅模式

简介: 你不知道的javascript设计模式(八)---- 发布-订阅模式

前言

上一章我们介绍了一种简单但是常见的设计模式,迭代器模式,也自己实现了一遍迭代器对象,这一章节要介绍的内容相信大家或多或少都耳濡目染过,那就是发布-订阅模式


正文

发布-订阅模式的定义

发布-订阅模式又称观察者模式,它定义了对象间的一种一对多的依赖关系,当一个对象的状态发生改变的时候,所有依赖它的对象都会得到通知。前几章我们介绍的设计模式都分离了业务场景的特殊部分,那么发布-订阅模式呢,没错,就如名字所示的那样,发布-订阅模式分离了发布和订阅的功能,让两者间不再需要互相关注对方内部的逻辑


发布-订阅模式的实现

售楼处的例子

在实现发布-订阅模式前,我们模拟一个场景,假设有一个售楼处,每天会有不同的顾客来订阅楼盘的信息,而售楼的小姐姐会在楼盘的价格信息发生变化的时候,分别通知这些顾客,这就是一个明显的发布-订阅模式的例子。可以发现,这个例子体现了发布-订阅模式的两个明显的优点:

  • 顾客不再需要主动一直向售楼小姐姐询问楼盘的消息,也不需要关注什么时候楼盘发生变化,售楼处会去监听,顾客只负责订阅这份消息
  • 顾客和售楼处的耦合性降低,当有新的购房者出现的时候,只需要把手机号留在售楼处,而售楼处也并不在意用户的其他信息

实现售楼处的例子

在实现之前,我们先来缕缕这个场景发布-订阅实现的思路,无非就是下面三点:

  • 先创建发布者对象(售楼处)
  • 给发布者对象创建一个缓存数组,用来存放回调函数来通知不同的订阅者(顾客)
  • 当需要发布消息的时候,发布者会遍历这个缓存数组,依次触发里面存放的订阅者回调函数

顺着上面的思路,我们不难封装出下面的售楼处:


640.png


这样我们就已经实现好了一个简单的发布-订阅模式,但是上面的实现还并不是完美的,还存在一些问题,并没有对订阅定制化,这样会导致可能你没订阅这个消息也会发布消息,比如小陈只想订阅2号楼盘的价格变化,按上面的写法不管是什么楼盘都会去给小陈发布通知消息,所以我们需要加一个标志的key,让订阅者只收到他们感兴趣的内容



这样就好多了,顾客终于可以订阅自己感兴趣的部分了,售楼处也会根据用户的兴趣去发布对应的消息给顾客!


取消订阅的事件

假设有一天小陈又不感兴趣这个楼盘了,或者已经买好了,但是售楼处还是照常给小陈发短信,小陈想取消掉之前他订阅的事件应该怎么办呢,所以我们为售楼处额外再封装一个remove方法,用于订阅事件的取消



javascript中实现发布-订阅模式的便利性

在java中实现发布-订阅模式,通常会把订阅者本身当作引用传入发布者对象中,同时,订阅者对象还需提供一个名为诸如update的方法,供发布者调用。而在javascript中我们可以直接使用回调函数来代替传统发布-订阅者模式,显得更加优雅

值得一提的是,vue中的双向绑定源码也是使用发布-订阅者模式去实现的,感兴趣的同学可以到网上搜相关源码去阅读


小结

这一章我们给大家介绍了发布-订阅模式,也称观察者模式,发布-订阅模式有着明显的优势:一、减少了程序时间上的耦合;二、减少了各模块间的耦合;可以应用于异步等场景,可以帮助我们编写更加松散耦合的代码

但是发布-订阅模式也有着它的缺陷,创建订阅者会消耗一定的内存,并且当消息一直未发布的时候,订阅者也会一直存在,对内存会有一定的损耗,并且大量的订阅者和发布者交错在一起,也会导致bug的难以追寻踪迹,难以判断其源头,所以也不能滥用发布-订阅模式


目录
相关文章
|
1月前
|
设计模式 安全 Java
Kotlin教程笔记(51) - 改良设计模式 - 构建者模式
Kotlin教程笔记(51) - 改良设计模式 - 构建者模式
|
1月前
|
设计模式 开发者 Python
Python编程中的设计模式:工厂方法模式###
本文深入浅出地探讨了Python编程中的一种重要设计模式——工厂方法模式。通过具体案例和代码示例,我们将了解工厂方法模式的定义、应用场景、实现步骤以及其优势与潜在缺点。无论你是Python新手还是有经验的开发者,都能从本文中获得关于如何在实际项目中有效应用工厂方法模式的启发。 ###
|
2天前
Next.js 实战 (三):优雅的实现暗黑主题模式
这篇文章介绍了在Next.js中实现暗黑模式的具体步骤。首先,需要安装next-themes库。然后,在/components/ThemeProvider/index.tsx文件中新增ThemeProvider组件,并在/app/layout.tsx文件中注入该组件。如果想要加入过渡动画,可以修改代码实现主题切换时的动画效果。最后,需要在需要的位置引入ThemeModeButton组件,实现暗黑模式的切换。
|
17天前
|
设计模式 前端开发 JavaScript
JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式
本文深入探讨了JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式,结合电商网站案例,展示了设计模式如何提升代码的可维护性、扩展性和可读性,强调了其在前端开发中的重要性。
22 2
|
23天前
|
前端开发 JavaScript UED
探索JavaScript的异步编程模式
【10月更文挑战第40天】在JavaScript的世界里,异步编程是一道不可或缺的风景线。它允许我们在等待慢速操作(如网络请求)完成时继续执行其他任务,极大地提高了程序的性能和用户体验。本文将深入浅出地探讨Promise、async/await等异步编程技术,通过生动的比喻和实际代码示例,带你领略JavaScript异步编程的魅力所在。
21 1
|
1月前
|
设计模式 安全 Java
Kotlin教程笔记(51) - 改良设计模式 - 构建者模式
Kotlin教程笔记(51) - 改良设计模式 - 构建者模式
39 1
|
2月前
|
前端开发 JavaScript UED
探索JavaScript中的异步编程模式
【10月更文挑战第21天】在数字时代的浪潮中,JavaScript作为一门动态的、解释型的编程语言,以其卓越的灵活性和强大的功能在Web开发领域扮演着举足轻重的角色。本篇文章旨在深入探讨JavaScript中的异步编程模式,揭示其背后的原理和实践方法。通过分析回调函数、Promise对象以及async/await语法糖等关键技术点,我们将一同揭开JavaScript异步编程的神秘面纱,领略其带来的非阻塞I/O操作的魅力。让我们跟随代码的步伐,开启一场关于时间、性能与用户体验的奇妙之旅。
|
2月前
|
设计模式 Java Kotlin
Kotlin教程笔记(51) - 改良设计模式 - 构建者模式
本教程详细讲解Kotlin语法,适合希望深入了解Kotlin的开发者。对于快速学习Kotlin语法,推荐查看“简洁”系列教程。本文重点介绍了构建者模式在Kotlin中的应用与改良,包括如何使用具名可选参数简化复杂对象的创建过程,以及如何在初始化代码块中对参数进行约束和校验。
28 3
|
1月前
|
前端开发 JavaScript UED
探索JavaScript的异步编程模式
【10月更文挑战第33天】在JavaScript的世界里,异步编程是提升应用性能和用户体验的关键。本文将带你深入理解异步编程的核心概念,并展示如何在实际开发中运用这些知识来构建更流畅、响应更快的Web应用程序。从回调函数到Promises,再到async/await,我们将一步步解锁JavaScript异步编程的秘密,让你轻松应对各种复杂的异步场景。
|
2月前
|
JavaScript 前端开发 API
探索Node.js中的异步编程模式
【10月更文挑战第4天】在JavaScript的世界中,异步编程是提升应用性能和用户体验的关键。本文将深入探讨Node.js中异步编程的几种模式,包括回调函数、Promises、async/await,并分享如何有效利用这些模式来构建高性能的后端服务。