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

前端开发设计模式——策略模式

目录

一、策略模式的定义和特点

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_最长连续递增序列

给定一个未经排序的整数数组&#xff0c;找到最长且 连续递增的子序列&#xff0c;并返回该序列的长度。 连续递增的子序列 可以由两个下标 l 和 r&#xff08;l < r&#xff09;确定&#xff0c;如果对于每个 l < i < r&#xff0c;都有 nums[i] < nums[i 1] &am…...

【无人机设计与技术】四旋翼无人机,UAV仿真,轨迹跟踪PID控制

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

回归预测|基于卷积神经网络-支持向量机的数据回归预测Matlab程序CNN-SVM 卷积提取特征与原始特征进行融合预测

回归预测|基于卷积神经网络-支持向量机的数据回归预测Matlab程序CNN-SVM 卷积提取特征与原始特征进行融合预测 文章目录 一、基本原理原理流程总结 二、实验结果三、核心代码四、代码获取五、总结 回归预测|基于卷积神经网络-支持向量机的数据回归预测Matlab程序CNN-SVM 卷积提…...

javaScript基础知识汇总

一、基础语法 1、区分大小写&#xff1a;无论是变量、函数名还是操作符&#xff0c;都区分大小写。 2、标识符&#xff1a;就是变量、函数、属性或函数参数的名称。标识符可以由一个或多个字符构成&#xff0c;但需要满足以下条件&#xff1a; 第一个字符必须是一个字母、下…...

《动手学深度学习》笔记2.2——神经网络从基础→进阶 (参数管理-每层的权重/偏置)

目录 0. 前言 正文&#xff1a;参数管理 1. 参数访问 1.1 [目标参数] 1.2 [一次性访问所有参数] 1.3 [从嵌套块收集参数] 2. 参数初始化 2.1 [内置初始化] 2.2 [自定义初始化] 2.3 [参数绑定-共享参数] 3. 小结&#xff08;第2节&#xff09; 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 客户端&#xff0c;提供了简洁易用的图形用户界面&#xff08;GUI&#xff09;&am…...

【git】配置 Git 的换行符处理和安全性||安装 Ruby

配置 Git 的换行符处理和安全性&#xff1a; git config --global core.autocrlf input&#xff1a;这个设置确保在提交代码时&#xff0c;Git 会将 CRLF&#xff08;Windows 的换行符&#xff09;转换为 LF&#xff08;Unix 的换行符&#xff09;&#xff0c;但在检出代码时不…...

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 标准版&#xff0c;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 速度变慢 修改了参数设置脚本&#xff1a; 测试效果 操作技巧 DUSt3R 三维重…...

AI驱动TDSQL-C Serverless 数据库技术实战营-与AI的碰撞

目录 一、简介 二、实验介绍 三、结果展示 四、实操指导 4.1 系统设计 4.2 环境搭建&#xff08;手把手教程&#xff09; 4.3 应用构建 4.4 效果展示 4.5 踩坑避雷总结 五、清理资源 5.1 删除TDSQL-C Serverless 5.2 删除 HAI 算力 六、实验总结归纳 一、简介 本…...

C++之String类(上)

片头 嗨&#xff01;好久不见~ 今天我们来学习C的Sting类&#xff0c;不过&#xff0c;在学习它之前&#xff0c;我们先来对STL库有一个简单的了解。 STL&#xff08;standard template library--标准模板库&#xff09;&#xff0c;是C标准库的重要组成部分&#xff0c;不仅是…...

kubernets基础-ingress详细介绍

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

jenkins部署Maven和NodeJS项目

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

《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》

引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

如何更改默认 Crontab 编辑器 ?

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...

PostgreSQL——环境搭建

一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在&#xff0…...

[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG

TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码&#xff1a;HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...

大模型——基于Docker+DeepSeek+Dify :搭建企业级本地私有化知识库超详细教程

基于Docker+DeepSeek+Dify :搭建企业级本地私有化知识库超详细教程 下载安装Docker Docker官网:https://www.docker.com/ 自定义Docker安装路径 Docker默认安装在C盘,大小大概2.9G,做这行最忌讳的就是安装软件全装C盘,所以我调整了下安装路径。 新建安装目录:E:\MyS…...

机器学习复习3--模型评估

误差与过拟合 我们将学习器对样本的实际预测结果与样本的真实值之间的差异称为&#xff1a;误差&#xff08;error&#xff09;。 误差定义&#xff1a; ①在训练集上的误差称为训练误差&#xff08;training error&#xff09;或经验误差&#xff08;empirical error&#x…...

Vue项目PDF目录功能集成【一】——方案深度思考

文章目录 项目背景一、方案一&#xff1a;数据透传 外部开发模式二、方案二&#xff1a;内置组件 黑盒模式三、方案三&#xff1a;激活官方实现 可控定制总结 项目背景 本项目是Vue 3 项目&#xff0c;需要使用文件预览组件&#xff08;pdfjs 当前是作为sdk二次封装引入&am…...