当前位置: 首页 > news >正文

前端开发设计模式——责任链模式

目录

一、定义和特点

1. 定义

2. 特点

二、实现方式

定义抽象处理者(Handler)类

创建具体处理者(ConcreteHandler)类

构建责任链

以下是一个用 JavaScript 实现的示例:

三、应用场景

1. 表单验证

2. 请求处理管道

3. 事件处理

四、优点

解耦请求发送者和接收者

增强系统的灵活性和可扩展性

提高代码的可维护性

五、缺点

可能会导致请求处理的延迟

调试和错误处理可能会比较复杂

六、注意事项

确保责任链的合理性

处理请求的终止条件

错误处理和日志记录


一、定义和特点

1. 定义

        责任链模式是一种行为设计模式,它允许多个对象依次处理同一个请求。每个对象都有机会处理请求,如果一个对象不能处理请求,它会将请求传递给下一个对象,直到有一个对象能够处理请求或者请求到达链的末尾

2. 特点

  • 请求的发送者和接收者之间解耦,发送者不需要知道请求最终由哪个对象处理。
  • 可以动态地组合和调整处理对象的顺序,增加了系统的灵活性。
  • 处理请求的过程可以根据需要进行扩展和修改,而不影响其他部分的代码。

二、实现方式

1. 定义抽象处理者(Handler)类

        包含一个指向下一个处理者的引用和一个处理请求的抽象方法。

        抽象方法通常接受一个请求参数,并返回一个处理结果或者将请求传递给下一个处理者。

2. 创建具体处理者(ConcreteHandler)类

        继承抽象处理者类,实现处理请求的具体逻辑。

        在具体处理者类中,如果能够处理请求,则返回处理结果;如果不能处理请求,则调用下一个处理者的处理方法。

3. 构建责任链

        创建具体处理者对象,并将它们按照一定的顺序连接起来,形成一个责任链。

        可以通过在每个具体处理者的构造函数中传入下一个处理者的引用来构建责任链。

4. 以下是一个用 JavaScript 实现的示例:

class Handler {constructor() {this.nextHandler = null;}setNextHandler(handler) {this.nextHandler = handler;return handler;}handle(request) {if (this.nextHandler) {return this.nextHandler.handle(request);}return null;}
}class ConcreteHandler1 extends Handler {handle(request) {if (request === 'request1') {return `ConcreteHandler1 handled ${request}`;} else {return super.handle(request);}}
}class ConcreteHandler2 extends Handler {handle(request) {if (request === 'request2') {return `ConcreteHandler2 handled ${request}`;} else {return super.handle(request);}}
}// 使用责任链
const handler1 = new ConcreteHandler1();
const handler2 = new ConcreteHandler2();handler1.setNextHandler(handler2);console.log(handler1.handle('request1'));
console.log(handler1.handle('request2'));
console.log(handler1.handle('request3'));

三、应用场景

1. 表单验证

        可以将不同的验证规则封装成一个个具体处理者,按照一定的顺序组成责任链。当用户提交表单时,请求依次经过各个验证处理者,如果有一个验证不通过,则停止验证并返回错误信息。

2. 请求处理管道

        在前端框架中,可以使用责任链模式来构建请求处理管道。例如,一个 HTTP 请求可能需要经过身份验证、权限检查、数据处理等多个步骤,可以将这些步骤封装成不同的处理者,组成责任链进行处理。

3. 事件处理

        当一个事件发生时,可以将不同的事件处理逻辑封装成具体处理者,组成责任链进行处理。例如,在一个网页中,当用户点击按钮时,可以依次经过多个事件处理者,执行不同的操作。

四、优点

1. 解耦请求发送者和接收者

  • 发送者不需要知道请求最终由哪个对象处理,只需要将请求发送到责任链的第一个处理者即可。
  • 接收者之间也相互独立,只需要关注自己能否处理请求,不需要关心其他处理者的存在。

2. 增强系统的灵活性和可扩展性

  • 可以动态地添加、删除或调整处理者的顺序,而不影响其他部分的代码。
  • 新的处理者可以很容易地加入到责任链中,实现对请求处理的扩展。

3. 提高代码的可维护性

  • 每个处理者只负责自己的处理逻辑,代码结构清晰,易于维护和修改。
  • 当需要修改请求处理逻辑时,只需要修改相应的处理者即可,不会影响其他处理者。

五、缺点

1. 可能会导致请求处理的延迟

  • 由于请求需要依次经过多个处理者,可能会导致处理时间较长,特别是当责任链较长时。
  • 在一些对性能要求较高的场景下,可能需要考虑优化责任链的长度或者采用其他设计模式。

