【前端设计模式】之调停者模式(中介者模式)
调停者模式是一种行为设计模式,它通过引入一个调停者对象来集中处理一组对象之间的交互。调停者模式的目标是减少对象之间的直接通信,从而降低耦合度,并且使代码更易于维护和扩展。
调停者模式特性
- 将对象之间的通信集中在一个调停者对象中,避免了对象之间的直接耦合。
- 调停者对象可以控制和协调一组相关对象之间的交互。
- 调停者模式可以简化复杂系统中的交互逻辑,使代码更易于理解和维护。
应用示例
1. 表单验证
在一个表单中,各个输入字段之间可能存在依赖关系。使用调停者模式可以将表单验证逻辑集中在一个验证器对象中,各个输入字段只需要将自己的值传递给验证器进行验证即可。这样可以避免输入字段之间直接进行通信,并且使得验证逻辑更加清晰。
class Mediator {constructor() {this.fields = [];}addField(field) {this.fields.push(field);}validate() {let isValid = true;this.fields.forEach(field => {if (!field.validate()) {isValid = false;}});return isValid;}
}class Field {constructor(mediator) {this.mediator = mediator;this.value = '';}setValue(value) {this.value = value;this.mediator.validate();}validate() {// 验证逻辑return true;}
}const mediator = new Mediator();
const field1 = new Field(mediator);
const field2 = new Field(mediator);mediator.addField(field1);
mediator.addField(field2);field1.setValue('value1');
field2.setValue('value2');
在上述代码中,Mediator 是调停者对象,Field 是需要进行验证的输入字段。通过将输入字段注册到调停者对象中,并在字段值发生变化时通知调停者进行验证,可以实现表单验证的功能。
Mediator 类是一个中介者,它维护一个字段数组 fields,可以通过 addField 方法向数组中添加字段对象。它还提供了一个 validate 方法,用于验证所有字段是否有效。
Field 类表示一个字段,每个字段对象都有一个中介者引用 mediator,以及一个值属性 value。setValue 方法用于设置字段的值,并在设置值后调用中介者的 validate 方法进行验证。
最后部分,创建了一个中介者对象 mediator 和两个字段对象 field1 和 field2,并将它们关联在一起。然后通过调用 addField 方法将这两个字段添加到中介者的字段数组中。最后,分别设置 field1 和 field2 的值为 'value1' 和 'value2'。
2. 组件间通信
在一个复杂的前端应用中,各个组件之间可能需要进行通信和协调。使用调停者模式可以将组件之间的通信逻辑集中在一个调停者对象中,各个组件只需要将自己的状态或事件传递给调停者进行处理即可。这样可以避免组件之间直接进行通信,并且使得组件之间的关系更加清晰。
class Mediator {constructor() {this.components = [];}addComponent(component) {this.components.push(component);}notify(sender, event, data) {this.components.forEach(component => {if (component !== sender) {component.receive(event, data);}});}
}class Component {constructor(mediator) {this.mediator = mediator;this.mediator.addComponent(this);}send(event, data) {this.mediator.notify(this, event, data);}receive(event, data) {// 处理事件和数据}
}const mediator = new Mediator();
const component1 = new Component(mediator);
const component2 = new Component(mediator);component1.send('event', 'data');
Mediator 类有一个构造函数,它初始化了一个空的数组 components,用于存储组件对象。它提供了两个方法:
addComponent:将传入的组件对象添加到components数组中。notify:遍历components数组中的所有组件,除了发送方(sender)之外,调用每个组件的receive方法,并传递事件和数据作为参数。
Component 类有一个构造函数,它接收一个中介者对象作为参数,并将其存储在 mediator 属性中,同时调用中介者的 addComponent 方法将自己添加到中介者的组件数组中。它提供了三个方法:
send:调用中介者的notify方法,将当前组件作为发送方,同时传递事件和数据作为参数。receive:这是一个抽象方法,用于处理接收到的事件和数据。具体的处理逻辑需要根据实际需求实现。
在代码的最后部分,创建了一个中介者对象 mediator 和两个组件对象 component1 和 component2,并将它们关联在一起。然后调用 component1 的 send 方法发送一个事件和数据,这样就会触发中介者的 notify 方法,使得 component2 的 receive 方法被调用。
优缺点
优点
- 降低了对象之间的耦合度,使得代码更易于维护和扩展。
- 集中处理了对象之间的交互逻辑,使得代码更易于理解。
- 可以简化复杂系统中的交互逻辑,提高代码的可读性和可维护性。
缺点
- 引入了一个额外的调停者对象,增加了系统的复杂性。
- 调停者对象可能会变得庞大和复杂,难以维护。
总结
调停者模式是一种有助于降低对象之间耦合度的设计模式。它通过引入一个调停者对象来集中处理一组对象之间的交互,使得代码更易于维护和扩展。在前端开发中,调停者模式可以应用于表单验证、消息订阅与发布、组件间通信等场景。尽管调停者模式可能会增加系统的复杂性,并且调停者对象可能变得庞大和复杂,但它仍然是一种有价值的设计模式,可以提高代码的可读性和可维护性。
相关文章:
【前端设计模式】之调停者模式(中介者模式)
调停者模式是一种行为设计模式,它通过引入一个调停者对象来集中处理一组对象之间的交互。调停者模式的目标是减少对象之间的直接通信,从而降低耦合度,并且使代码更易于维护和扩展。 调停者模式特性 将对象之间的通信集中在一个调停者对象中…...
【MySQL架构篇】SQL执行流程与缓冲池
文章目录 1. SQL执行流程2. 数据库缓冲池(Buffer Pool)2.1 缓冲池概述2.2 缓冲池如何读取数据2.3 查看和设置缓冲池的大小2.4 多个Buffer Pool实例2.5 引申问题 1. SQL执行流程 查询缓存:因为查询效率往往不高,所以在MySQL8.0之后就抛弃了这个功能解析器…...
[support2022@cock.li].faust、[tsai.shen@mailfence.com].faust勒索病毒数据怎么处理|数据解密恢复
引言: 威胁网络安全的恶意软件不断涌现,而[support2022cock.li].faust勒索病毒则是其中的一员。这个网络黑暗角落的新星,以其数据绑架的方式,一度成为数据安全的威胁焦点。本文将探究[support2022cock.li].faust勒索病毒的运作方…...
力扣学习笔记——49. 字母异位词分组
49. 字母异位词分组 https://leetcode.cn/problems/group-anagrams/?envTypestudy-plan-v2&envIdtop-100-liked 给你一个字符串数组,请你将 字母异位词 组合在一起。可以按任意顺序返回结果列表。 字母异位词 是由重新排列源单词的所有字母得到的一个新单词。…...
五、Qt中的常用类
1. QString 字符串类 QString是Qt中的字符串类,与C/C不同的是,不再使用ASCII编码,而使用Unicode编码。因此一个字符不是8位的char,而是16位的QChar,这就是为什么之前一个汉字占用一个字符的原因。、 QString几乎向前兼…...
CentOS 7.9.2009 数据盘挂载
一、linux版本: lsb_release -a 二、操作步骤 2.1,查看磁盘挂载情况,确认sdb是需挂载的硬盘 ## 查看磁盘挂载情况,确认sdb是需挂载的硬盘 lsblk 2.2,对硬盘sdb进行分区 ## 对硬盘sdb进行分区 fdisk /dev/sdb# 命令…...
cv::solvePnP使用方法及注意点详解(OpenCV/C++)
cv::solvePnP(objectPoints, imagePoints, cameraMatrix, distCoeffs, rvec, tvec, useExtrinsicGuess, flags); 1、参数说明: objectPoints:一个 vector<cv::Point3f>,包含了在世界坐标系中的三维点的坐标,至少需要4个点…...
DevOps持续集成-Jenkins(4)
❤️作者简介:2022新星计划第三季云原生与云计算赛道Top5🏅、华为云享专家🏅、云原生领域潜力新星🏅 💛博客首页:C站个人主页🌞 💗作者目的:如有错误请指正,将…...
【数据仓库-零】数据仓库知识体系 ing
文章目录 一. 数仓基本概念二. 离线数仓建设方法论三. etl流程四. 数仓规范建设指南四. 数据仓库架构五. 数据可视化 通过熟悉构建数仓整体的过程,可以系统的了解 数仓构建理论:能够站在全局角度看数仓的运行架构,数仓执行流程。了解到构建数…...
css3 3D 转换 技巧详细解析与代码实例
CSS3 3D转换是CSS3中的一项新特性,通过它我们可以比较容易地实现3D效果。在这里,我将向大家介绍CSS3 3D转换的一些基本概念、使用方法和常见技巧。 1. 基本概念 在使用CSS3 3D转换时,需要了解一些基础概念: 三维坐标系…...
[Unity]给场景中的3D字体TextMesh增加描边方案一
取你的文本对象,简单地添加以下脚本: using UnityEngine; using System.Collections; using UnityEngine.UI;public class TextOutline : MonoBehaviour {public float pixelSize 1;public Color outlineColor Color.black;public bool resolutionDependant fal…...
TDengine(taos)数据库导出历史数据
业务需求:导出某个站点的累计充电量,累计放电量,光伏总放电量,进线总功率的所有数据‘ 1、登录taos,使用存数据的库; 提示Database changed;即为使用成功; 2、找到你想要导出的字段…...
算法进修Day-37
算法进修Day-37 73. 矩阵置零 难度:中等 题目要求 给定一个 _m_ x _n_ 的矩阵,如果一个元素为 0 ,则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 示例1 输入:matrix [[1,1,1],[1,0,1],[1,1,1]] 输出:[…...
服务器之日常整活
文章目录 一,序二、服务器相关流水帐未完,待补充 一,序 假如你有一台服务器,你最想做哪些事? 等等,什么叫假如你有一台服务器,假如只有一台,肯定我想搞第二台,顺便第三台…...
交互式 Web 应用 0 基础入门
初探 Gradio:轻松构建交互式 Web 应用 文章目录 初探 Gradio:轻松构建交互式 Web 应用Why Gradio?安装 Gradio创建交互式界面1. gr.Interface2. gr.Blocks 强大的组件库输入输出组件控制组件布局组件 示例交互式数据可视化多组件同时(嵌套&a…...
JSONP的安全性较差,那么在跨域情况下,有没有其他更安全的替代方案呢?
在跨域情况下,为了保证安全性,有几种更安全的替代方案可以考虑使用: 1:CORS(Cross-Origin Resource Sharing): CORS 是一种现代化的跨域解决方案,通过在服务器端设置响应头来控制跨…...
Slax Linux 获得增强的会话管理和启动参数选项
Slax Linux 的创建者和维护者托马斯-马特吉切克(Tomas Matejicek)在自己生日这天(生日快乐!)发布了其小巧便携的 GNU/Linux 发行版的新版本,带来了各种增强功能和错误修复。 新发布的 Slax Linux 版本&…...
C/C++新冠疫情死亡率 2020年9月电子学会青少年软件编程(C/C++)等级考试一级真题答案解析
目录 C/C新冠疫情死亡率 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序编写 四、程序说明 五、运行结果 六、考点分析 C/C新冠疫情死亡率 2020年9月 C/C编程等级考试一级编程题 一、题目要求 1、编程实现 2020年全世界爆发了新冠疫情,请…...
Adobe Photoshop 基本操作
PS快捷键 图层 选择图层 Ctrl T:可以对图层的大小和位置进行调整 填充图层 MAC: AltBackspace (前景) or CtrlBackspace (背景) WINDOWS: AltDelete (前景) or CtrlDelete (背景) 快速将图层填充为前景色或背景色 平面化图层(盖印图层)…...
SpringMVC原理及核心组件
一、SpringMVC原理及核心组件 1、 Spring MVC的工作原理 Spring MVC 是一个对javaWeb中Servlet 简化和封装, 1.首先SpringMVC 配置DispatcherServlet 来接受所有的请求,我们通过DispatcherServlet 响应的所有数据,DispatcherServlet 是Htt…...
后进先出(LIFO)详解
LIFO 是 Last In, First Out 的缩写,中文译为后进先出。这是一种数据结构的工作原则,类似于一摞盘子或一叠书本: 最后放进去的元素最先出来 -想象往筒状容器里放盘子: (1)你放进的最后一个盘子(…...
浅谈 React Hooks
React Hooks 是 React 16.8 引入的一组 API,用于在函数组件中使用 state 和其他 React 特性(例如生命周期方法、context 等)。Hooks 通过简洁的函数接口,解决了状态与 UI 的高度解耦,通过函数式编程范式实现更灵活 Rea…...
网络六边形受到攻击
大家读完觉得有帮助记得关注和点赞!!! 抽象 现代智能交通系统 (ITS) 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 (…...
<6>-MySQL表的增删查改
目录 一,create(创建表) 二,retrieve(查询表) 1,select列 2,where条件 三,update(更新表) 四,delete(删除表…...
FFmpeg 低延迟同屏方案
引言 在实时互动需求激增的当下,无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作,还是游戏直播的画面实时传输,低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架,凭借其灵活的编解码、数据…...
JVM垃圾回收机制全解析
Java虚拟机(JVM)中的垃圾收集器(Garbage Collector,简称GC)是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象,从而释放内存空间,避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...
linux 错误码总结
1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...
【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】
1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件(System Property Definition File),用于声明和管理 Bluetooth 模块相…...
【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习
禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...
push [特殊字符] present
push 🆚 present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中,push 和 present 是两种不同的视图控制器切换方式,它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...
