前端开发设计模式——策略模式
目录
一、策略模式的定义和特点
1.定义:
2.特点:
二、策略模式的实现方式
1.定义策略接口:
2.创建具体策略类:
3.定义上下文类:
三、策略模式的应用场景
1.表单验证场景:
2.动画效果切换场景:
3.数据处理和格式化场景:
四、策略模式的优点
1.可维护性:
2.可扩展性:
3.灵活性:
五、策略模式的缺点
1.增加代码复杂度:
2.性能开销:
六、策略模式的注意事项
1.策略命名规范:
2.策略的选择逻辑:
3.策略的可测试性:
一、策略模式的定义和特点
1.定义:
策略模式是一种行为设计模式,它定义了一系列的算法,并将每个算法封装起来,使它们可以相互替换。在前端开发中,策略模式允许根据不同的情况动态地选择和应用不同的算法或行为,而无需修改使用这些算法的主体代码。
2.特点:
算法封装:将不同的算法封装在独立的策略类中,每个策略类实现特定的行为逻辑。
可替换性:不同的策略可以在运行时相互替换,使得系统更加灵活。
解耦性:策略模式将算法的实现与使用算法的主体代码解耦,提高了代码的可维护性和可扩展性。
二、策略模式的实现方式
1.定义策略接口:
首先,定义一个策略接口,该接口声明了所有具体策略类必须实现的方法。例如:
interface Strategy {execute(): void;}
2.创建具体策略类:
实现具体的策略类,每个策略类实现策略接口中的方法,并提供特定的算法实现。例如:
class ConcreteStrategyA implements Strategy {execute() {console.log('Executing strategy A.');}}class ConcreteStrategyB implements Strategy {execute() {console.log('Executing strategy B.');}}
3.定义上下文类:
上下文类持有一个策略对象的引用,并通过该引用调用策略对象的方法。上下文类可以在运行时设置不同的策略对象。例如:
class Context {private strategy: Strategy;constructor(strategy: Strategy) {this.strategy = strategy;}setStrategy(strategy: Strategy) {this.strategy = strategy;}executeStrategy() {this.strategy.execute();}}
三、策略模式的应用场景
1.表单验证场景:
根据不同的表单字段类型和需求,可以使用不同的验证策略。例如,对于电子邮件字段,可以使用一个验证电子邮件格式的策略;对于密码字段,可以使用一个验证密码强度的策略.
示例:
(1)定义策略接口:
interface ValidationStrategy {validate(value): boolean;
}
(2)创建具体策略类:
邮箱验证策略:
class EmailValidationStrategy implements ValidationStrategy {validate(value) {const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;return emailRegex.test(value);}}
密码长度验证策略:
class PasswordLengthValidationStrategy implements ValidationStrategy {validate(value) {return value.length >= 8;}}
(3)定义上下文类(表单组件):
class FormComponent {private validationStrategy: ValidationStrategy;constructor(strategy: ValidationStrategy) {this.validationStrategy = strategy;}setValidationStrategy(strategy: ValidationStrategy) {this.validationStrategy = strategy;}validateInput(value) {return this.validationStrategy.validate(value);}
}
(4)使用示例:
// 使用邮箱验证策略
const emailFormComponent = new FormComponent(new EmailValidationStrategy());
const isEmailValid = emailFormComponent.validateInput('test@example.com');
console.log('Email is valid:', isEmailValid);// 切换为密码长度验证策略
emailFormComponent.setValidationStrategy(new PasswordLengthValidationStrategy());
const isPasswordValid = emailFormComponent.validateInput('12345678');
console.log('Password is valid:', isPasswordValid);
2.动画效果切换场景:
在前端动画中,可以根据不同的场景和用户交互选择不同的动画效果策略。例如,在页面加载时可以使用一种淡入效果,在用户点击按钮时可以使用一种弹出效果。
示例:
(1)定义策略接口:
interface AnimationStrategy {animate(element): void;
}
(2)创建具体策略类:
淡入动画策略:
class FadeInAnimationStrategy implements AnimationStrategy {animate(element) {element.style.opacity = '0';let opacity = 0;const interval = setInterval(() => {opacity += 0.1;element.style.opacity = opacity.toString();if (opacity >= 1) {clearInterval(interval);}}, 100);}}
弹出动画策略:
class PopupAnimationStrategy implements AnimationStrategy {animate(element) {element.style.transform = 'scale(0)';let scale = 0;const interval = setInterval(() => {scale += 0.1;element.style.transform = `scale(${scale})`;if (scale >= 1) {clearInterval(interval);}}, 100);}}
(3)定义上下文类(动画控制器):
class AnimationController {private animationStrategy: AnimationStrategy;constructor(strategy: AnimationStrategy) {this.animationStrategy = strategy;}setAnimationStrategy(strategy: AnimationStrategy) {this.animationStrategy = strategy;}startAnimation(element) {this.animationStrategy.animate(element);}
}
(4)使用示例:
// 使用淡入动画策略
const fadeInController = new AnimationController(new FadeInAnimationStrategy());
const elementToAnimate = document.createElement('div');
document.body.appendChild(elementToAnimate);
fadeInController.startAnimation(elementToAnimate);// 切换为弹出动画策略
fadeInController.setAnimationStrategy(new PopupAnimationStrategy());
const anotherElementToAnimate = document.createElement('div');
document.body.appendChild(anotherElementToAnimate);
fadeInController.startAnimation(anotherElementToAnimate);
3.数据处理和格式化场景:
对于不同类型的数据,可以使用不同的数据处理和格式化策略。例如,对于日期数据,可以使用不同的日期格式化策略;对于数字数据,可以使用不同的数字格式化策略。
这个就不举例了......
四、策略模式的优点
1.可维护性:
将不同的算法封装在独立的策略类中,使得代码更加清晰、易于维护。当需要修改某个算法时,只需修改相应的策略类,而不会影响其他部分的代码。
2.可扩展性:
可以方便地添加新的策略类,实现新的算法或行为,而无需修改现有的代码。这使得系统具有良好的可扩展性。
3.灵活性:
策略模式允许在运行时根据不同的情况选择不同的策略,使得系统更加灵活。可以根据用户的输入、系统状态或其他条件动态地切换策略。
五、策略模式的缺点
1.增加代码复杂度:
引入策略模式会增加代码的复杂度,特别是当有多个策略类时。需要更多的类和接口,以及更多的代码来管理策略的选择和切换。
2.性能开销:
在运行时动态地选择策略可能会带来一定的性能开销。特别是当策略的选择和切换比较频繁时,可能会影响系统的性能。
六、策略模式的注意事项
1.策略命名规范:
为了提高代码的可读性和可维护性,应该为策略类和方法使用清晰、有意义的命名规范。这样可以更容易地理解每个策略的作用和用途。
2.策略的选择逻辑:
在上下文类中,应该有明确的逻辑来选择合适的策略。可以根据用户的输入、系统状态或其他条件来选择策略。同时,应该考虑策略的优先级和适用性,以确保选择的策略是最合适的。
3.策略的可测试性:
由于策略模式将算法的实现与使用算法的主体代码解耦,因此策略类通常比较容易进行单元测试。可以为每个策略类编写独立的测试用例,确保它们的行为符合预期。同时,也应该测试上下文类对策略的选择和切换逻辑。
对于前端开发设计模式中的策略模式就分享到这,如果对设计模式中的其他模式有兴趣的话,可以点开主页看看相关文章。码字不易,点个赞再走吧
相关文章:
前端开发设计模式——策略模式
目录 一、策略模式的定义和特点 1.定义: 2.特点: 二、策略模式的实现方式 1.定义策略接口: 2.创建具体策略类: 3.定义上下文类: 三、策略模式的应用场景 1.表单验证场景: 2.动画效果切换场景&…...