2. 调试和错误处理可能会比较复杂

  • 当请求在责任链中传递时,如果出现错误,可能需要跟踪整个责任链才能找到问题所在。
  • 调试责任链模式的代码可能会比较困难,因为需要了解每个处理者的具体逻辑和责任链的结构。

六、注意事项

1. 确保责任链的合理性

  • 责任链的长度应该适中,避免过长导致性能问题。
  • 处理者的顺序应该合理安排,确保请求能够按照正确的顺序被处理。

2. 处理请求的终止条件

  • 在责任链中,应该有一个明确的终止条件,当请求无法被处理时,应该返回一个适当的结果或者错误信息。
  • 避免请求在责任链中无限传递,导致系统出现死循环或性能问题。

3. 错误处理和日志记录

  • 应该对责任链中的错误进行适当的处理和记录,以便于调试和维护。
  • 可以在每个处理者中添加错误处理逻辑,或者在责任链的末尾添加一个专门的错误处理处理者。

相关文章:

前端开发设计模式——责任链模式

目录 一、定义和特点 1. 定义 2. 特点 二、实现方式 定义抽象处理者(Handler)类 创建具体处理者(ConcreteHandler)类 构建责任链 以下是一个用 JavaScript 实现的示例: 三、应用场景 1. 表单验证 2. 请求处…...

JavaWeb--MySQL

1. MySQL概述 首先来了解一下什么是数据库。 数据库:英文为 DataBase,简称DB,它是存储和管理数据的仓库。 像我们日常访问的电商网站京东,企业内部的管理系统OA、ERP、CRM这类的系统,以及大家每天都会刷的头条、抖音…...

Python | Leetcode Python题解之第564题数组嵌套

题目&#xff1a; 题解&#xff1a; class Solution:def arrayNesting(self, nums: List[int]) -> int:ans, n 0, len(nums)for i in range(n):cnt 0while nums[i] < n:num nums[i]nums[i] ni numcnt 1ans max(ans, cnt)return ans...

Spring Boot教程之Spring Boot简介

Spring Boot 简介 接下来一段时间&#xff0c;我会持续发布并完成Spring Boot教程 Spring 被广泛用于创建可扩展的应用程序。对于 Web 应用程序&#xff0c;Spring 提供了 Spring MVC&#xff0c;它是 Spring 的一个广泛使用的模块&#xff0c;用于创建可扩展的 Web 应用程序。…...

Qwen2-VL:发票数据提取、视频聊天和使用 PDF 的多模态 RAG 的实践指南

概述 随着人工智能技术的迅猛发展&#xff0c;多模态模型在各类应用场景中展现出强大的潜力和广泛的适用性。Qwen2-VL 作为最新一代的多模态大模型&#xff0c;融合了视觉与语言处理能力&#xff0c;旨在提升复杂任务的执行效率和准确性。本指南聚焦于 Qwen2-VL 在三个关键领域…...

【安全科普】NUMA防火墙诞生记

一、我为啥姓“NUMA” 随着网络流量和数据包处理需求的指数增长&#xff0c;曾经的我面对“高性能、高吞吐、低延迟”的要求&#xff0c;逐渐变得心有余而力不足。 多CPU技术应运而生&#xff0c;SMP&#xff08;对称多处理&#xff09;和NUMA&#xff08;非一致性内存访问&a…...

机器学习day2-特征工程

四.特征工程 1.概念 一般使用pandas来进行数据清洗和数据处理、使用sklearn来进行特征工程 将任意数据&#xff08;文本或图像等&#xff09;转换为数字特征&#xff0c;对特征进行相关的处理 步骤&#xff1a;1.特征提取&#xff1b;2.无量纲化&#xff08;预处理&#xf…...

Python数据分析NumPy和pandas(三十五、时间序列数据基础)

时间序列数据是许多不同领域的结构化数据的重要形式&#xff0c;例如金融、经济、生态学、神经科学和物理学。在许多时间点重复记录的任何内容都会形成一个时间序列。许多时间序列是固定频率的&#xff0c;也就是说&#xff0c;数据点根据某些规则定期出现&#xff0c;例如每 1…...

Python 小高考篇(6)常见错误及排查

目录 TypeError拼接字符串和数字错误示范正确示范 数字、字符串当成函数错误示范 给函数传入未被定义过的参数错误示范 传入的参数个数不正确错误示范 字符串相乘错误示范正确示范 量取整数的长度错误示范正确示范 格式化字符串时占位符个数不正确错误示范 给复数比较大小错误示…...

