当前位置: 首页 > 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…...

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

【杂谈】-递归进化:人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

Frozen-Flask :将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

听写流程自动化实践,轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

JAVA后端开发——多租户

数据隔离是多租户系统中的核心概念&#xff0c;确保一个租户&#xff08;在这个系统中可能是一个公司或一个独立的客户&#xff09;的数据对其他租户是不可见的。在 RuoYi 框架&#xff08;您当前项目所使用的基础框架&#xff09;中&#xff0c;这通常是通过在数据表中增加一个…...

在 Spring Boot 中使用 JSP

jsp&#xff1f; 好多年没用了。重新整一下 还费了点时间&#xff0c;记录一下。 项目结构&#xff1a; pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://ww…...

通过MicroSip配置自己的freeswitch服务器进行调试记录

之前用docker安装的freeswitch的&#xff0c;启动是正常的&#xff0c; 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...