SysML案例-潜艇
DDD领域驱动设计批评文集>> 《软件方法》强化自测题集>> 《软件方法》各章合集>>...

车辆重识别(2020NIPS去噪扩散概率模型)论文阅读2024/9/27
[2] Denoising Diffusion Probabilistic Models 作者:Jonathan Ho Ajay Jain Pieter Abbeel 单位:加州大学伯克利分校 摘要: 我们提出了高质量的图像合成结果使用扩散概率模型,一类潜变量模型从非平衡热力学的考虑启发。我们的最…...
基于深度学习的任务序列中的快速适应
基于深度学习的任务序列中的快速适应是指模型在接连处理不同任务时,能够迅速调整和优化自身以适应新任务的能力。这种能力在动态环境和多任务学习中尤为重要,旨在减少训练时间和资源需求。以下是这一主题的关键要素: 1. 快速适应的背景 动态…...

虚拟机三种网络模式详解
在电脑里开一台虚拟机,是再常见不过的操作了。无论是用虚拟机玩只有旧版本系统能运行的游戏,还是用来学习Linux、跑跑应用程序都是很好的。而这其中,虚拟机网络是绝对绕不过去的。本篇文章通俗易懂的介绍了常见的虚拟网络提供的三种网络链接模…...
[leetcode]674_最长连续递增序列
给定一个未经排序的整数数组,找到最长且 连续递增的子序列,并返回该序列的长度。 连续递增的子序列 可以由两个下标 l 和 r(l < r)确定,如果对于每个 l < i < r,都有 nums[i] < nums[i 1] &am…...

