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

前端代理模式之【策略模式】

news 2026/5/28 8:43:13

文章目录

  • 前言
  • 介绍
  • 代码
  • 场景例子
  • 优缺点
  • 后言

前言

hello world欢迎来到前端的新世界

😜当前文章系列专栏：前端设计模式
🐱‍👓博主在前端领域还有很多知识和技术需要掌握，正在不断努力填补技术短板。(如果出现错误，感谢大家指出)🌹
💖感谢大家支持！您的观看就是作者创作的动力

介绍

  • 策略模式简单描述就是：对象有某个行为，但是在不同的场景中，该行为有不同的实现算法。把它们一个个封装起来，并且使它们可以互相替换

代码

<html>
<head><title>策略模式-校验表单</title><meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<body><form id = "registerForm" method="post" action="http://xxxx.com/api/register">用户名：<input type="text" name="userName">密码：<input type="text" name="password">手机号码：<input type="text" name="phoneNumber"><button type="submit">提交</button></form><script type="text/javascript">// 策略对象const strategies = {isNoEmpty: function (value, errorMsg) {if (value === '') {return errorMsg;}},isNoSpace: function (value, errorMsg) {if (value.trim() === '') {return errorMsg;}},minLength: function (value, length, errorMsg) {if (value.trim().length < length) {return errorMsg;}},maxLength: function (value, length, errorMsg) {if (value.length > length) {return errorMsg;}},isMobile: function (value, errorMsg) {if (!/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|17[7]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(value)) {return errorMsg;}                }}// 验证类class Validator {constructor() {this.cache = []}add(dom, rules) {for(let i = 0, rule; rule = rules[i++];) {let strategyAry = rule.strategy.split(':')let errorMsg = rule.errorMsgthis.cache.push(() => {let strategy = strategyAry.shift()strategyAry.unshift(dom.value)strategyAry.push(errorMsg)return strategies[strategy].apply(dom, strategyAry)})}}start() {for(let i = 0, validatorFunc; validatorFunc = this.cache[i++];) {let errorMsg = validatorFunc()if (errorMsg) {return errorMsg}}}}// 调用代码let registerForm = document.getElementById('registerForm')let validataFunc = function() {let validator = new Validator()validator.add(registerForm.userName, [{strategy: 'isNoEmpty',errorMsg: '用户名不可为空'}, {strategy: 'isNoSpace',errorMsg: '不允许以空白字符命名'}, {strategy: 'minLength:2',errorMsg: '用户名长度不能小于2位'}])validator.add(registerForm.password, [ {strategy: 'minLength:6',errorMsg: '密码长度不能小于6位'}])validator.add(registerForm.phoneNumber, [{strategy: 'isMobile',errorMsg: '请输入正确的手机号码格式'}])return validator.start()}registerForm.onsubmit = function() {let errorMsg = validataFunc()if (errorMsg) {alert(errorMsg)return false}}</script>
</body>
</html>

场景例子

  • 如果在一个系统里面有许多类，它们之间的区别仅在于它们的’行为’，那么使用策略模式可以动态地让一个对象在许多行为中选择一种行为。
  • 一个系统需要动态地在几种算法中选择一种。
  • 表单验证

优缺点

优点

  • 利用组合、委托、多态等技术和思想，可以有效的避免多重条件选择语句
  • 提供了对开放-封闭原则的完美支持，将算法封装在独立的strategy中，使得它们易于切换，理解，易于扩展
  • 利用组合和委托来让Context拥有执行算法的能力，这也是继承的一种更轻便的代替方案

缺点

  • 会在程序中增加许多策略类或者策略对象
  • 要使用策略模式，必须了解所有的strategy，必须了解各个strategy之间的不同点，这样才能选择一个合适的strategy

后言

创作不易，要是本文章对广大读者有那么一点点帮助 不妨三连支持一下，您的鼓励就是博主创作的动力

相关文章：

前端代理模式之【策略模式】

文章目录 前言介绍代码场景例子优缺点后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;前端设计模式 &#x1f431;‍&#x1f453;博主在前端领域还有很多知识和技术需要掌握&#xff0c;正在不断努力填补技术短板。(如果出现错误&#…...

编程日记 2023/11/15 19:40:51

人工智能-深度学习之残差网络（ResNet）