k8s上部署redis高可用集群

介绍&#xff1a; Redis Cluster通过分片&#xff08;sharding&#xff09;来实现数据的分布式存储&#xff0c;每个master节点都负责一部分数据槽&#xff08;slot&#xff09;。 当一个master节点出现故障时&#xff0c;Redis Cluster能够自动将故障节点的数据槽转移到其他健…...

C++的类和对象

在C中&#xff0c;类&#xff08;class&#xff09;和对象&#xff08;object&#xff09;是面向对象编程&#xff08;OOP&#xff09;的核心概念。以下是它们的详细介绍&#xff1a; 1. 类&#xff08;Class&#xff09; 定义&#xff1a; 类是用来定义一个新的数据类型&…...

自动驾驶系列—深入解析自动驾驶车联网技术及其应用场景

&#x1f31f;&#x1f31f; 欢迎来到我的技术小筑&#xff0c;一个专为技术探索者打造的交流空间。在这里&#xff0c;我们不仅分享代码的智慧&#xff0c;还探讨技术的深度与广度。无论您是资深开发者还是技术新手&#xff0c;这里都有一片属于您的天空。让我们在知识的海洋中…...

机器学习(1)

一、机器学习 机器学习&#xff08;Machine Learning, ML&#xff09;是人工智能&#xff08;Artificial Intelligence, AI&#xff09;的一个分支&#xff0c;它致力于开发能够从数据中学习并改进性能的算法和模型。机器学习的核心思想是通过数据和经验自动优化算法&#xff…...

深入理解 Redis跳跃表 Skip List 原理|图解查询、插入

1. 简介 跳跃表 ( skip list ) 是一种有序数据结构&#xff0c;通过在每个节点中维持多个指向其他节点的指针&#xff0c;从而达到快速访问节点的目的。 在 Redis 中&#xff0c;跳跃表是有序集合键的底层实现之一&#xff0c;那么这篇文章我们就来讲讲跳跃表的实现原理。 2. …...

Halcon HImage 与 Qt QImage 的相互转换(修订版)

很久以前&#xff0c;我写过一遍文章来介绍 HImage 和 QImage 之间的转换方法。&#xff08;https://blog.csdn.net/liyuanbhu/article/details/91356988&#xff09; 这个代码其实是有些问题的。因为我们知道 QImage 中的图像数据不一定是连续的&#xff0c;尤其是图像的宽度…...

【Golang】——Gin 框架中的模板渲染详解

Gin 框架支持动态网页开发&#xff0c;能够通过模板渲染结合数据生成动态页面。在这篇文章中&#xff0c;我们将一步步学习如何在 Gin 框架中配置模板、渲染动态数据&#xff0c;并结合静态资源文件创建一个功能完整的动态网站。 文章目录 1. 什么是模板渲染&#xff1f;1.1 概…...

CSS:导航栏三角箭头

用CSS实现导航流程图的样式。可根据自己的需求进行修改&#xff0c;代码精略的写了一下。 注&#xff1a;场景一和场景二在分辨率比较低的情况下会有一个1px的缝隙不太优雅&#xff0c;自行处理。有个方法是直接在每个外面包一个DIV&#xff0c;用动态样式设置底色。 场景一、…...

onlyoffice Command service(命令服务)使用示例

一、说明 文档在这里&#xff1a;https://api.onlyoffice.com/docs/docs-api/additional-api/command-service/ 命令服务提供有几个简单的接口封装。也提供了前端和后端同时操作文档的可能。 二、正文 命令服务地址&#xff1a;https://documentserver/coauthoring/Com…...

QSS 设置bug

问题描述&#xff1a; 在QWidget上add 一个QLabel&#xff0c;但是死活不生效 原因&#xff1a; c 主程序如下&#xff1a; QWidget* LOGO new QWidget(logo_wnd);LOGO->setFixedSize(logo_width, 41);LOGO->setObjectName("TittltLogo");QVBoxLayout* tit…...

交换排序——快速排序

交换排序——快速排序 7.7 交换排序——快速排序快速排序概念c语言的库函数qsort快速排序框架quickSort 7.7 交换排序——快速排序 快速排序概念 快速排序是Hoare于1962年提出的一种二叉树结构的交换排序方法&#xff08;下文简称快排&#xff09;&#xff0c;其基本思想为&a…...

网络编程(Modbus进阶)

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

后进先出(LIFO)详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

C++.OpenGL (10/64)基础光照(Basic Lighting)

基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...