【无人机设计与技术】四旋翼无人机,UAV仿真,轨迹跟踪PID控制
摘要 本文探讨了四旋翼无人机(UAV)在轨迹跟踪中的PID控制仿真方法。通过设计三轴方向的PID控制器,调节无人机的姿态与位置,使其能够准确跟踪预设轨迹。本文使用MATLAB/Simulink进行了建模与仿真,验证了PID控制算法在无…...

回归预测|基于卷积神经网络-支持向量机的数据回归预测Matlab程序CNN-SVM 卷积提取特征与原始特征进行融合预测
回归预测|基于卷积神经网络-支持向量机的数据回归预测Matlab程序CNN-SVM 卷积提取特征与原始特征进行融合预测 文章目录 一、基本原理原理流程总结 二、实验结果三、核心代码四、代码获取五、总结 回归预测|基于卷积神经网络-支持向量机的数据回归预测Matlab程序CNN-SVM 卷积提…...
javaScript基础知识汇总
一、基础语法 1、区分大小写:无论是变量、函数名还是操作符,都区分大小写。 2、标识符:就是变量、函数、属性或函数参数的名称。标识符可以由一个或多个字符构成,但需要满足以下条件: 第一个字符必须是一个字母、下…...

《动手学深度学习》笔记2.2——神经网络从基础→进阶 (参数管理-每层的权重/偏置)
目录 0. 前言 正文:参数管理 1. 参数访问 1.1 [目标参数] 1.2 [一次性访问所有参数] 1.3 [从嵌套块收集参数] 2. 参数初始化 2.1 [内置初始化] 2.2 [自定义初始化] 2.3 [参数绑定-共享参数] 3. 小结(第2节) 4. 延后初始化 (原书第…...

双端之Nginx+Php结合PostgreSQL搭建Wordpress
第一台虚拟机:安装 Nginx 更新系统包列表: sudo apt update安装 Nginx及php扩展: sudo apt install nginx php-fpm php-pgsql php-mysqli -y启动 Nginx 服务: sudo systemctl start nginx检查 Nginx 是否正常运行: xdg-open http://localhost注意:终端命令打开网址 …...

Another redis desktop manager使用说明
Another redis desktop manager使用说明 概述界面介绍图示说明连接界面设置界面查看操作日志主界面信息进入redis-cli控制台更多 概述 Another Redis Desktop Manager是一个开源的跨平台 Redis 客户端,提供了简洁易用的图形用户界面(GUI)&am…...
【git】配置 Git 的换行符处理和安全性||安装 Ruby
配置 Git 的换行符处理和安全性: git config --global core.autocrlf input:这个设置确保在提交代码时,Git 会将 CRLF(Windows 的换行符)转换为 LF(Unix 的换行符),但在检出代码时不…...

VMware ESXi 8.0U3b macOS Unlocker OEM BIOS 2.7 Dell HPE 定制版 9 月更新发布
VMware ESXi 8.0U3b macOS Unlocker & OEM BIOS 2.7 Dell HPE 定制版 9 月更新发布 VMware ESXi 8.0U3b macOS Unlocker & OEM BIOS 2.7 标准版和厂商定制版 ESXi 8.0U3 标准版,Dell (戴尔)、HPE (慧与)、Lenovo (联想)、IEIT SYSTEMS (浪潮信息)、Cisco …...

Unity 代码裁剪(Strip Engine Code)
文章目录 0.IL2CPP 打包运行闪退问题1.什么是代码裁剪2.为什么要使用代码裁剪3.代码裁剪设置与级别4.强制保留代码4.1 使用[Preserve]标签4.2 使用Link.xml文件 5.Strip中遇到的问题及解决方法6.注意事项 0.IL2CPP 打包运行闪退问题 Google Play要求从2019年8月1日起apk必须支…...

单目3d重建DUSt3R 笔记
目录 DUSt3R 三维重建 报错RecursionError: maximum recursion depth exceeded in comparison 报错 numpy.core.multiarray failed to import 报错Numpy is not available 解决 升级版mast3r 速度变慢 修改了参数设置脚本: 测试效果 操作技巧 DUSt3R 三维重…...

AI驱动TDSQL-C Serverless 数据库技术实战营-与AI的碰撞
目录 一、简介 二、实验介绍 三、结果展示 四、实操指导 4.1 系统设计 4.2 环境搭建(手把手教程) 4.3 应用构建 4.4 效果展示 4.5 踩坑避雷总结 五、清理资源 5.1 删除TDSQL-C Serverless 5.2 删除 HAI 算力 六、实验总结归纳 一、简介 本…...

C++之String类(上)
片头 嗨!好久不见~ 今天我们来学习C的Sting类,不过,在学习它之前,我们先来对STL库有一个简单的了解。 STL(standard template library--标准模板库),是C标准库的重要组成部分,不仅是…...

kubernets基础-ingress详细介绍
文章目录 什么是IngressIngress详细说明Ingress示例 Ingress控制器Ingress控制器的工作原理Ingress控制器的特点常见的Ingress控制器 Ingress关联Ingress控制器一、Ingress资源对象二、Ingress控制器三、Ingress与Ingress控制器的关联方式四、注意事项 多实例部署一、Ingress多…...

jenkins部署Maven和NodeJS项目
在 Java 项目开发中,项目的编译、测试、打包等是比较繁琐的,属于重复劳动的工作,浪费人力和时间成本。以往开发项目时,程序员往往需要花较多的精力在引用 jar 包搭建项目环境上,跨部门甚至跨人员之间的项目结构都有可能…...

C++_核心编程_多态案例二-制作饮品
#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为:煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例,提供抽象制作饮品基类,提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动(如演唱会、马拉松赛事、高考中考等)期间,城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例,暖城商圈曾因观众集中离场导致周边…...

如何在看板中体现优先级变化
在看板中有效体现优先级变化的关键措施包括:采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中,设置任务排序规则尤其重要,因为它让看板视觉上直观地体…...

【论文阅读28】-CNN-BiLSTM-Attention-(2024)
本文把滑坡位移序列拆开、筛优质因子,再用 CNN-BiLSTM-Attention 来动态预测每个子序列,最后重构出总位移,预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵(S…...

vue3+vite项目中使用.env文件环境变量方法
vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量,这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习)
Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习) 一、Aspose.PDF 简介二、说明(⚠️仅供学习与研究使用)三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用
一、方案背景 在现代生产与生活场景中,如工厂高危作业区、医院手术室、公共场景等,人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式,存在效率低、覆盖面不足、判断主观性强等问题,难以满足对人员打手机行为精…...

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.
ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #:…...

c++第七天 继承与派生2
这一篇文章主要内容是 派生类构造函数与析构函数 在派生类中重写基类成员 以及多继承 第一部分:派生类构造函数与析构函数 当创建一个派生类对象时,基类成员是如何初始化的? 1.当派生类对象创建的时候,基类成员的初始化顺序 …...
WebRTC从入门到实践 - 零基础教程
WebRTC从入门到实践 - 零基础教程 目录 WebRTC简介 基础概念 工作原理 开发环境搭建 基础实践 三个实战案例 常见问题解答 1. WebRTC简介 1.1 什么是WebRTC? WebRTC(Web Real-Time Communication)是一个支持网页浏览器进行实时语音…...