随着我们设计越来越深的网络&#xff0c;深刻理解“新添加的层如何提升神经网络的性能”变得至关重要。更重要的是设计网络的能力&#xff0c;在这种网络中&#xff0c;添加层会使网络更具表现力&#xff0c; 为了取得质的突破&#xff0c;我们需要一些数学基础知识。 ResNet沿…...

编程日记 2023/11/15 19:37:46

arm2 day6

串口实现单个字符的收发 main.c uart4.c uart4.h...

编程日记 2023/11/15 19:34:43

RxSwift和Combine的相同点和使用例子

RxSwift 和 Combine 都是响应式编程框架&#xff0c;用于简化异步和基于事件的代码。它们有很多相似之处&#xff0c;主要体现在设计理念和编程模式上。以下是 RxSwift 和 Combine 的主要相同点&#xff0c;以及它们的应用场景&#xff1a; 相同点 1.响应式编程&#xff1a;两…...

编程日记 2023/11/15 19:33:42

[Linux打怪升级之路]-信号的保存和递达

前言 作者&#xff1a;小蜗牛向前冲 名言&#xff1a;我可以接受失败&#xff0c;但我不能接受放弃 如果觉的博主的文章还不错的话&#xff0c;还请点赞&#xff0c;收藏&#xff0c;关注&#x1f440;支持博主。如果发现有问题的地方欢迎❀大家在评论区指正 目录 一、信号的保…...

编程日记 2023/11/15 19:32:40

【科研新手指南3】chatgpt辅助论文优化表达

chatgpt辅助论文优化表达 写在最前面最终版什么是好的论文整体上&#xff1a;逻辑/连贯性细节上一些具体的修改例子 一些建议&#xff0c;包括具体的提问范例1. 明确你的需求2. 提供上下文信息3. 明确问题类型4. 测试不同建议5. 请求详细解释综合提问范例&#xff1a; 常规技巧…...

编程日记 2023/11/15 19:31:39

在应用内维护域名缓存时遇到的问题

近期参与的项目中&#xff0c;依赖DNS服务器来解析外部的业务集群&#xff0c;遇到了一连串的问题。 远端的业务集群基于HTTP/HTTPS协议&#xff0c;提供业务服务&#xff0c;集群中包含了多个业务节点&#xff0c;当前方案中在DNS服务器上配置域名&#xff0c;指向业务集群中的…...

编程日记 2023/11/15 19:29:36

网络支付安全：面临的风险与防范策略

随着电子商务的繁荣和移动支付技术的发展&#xff0c;网络支付已成为全球消费者日常生活中不可或缺的一部分。然而&#xff0c;这种便捷的支付方式也带来了许多安全风险&#xff0c;这些风险可能威胁到用户的财务安全和个人隐私。本文将深入探讨网络支付面临的主要安全风险&…...

编程日记 2023/11/15 19:28:34

『亚马逊云科技产品测评』活动征文｜阿里云服务器亚马逊服务器综合评测

授权声明&#xff1a;本篇文章授权活动官方亚马逊云科技文章转发、改写权&#xff0c;包括不限于在 Developer Centre, 知乎&#xff0c;自媒体平台&#xff0c;第三方开发者媒体等亚马逊云科技官方渠道 文章目录 引言一、亚马逊&阿里云发展历史介绍1.1 亚马逊发展历史1.2…...

编程日记 2023/11/15 19:27:33

javascript原来还可以这样比较两个日期(直接使用new Date)

有个需求是这样的&#xff1a;假设今天是2023/11/15 有一个表格&#xff0c;表格中操作列按钮的展示与隐藏依靠开始结束日期来进行展示&#xff0c;如果当前日期在开始结束日期之间&#xff0c;则进行展示&#xff0c;我一开始做的时候使用new Date转换成时间戳(getTime)进行比…...

编程日记 2023/11/15 19:26:32

[云原生案例2.4 ] Kubernetes的部署安装 【通过Kubeadm部署Kubernetes高可用集群】

文章目录 1. 基本架构及前置准备1.1 基本架构1.2 前置准备 2. 系统初始化操作 ---- 所有节点2.1 关闭防火墙、selinux和swap分区2.1.1 关闭防火墙和selinux2.1.2 关闭交换分区 2.2 修改主机名&#xff0c;添加域名映射2.2.1 修改主机名2.2.2 修改本地hosts文件 2.3 内核升级2.4…...

编程日记 2023/11/15 19:23:27

PP-ChatOCRv2、PP-TSv2、大模型半监督学习工具...PaddleX新特性等你来pick!

