前端开发设计模式——策略模式
目录
一、策略模式的定义和特点
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…...

VB.net复制Ntag213卡写入UID
本示例使用的发卡器:https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面
代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口(适配服务端返回 Token) export const login async (code, avatar) > {const res await http…...

【Java_EE】Spring MVC
目录 Spring Web MVC 编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 编辑参数重命名 RequestParam 编辑编辑传递集合 RequestParam 传递JSON数据 编辑RequestBody …...
DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”
目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)
本期内容并不是很难,相信大家会学的很愉快,当然对于有后端基础的朋友来说,本期内容更加容易了解,当然没有基础的也别担心,本期内容会详细解释有关内容 本期用到的软件:yakit(因为经过之前好多期…...
MySQL账号权限管理指南:安全创建账户与精细授权技巧
在MySQL数据库管理中,合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号? 最小权限原则…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)
漏洞概览 漏洞名称:Apache Flink REST API 任意文件读取漏洞CVE编号:CVE-2020-17519CVSS评分:7.5影响版本:Apache Flink 1.11.0、1.11.1、1.11.2修复版本:≥ 1.11.3 或 ≥ 1.12.0漏洞类型:路径遍历&#x…...

深入浅出深度学习基础:从感知机到全连接神经网络的核心原理与应用
文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么?1.1.2 感知机的工作原理 1.2 感知机的简单应用:基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

AI+无人机如何守护濒危物种?YOLOv8实现95%精准识别
【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而,传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案,能够实现大范围覆盖并远程采集数据。尽管具备这些优势…...