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

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

前言

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


正文

发布-订阅模式的定义

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


发布-订阅模式的实现

售楼处的例子

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

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

实现售楼处的例子

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

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

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


640.png


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



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


取消订阅的事件

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



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

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

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


小结

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

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


目录
相关文章
|
2月前
|
设计模式 前端开发 搜索推荐
前端必须掌握的设计模式——模板模式
模板模式(Template Pattern)是一种行为型设计模式,父类定义固定流程和步骤顺序,子类通过继承并重写特定方法实现具体步骤。适用于具有固定结构或流程的场景,如组装汽车、包装礼物等。举例来说,公司年会节目征集时,蜘蛛侠定义了歌曲的四个步骤:前奏、主歌、副歌、结尾。金刚狼和绿巨人根据此模板设计各自的表演内容。通过抽象类定义通用逻辑,子类实现个性化行为,从而减少重复代码。模板模式还支持钩子方法,允许跳过某些步骤,增加灵活性。
137 11
|
11天前
|
JavaScript 前端开发 Docker
如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
通过这些步骤,可以确保您的Next.js应用在多核服务器上高效运行,并且在Docker环境中实现高效的容器化管理。
71 44
|
3月前
|
设计模式 安全 Java
Kotlin教程笔记(51) - 改良设计模式 - 构建者模式
Kotlin教程笔记(51) - 改良设计模式 - 构建者模式
|
24天前
|
设计模式
「全网最细 + 实战源码案例」设计模式——模式扩展(配置工厂)
该设计通过配置文件和反射机制动态选择具体工厂,减少硬编码依赖,提升系统灵活性和扩展性。配置文件解耦、反射创建对象,新增产品族无需修改客户端代码。示例中,`CoffeeFactory`类加载配置文件并使用反射生成咖啡对象,客户端调用时只需指定名称即可获取对应产品实例。
86 40
|
25天前
|
设计模式 关系型数据库
「全网最细 + 实战源码案例」设计模式——简单工厂模式
简单工厂模式是一种创建型设计模式,通过工厂类根据传入参数创建不同类型的对象,也称“静态工厂方法”模式。其结构包括工厂类、产品接口和具体产品类。优点是封装性强、代码复用性好;缺点是扩展性差,增加新产品时需修改工厂类代码,违反开闭原则。适用于对象种类较少且调用者无需关心创建细节的场景。
53 19
|
1月前
|
设计模式 数据安全/隐私保护
Next.js 实战 (七):浅谈 Layout 布局的嵌套设计模式
这篇文章介绍了在Next.js框架下,如何处理中后台管理系统中特殊页面(如登录页)不包裹根布局(RootLayout)的问题。作者指出Next.js的设计理念是通过布局的嵌套来创建复杂的页面结构,这虽然保持了代码的整洁和可维护性,但对于特殊页面来说,却造成了不必要的布局包裹。文章提出了一个解决方案,即通过判断页面的skipGlobalLayout属性来决定是否包含RootLayout,从而实现特殊页面不包裹根布局的目标。
90 33
|
23天前
|
设计模式 Java
「全网最细 + 实战源码案例」设计模式——生成器模式
生成器模式(Builder Pattern)是一种创建型设计模式,用于分步骤构建复杂对象。它允许用户通过控制对象构造的过程,定制对象的组成部分,而无需直接实例化细节。该模式特别适合构建具有多种配置的复杂对象。其结构包括抽象建造者、具体建造者、指挥者和产品角色。适用于需要创建复杂对象且对象由多个部分组成、构造过程需对外隐藏或分离表示与构造的场景。优点在于更好的控制、代码复用和解耦性;缺点是增加复杂性和不适合简单对象。实现时需定义建造者接口、具体建造者类、指挥者类及产品类。链式调用是常见应用方式之一。
50 12
|
25天前
|
设计模式 关系型数据库
「全网最细 + 实战源码案例」设计模式——工厂方法模式
简单工厂模式是一种创建型设计模式,通过一个工厂类根据传入参数创建不同类型的产品对象,也称“静态工厂方法”模式。其结构包括工厂类、产品接口和具体产品类。适用于创建对象种类较少且调用者无需关心创建细节的场景。优点是封装性强、代码复用性好;缺点是扩展性差,增加新产品时需修改工厂类代码,违反开闭原则。
44 15
|
3月前
|
设计模式 开发者 Python
Python编程中的设计模式:工厂方法模式###
本文深入浅出地探讨了Python编程中的一种重要设计模式——工厂方法模式。通过具体案例和代码示例,我们将了解工厂方法模式的定义、应用场景、实现步骤以及其优势与潜在缺点。无论你是Python新手还是有经验的开发者,都能从本文中获得关于如何在实际项目中有效应用工厂方法模式的启发。 ###
|
2月前
Next.js 实战 (三):优雅的实现暗黑主题模式
这篇文章介绍了在Next.js中实现暗黑模式的具体步骤。首先,需要安装next-themes库。然后,在/components/ThemeProvider/index.tsx文件中新增ThemeProvider组件,并在/app/layout.tsx文件中注入该组件。如果想要加入过渡动画,可以修改代码实现主题切换时的动画效果。最后,需要在需要的位置引入ThemeModeButton组件,实现暗黑模式的切换。

热门文章

最新文章

  • 1
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    23
  • 2
    Node.js 中实现多任务下载的并发控制策略
    32
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    25
  • 4
    【JavaScript】深入理解 let、var 和 const
    48
  • 5
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    44
  • 6
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    53
  • 7
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    55
  • 8
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    71
  • 9
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55
  • 10
    JavaWeb JavaScript ③ JS的流程控制和函数
    62