小A是一名刚刚毕业的算法工程师&#xff0c;有一天&#xff0c;他被老板安排了一个活&#xff0c;要对一批合同扫描件进行自动化信息抽取&#xff0c;输出结构化的分析报表。OCR问题不大&#xff0c;但是怎么进行批量的结构化信息抽取呢&#xff1f;小A陷入了苦苦思索… 小B是…...

编程日记 2023/11/15 19:22:26

HarmonyOS 学习记录

时光荏苒,岁月如梭,韶华不负,未来可期。转眼间已经30岁了&#xff0c;学习的重要性不言而喻&#xff0c;在接下来的日子里记录下自己学习HarmonyOS的过程。增加一下知识储备&#xff0c;防患于未然嘛 不得不说华为的开发文档写的不错&#xff0c;开发工具直接安装后自动配置环境…...

编程日记 2023/11/15 19:21:26

阿里云 业务集群的冗余、备份、监控方案

1. 请解释什么是业务集群的冗余、备份和监控&#xff1f; 一、冗余方案 硬件冗余&#xff1a;在业务集群中&#xff0c;关键设备如服务器、存储设备等应采用双机热备或集群技术&#xff0c;确保在某台设备出现故障时&#xff0c;其他设备能够自动接管工作&#xff0c;保证业务…...

编程日记 2023/11/15 19:19:24

无人驾驶的未来 后疫情时代如何抵达

作者 | 马冀&#xff0c;澳鹏&#xff08;Appen&#xff09;中国区副总裁 自动驾驶—疫情危难中显身手 2020年&#xff0c;一场突如其来的新冠肺炎肆虐全球, 导致不同国家的人们被迫隔离或保持社交距离&#xff0c;人与人之间的接触变得风险极高。一时间&#xff0c;人们对于…...

编程日记 2023/11/15 19:18:23

（论文阅读31/100）Stacked hourglass networks for human pose estimation

31.文献阅读笔记 简介 题目 Stacked hourglass networks for human pose estimation 作者 Alejandro Newell, Kaiyu Yang, and Jia Deng, ECCV, 2016. 原文链接 https://arxiv.org/pdf/1603.06937.pdf 关键词 Human Pose Estimation 研究问题 CNN运用于Human Pose E…...

编程日记 2023/11/15 19:17:22

【第2章 Node.js基础】2.6 Node.js 的Buffer数据类型

Buffer数据类型 文章目录 Buffer数据类型什么是Buffer数据类型Buffer 的特点 创建Buffer实例Buffer用于编码转换将Buffer 实例转换为JSON 对象Buffer实例基本操作1. 写入Buffer实例&#xff1a;2. 从Buffer实例读取数据&#xff1a;3. Buffer实例合并&#xff1a; 4. Buffer实例…...

编程日记 2023/11/15 19:16:21

reactive和effect,依赖收集触发依赖

通过上一篇文章已经初始化项目&#xff0c;集成了ts和jest。本篇实现Vue3中响应式模块里的reactive方法。 前置知识要求 如果你熟练掌握Map, Set, Proxy, Reflect&#xff0c;可直接跳过这部分。 Map Map是一种用于存储键值对的集合&#xff0c;并且能够记住键的原始插入顺…...

编程日记 2023/11/15 19:15:20

【C#学习】backgroundWorker控件

BackgroundWorker 控件的几个实例&#xff08;C# backgroundworker使用方法&#xff09;&#xff1a; 在 WinForms 中&#xff0c;有时要执行耗时的操作&#xff0c;在该操作未完成之前操作用户界面&#xff0c;会导致用户界面停止响应。 解决的方法就是新开一个线程&#xff…...

编程日记 2023/11/15 19:13:18

Istio学习笔记-部署模型

参考&#xff1a;Istioldie 1.18 / 部署模型 当您将 Istio 用于生产环境部署时&#xff0c;需要确定一系列的问题。 网格将被限制在单个集群中还是分布在多个集群中&#xff1f; 是将所有服务都放置在单个完全连接的网络中&#xff0c;还是需要网关来跨多个网络连接服务&#…...

编程日记 2023/11/15 19:12:16

从理论推导到代码实现：手把手教你用Python/Numpy写出守恒形式的NS方程求解器

