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

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

news 2026/4/2 18:04:11

文章目录

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

前言

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

开源音乐解锁工具：浏览器端全平台音频解密解决方案

开源音乐解锁工具&#xff1a;浏览器端全平台音频解密解决方案 【免费下载链接】unlock-music 在浏览器中解锁加密的音乐文件。原仓库&#xff1a; 1. https://github.com/unlock-music/unlock-music &#xff1b;2. https://git.unlock-music.dev/um/web 项目地址: https://…...

编程新知 2026/4/2 17:09:04

Pixel Aurora Engine部署案例：边缘计算设备（Jetson Orin）轻量化部署

Pixel Aurora Engine部署案例&#xff1a;边缘计算设备&#xff08;Jetson Orin&#xff09;轻量化部署 1. 项目背景与价值 Pixel Aurora Engine是一款基于AI扩散模型的创意工具&#xff0c;专为生成复古像素艺术设计。其独特的8-bit游戏风格界面和高效生成能力&#xff0c;使…...

编程新知 2026/4/2 16:52:35

VASP表面建模进阶：利用现代脚本工具实现Slab模型原子选择性固定（POSCAR高效处理）

1. 为什么需要自动化处理POSCAR文件 在计算材料学领域&#xff0c;VASP作为第一性原理计算的黄金标准工具&#xff0c;其输入文件POSCAR的准确性直接决定了计算结果的可靠性。传统手动处理方式存在几个致命缺陷&#xff1a;首先&#xff0c;用Excel手工标记原子固定状态极易出错…...

编程新知 2026/4/2 16:32:03

当DWA遇上模糊控制：让路径规划更“聪明

基于改进动态窗口 DWA 模糊自适应调整权重的路径基于改进动态窗口 DWA 模糊自适应调整权重的路径规划算法 MATLAB 源码文档 《栅格地图可修改》 基本DWA算法能够有效地避免碰撞并尽可能接近目标点&#xff0c;但评价函数的权重因子需要根据实际情况进行调整。 为了提高DWA算法的…...

编程新知 2026/4/2 16:17:40

数字人表情驱动：ARKit blend shape中文对照与实战解析

1. ARKit blend shape基础概念解析 第一次接触ARKit的blend shape功能时&#xff0c;我也被这些英文术语搞得晕头转向。简单来说&#xff0c;blend shape就像是我们小时候玩的橡皮泥&#xff0c;通过调整不同部位的形状来改变整体表情。ARKit定义了52个标准面部动作单元&#…...

编程新知 2026/4/2 15:43:21

OpenClaw技能扩展指南：为Phi-3-mini-128k-instruct添加Markdown转换能力

OpenClaw技能扩展指南&#xff1a;为Phi-3-mini-128k-instruct添加Markdown转换能力 1. 为什么需要文档处理技能&#xff1f; 上周我整理技术文档时遇到了一个典型问题&#xff1a;收到同事发来的PDF技术白皮书&#xff0c;需要提取关键章节并转换为Markdown格式存档。手动操…...

编程新知 2026/4/2 13:02:16

CyberChef：数据处理的万能工具箱

CyberChef&#xff1a;数据处理的万能工具箱 【免费下载链接】CyberChef The Cyber Swiss Army Knife - a web app for encryption, encoding, compression and data analysis 项目地址: https://gitcode.com/GitHub_Trending/cy/CyberChef 数据处理的困境与破局之道 你…...

编程新知 2026/4/2 11:08:26

YOLOv8鹰眼目标检测实战：一键部署，实时识别80种物体（附WebUI）

YOLOv8鹰眼目标检测实战&#xff1a;一键部署&#xff0c;实时识别80种物体&#xff08;附WebUI&#xff09; 1. 项目概述 1.1 什么是YOLOv8鹰眼目标检测 YOLOv8鹰眼目标检测是基于Ultralytics最新YOLOv8模型的工业级解决方案。它能够在毫秒级别完成图像中多达80类物体的识别…...

编程新知 2026/4/2 10:34:09

MRIcroGL：3步掌握开源医学影像3D可视化工具，让诊断更直观

MRIcroGL&#xff1a;3步掌握开源医学影像3D可视化工具&#xff0c;让诊断更直观 【免费下载链接】MRIcroGL v1.2 GLSL volume rendering. Able to view NIfTI, DICOM, MGH, MHD, NRRD, AFNI format images. 项目地址: https://gitcode.com/gh_mirrors/mr/MRIcroGL 想要…...

编程新知 2026/4/2 8:50:15

从零入门大模型应用开发：收藏这份学习清单，轻松转型高薪岗位！

文章指出当前AI应用开发社招要求已提升&#xff0c;不再满足于简单的API调用或Demo实现。文章警示三类人慎入AI开发社招&#xff0c;并强调能力复合化、工程深度和业务理解的重要性。作者分享了四年AI开发经验&#xff0c;建议深入原理、重构项目经验&#xff0c;并给出了量化解…...

编程新知 2026/4/2 8:38:08