从理论推导到代码实现&#xff1a;手把手教你用Python/Numpy写出守恒形式的NS方程求解器计算流体力学&#xff08;CFD&#xff09;的魅力在于它将抽象的数学方程转化为可执行的代码&#xff0c;让流体运动的奥秘在计算机中重现。对于已经掌握流体力学理论的中高级学习者来说&am…...

编程新知 2026/5/26 2:29:35

CANN-昇腾NPU-RAG推理-检索增强生成怎么部署

RAG&#xff08;Retrieval-Augmented Generation&#xff09;是 LLM 知识库的组合&#xff1a;先检索相关文档&#xff0c;再让 LLM 基于文档回答。昇腾NPU 上部署 RAG 需要两个组件&#xff1a;Embedding 模型&#xff08;做向量检索&#xff09;和 LLM&#xff08;做生成&am…...

编程新知 2026/5/26 2:23:30

为Alchitry Au FPGA开发板外接JTAG接口的完整指南

1. 项目概述与核心价值如果你正在使用基于Xilinx Artix-7 FPGA的Alchitry Au或Au开发板&#xff0c;并且已经厌倦了每次调试或烧录都要依赖板载的USB-JTAG桥接芯片&#xff0c;或者你的项目已经将板载USB接口挪作他用&#xff0c;那么为你的开发板外接一个独立的JTAG调试器&…...

编程新知 2026/5/26 2:05:15

为什么视频代剪辑会影响你的内容传播效果

为什么你精心拍的视频&#xff0c;发出去却没人看&#xff1f; 你有没有过这样的经历&#xff1a;花了一整天拍Vlog&#xff0c;素材画质高清、内容真实&#xff0c;可一剪出来就显得平淡无奇&#xff0c;点赞寥寥&#xff1f;或者婚礼当天感动全场&#xff0c;回看成片却像流水…...

编程新知 2026/5/26 1:47:12

【DeepSeek开源协议识别权威指南】：20年合规专家亲授3大协议陷阱与5步精准识别法

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;DeepSeek开源协议识别的底层逻辑与合规价值 DeepSeek系列模型&#xff08;如DeepSeek-V2、DeepSeek-Coder&#xff09;虽以“开源”名义发布&#xff0c;但其实际许可状态需通过结构化协议解析才能准确…...

编程新知 2026/5/26 1:04:50

Taotoken平台快速获取APIKey并开始你的第一个Python调用示例

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 Taotoken平台快速获取APIKey并开始你的第一个Python调用示例 1. 准备工作&#xff1a;注册与登录 要开始使用Taotoken&#xff0c…...

编程新知 2026/5/26 0:18:08

为什么92%的团队用DeepSeek生成方案仍需人工重写？揭秘缺失的2个元认知层与1套校验协议

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;为什么92%的团队用DeepSeek生成方案仍需人工重写&#xff1f;揭秘缺失的2个元认知层与1套校验协议 当团队将DeepSeek-R1或DeepSeek-VL模型用于技术方案生成时&#xff0c;表面看响应迅速、逻辑连贯&…...

编程新知 2026/5/25 23:45:44

基于随机森林的低成本传感器机器学习校准实践指南

1. 项目概述&#xff1a;当低成本传感器遇上机器学习校准在物联网和智能感知系统铺天盖地的今天&#xff0c;低成本传感器几乎无处不在。从监测办公室的空气质量&#xff0c;到追踪城市街道的噪音污染&#xff0c;再到农业大棚里的温湿度控制&#xff0c;这些价格亲民的“小眼睛…...

编程新知 2026/5/25 22:34:33

phpMyAdmin CVE-2018-12613：从文件读取到RCE的伪协议利用链

1. 这个漏洞不是“能读文件”那么简单&#xff0c;而是后台权限的彻底失守phpMyAdmin 4.8.1里那个CVE-2018-12613&#xff0c;很多人扫到就报个“存在文件包含”&#xff0c;顺手贴个?targetphp://filter/convert.base64-encode/resource/etc/passwd截图完事。我去年在给一家教…...

编程新知 2026/5/25 22:10:18

【python】ImportError: DLL load failed while importing QtWidgets: 找不到指定的程序。重新安装后搞定

文章目录前言一、PyQt6引用后报错二、使用步骤总结前言 想做个好看的界面&#xff0c;引用了PyQt6&#xff0c;却产生了新问题。 pip install pyqt6-tools&#xff0c;优先做这个动作进行修复。 一、PyQt6引用后报错 python里引用&#xff1a; from PyQt6.QtWidgets import…...

编程新知 2026/5/25 21:13:33