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

策略模式——多重if-else解决方案

概念

大量的 if 判断操作,逻辑比较复杂,并且处理起来相对麻烦。可以采用策略模式来优化分支代码。
策略模式 💤:是一种行为设计模式,它允许你在运行时根据不同情况选择不同的算法或行为。
设计模式 🤌:就是提前第一次了解全过程,第二次直接规划不必要的坑。
我们在写代码亦是如此,一定也遇到过许多类似的场景。随着程序员经验的增加,我们对于这些常见场景的处理越来越得心应手,甚至总结出了针对性的“套路”,下次遇到此类问题直接运用“套路”解决,省心又省力。这些在软件开发过程中逐渐积累下来的“套路”就是设计模式。

设计模式的目标之一就是提高代码的可复用性、可扩展性和可维护性。正因如此,虽然有时候我们不知道某个设计模式,但是看了相关书籍或文章后会有一种“啊,原来这就是设计模式”的恍然大明白。

例:

const game = (name) => {if (name === "原s") {console.log("启动!");} else if (name === "xx精英") {console.log("我先成盒了你们加油!");} else if (name === "云顶yy") {console.log("这就是我们之间的羁绊!");} else if (name === "王者zz") {console.log("我再也不买皮肤了!");} else {console.log("我啥也没玩");}
};
game("原s"); // 启动!

简单优化一下写法:

const game = (name) => {let obj = {原s: "启动!",xx精英: "我先成盒了你们加油!",云顶yy: "这就是我们之间的羁绊!",王者zz: "我再也不买皮肤了!",};if (obj[name]) {console.log(obj[name]);} else {console.log("我啥也没玩");}
};
game("原s"); // 启动!

这种写法只是参考了策略模式的思路,将逻辑封装到一个对象中。这种方式使得这个对象能够独立出来,只需专注于维护这个对象本身即可。如果要是每个方法都不同,那该如何去写呢?接着往下看

const game = (name) => {let obj = {原s: () => {console.log("启动!");},xx精英: () => {console.log("我先成盒了你们加油!");},云顶yy: () => {console.log("这就是我们之间的羁绊!");},王者zz: () => {console.log("我再也不买皮肤了!");},};if (obj[name]) {obj[name]();} else {console.log("我啥也没玩");}
};game("原s"); // 启动!

这种写法就是将对象中的处理逻辑单独封装成一个函数,让他内部自己处理自己所用到的逻辑。

下面这种写法代码更加灵活和可扩展,也是我比较推荐的写法。

const strategies = {原s: () => console.log("启动!"),xx精英: () => console.log("我先成盒了你们加油!"),云顶yy: () => console.log("这就是我们之间的羁绊!"),王者zz: () => console.log("我再也不买皮肤了!"),
};function executeStrategy(name) {if (strategies[name]) {strategies[name]();} else {console.log("我啥也没玩");}
}executeStrategy("原s");

在这个例子里面,我们可以将游戏名作为参数传递给函数,而不是在函数内部定义多个条件。这样,我们就可以将函数封装成一个可复用的策略,以便在将来添加更多的游戏名称。

1. 案例

下面看一下使用场景,比如我们需要做一个 from 表单验证,需要验证手机号和密码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>表单</title><script src="./src/index.js"></script></head><body><form id="login-form" action="" method="post"><label for="account">手机号</label><input type="number" id="account" name="account" /><label for="password">密码</label><input type="password" id="password" name="password" /><button id="login">登录</button></form><script>let loginForm = document.getElementById("login-form");loginForm.onsubmit = function (e) {e.preventDefault();let account = document.getElementById("account").value;let pwd = document.getElementById("password").value;if (account === null || account === "") {console.log("手机号不能为空");return false;}if (pwd === null || pwd === "") {console.log("密码不能为空");return false;}if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(account)) {console.log("手机号格式错误");return false;}if (pwd.length < 6) {console.log("密码不能小于六位");return false;}// 模拟ajax请求setTimeout(() => {console.log("登录成功!");}, 1000);};</script></body>
</html>

在这里可以发现问题也是很明显的,如果你想说他能跑起来吗?他也能跑起来,但是里面的 if 语句到处都是,每次新增一种校验,需要整体去调整这个 loginForm.onsubmit 代码,复用性也很差,只能手动矫正

2. 优化

先将此方法抽离出来

let obj = {isNonEmpty: function (value, errorMsg) {if (value === "" || value === null) {return errorMsg;}},isMobile: function (value, errorMsg) {// 手机号码正则if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(value)) {return errorMsg;}},minLength: function (value, errorMsg) {if (value.length < length) {return errorMsg;}},
};

修改 Context 内容部分

let loginForm = document.getElementById("loginForm");loginForm.onsubmit = function (e) {e.preventDefault();let phone = strategies.isMobile(account, "手机号格式错误");let pwdMinLength = strategies.minLength(pwd, "密码不能小于六位");let error = accountIsMobile || pwdMinLength;if (error) {console.log(error);return false;}
};

完整代码如下

<div><form id="loginform" action="" method="post"><label for="account">手机号</label><input type="number" id="account" name="account" /><label for="password">密码</label><input type="password" id="password" name="password" /><button id="login">登录</button></form>
</div>
let account = ""; // 这里的变量需要初始化一下,不然无法获取到value
let pwd = "";let loginForm = document.getElementById("loginform");
let strategies = {isNonEmpty: function (value, errorMsg) {if (value === "" || value === null) {return errorMsg;}},isMobile: function (value, errorMsg) {// 手机号码格式if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(value)) {return errorMsg;}},minLength: function (value, length, errorMsg) {console.log(value);if (value.length < length) {return errorMsg;}},
};loginForm.addEventListener("submit", (e) => {account = document.getElementById("account").value;pwd = document.getElementById("password").value;e.preventDefault();let phonenull = strategies.isNonEmpty(account, "手机号不能为空");let phone = strategies.isMobile(account, "手机号格式错误");let pwdMinLength = strategies.minLength(pwd, 6, "密码不能小于六位");let error = phonenull || phone || pwdMinLength;if (error) {console.log(error);return false;} else {console.log("提交成功!");}
});

相关文章:

策略模式——多重if-else解决方案

概念 大量的 if 判断操作&#xff0c;逻辑比较复杂&#xff0c;并且处理起来相对麻烦。可以采用策略模式来优化分支代码。 策略模式 &#x1f4a4;&#xff1a;是一种行为设计模式&#xff0c;它允许你在运行时根据不同情况选择不同的算法或行为。 设计模式 &#x1f90c;&…...

CTAmap 1.12版本2013年-2023年省市县矢量数据更新

中国行政区划数据CTAmap 1.12版本更新 从2022年起&#xff0c;笔者开始整理长时间序列的中国行政区划数据&#xff0c;通过以国家基础地理信息矢量数据为基础&#xff0c;以高德、民政部、gadm、乡镇界、村界、各省标准地图等区划矢量数据和相关行政区划变更文字资料为参考&am…...

【Linux初阶】多线程3 | 线程同步,生产消费者模型(普通版、BlockingQueue版)

文章目录 ☀️一、线程同步&#x1f33b;1.条件变量&#x1f33b;2.同步概念与竞态条件&#x1f33b;3.条件变量函数&#x1f33b;4.条件变量使用规范&#x1f33b;5.代码案例 ☀️二、生产者消费者模型&#x1f33b;1.为何要使用生产者消费者模型&#x1f33b;2.生产者消费者模…...

JUC并发编程——四大函数式接口(基于狂神说的学习笔记)

四大函数式接口 函数式接口&#xff1a;只有一个方法的接口 &#xff0c;例如&#xff1a;Runnable接口 Function 函数型接口&#xff0c;有一个输入参数&#xff0c;有一个输出 源码&#xff1a; /*** Represents a function that accepts one argument and produces a resul…...

【2】c++11新特性(稳定性和兼容性)—>超长整型 long long

c11标准要求long long整型可以在不同的平台上有不同的长度&#xff0c;但是至少64位&#xff0c;long long整型有两种&#xff1a; 有符号long long&#xff1a;–对应类型的数值可以使用LL或者ll后缀 long long num1 123456789LL; long long num2 123456789ll;无符号unsign…...

AI算法检测对无人军用车辆的MitM攻击

南澳大利亚大学和查尔斯特大学的教授开发了一种算法来检测和拦截对无人军事机器人的中间人&#xff08;MitM&#xff09;攻击。 MitM 攻击是一种网络攻击&#xff0c;其中两方&#xff08;在本例中为机器人及其合法控制器&#xff09;之间的数据流量被拦截&#xff0c;以窃听或…...

运维 | 如何在 Linux 系统中删除软链接 | Linux

运维 | 如何在 Linux 系统中删除软链接 | Linux 介绍 在 Linux 中&#xff0c;符号链接&#xff08;symbolic link&#xff0c;或者symlink&#xff09;也称为软链接&#xff0c;是一种特殊类型的文件&#xff0c;用作指向另一个文件的快捷方式。 使用方法 我们可以使用 ln…...

Jmeter接口测试:jmeter导入和导出接口的处理

JMeter测试导入接口 利用Jmeter测试上传文件&#xff0c;首先可根据接口文档或者fiddler抓包分析文件上传的接口&#xff1b;如下图&#xff1a; 以下是我通过fiddler所截取的文件上传的接口 1、填写导入接口的信息 查看文件上传栏下的填写信息&#xff1a; 文件名称&#x…...

一文了解 Go fmt 标准库的常用占位符及其简单使用

今天分享的内容是 Go fmt 标准库的常用占位符及其简单使用。如果本文对你有帮助&#xff0c;不妨点个赞&#xff0c;如果你是 Go 语言初学者&#xff0c;不妨点个关注&#xff0c;一起成长一起进步&#xff0c;如果本文有错误的地方&#xff0c;欢迎指出 占位符 通过占位符&a…...

Linux命令(94)之history

linux命令之history 1.history介绍 linux命令history会记录并显示用户所执行过的所有命令&#xff0c;也可以对其命令进行修改和删除操作。 2.history用法 history [参数] history参数 参数说明-a将当前会话的历史信息追加到历史文件(.bash_history)中-c删除所有条目从而清…...

Prompt 驱动架构设计:探索复杂 AIGC 应用的设计之道?

你是否曾经想过&#xff0c;当你在 Intellij IDEA 中输入一个段代码时&#xff0c;GitHub 是如何给你返回相关的结果的&#xff1f;其实&#xff0c;这背后的秘密就是围绕 Prompt 生成而构建的架构设计。 Prompt 是一个输入的文本段落或短语&#xff0c;用于引导 AI 生成模型执…...

【代码随想录】算法训练营 第三天 第二章 链表 Part 1

目录 链表基础 链表的定义 203. 移除链表元素 题目 思路 代码 直接删除法 虚拟头结点辅助法 707. 设计链表 题目 思路 代码 206. 反转链表 题目 思路 代码 双指针法 递归法 链表基础 链表是一种通过指针串在一起的线性结构&#xff0c;每个节点都由数据域和指…...

winform开发经验(1)——调用Invoke更新UI时程序卡死原因以及解决办法

1、问题代码如下: private void Form1_Load(object sender, EventArgs e){this.Invoke(new Action(()...

JNI 的数据类型以及和Java层之间的数据转换

JNI的数据类型和类型签名 数据类型 JNI的数据类型包含两种&#xff1a;基本类型和引用类型。 基本类型主要有jboolean、jchar、jint等&#xff0c;它们和Java中的数据类型的对应关系如下表所示。 JNI中的引用类型主要有类、对象和数组&#xff0c;它们和Java中的引用类型的对…...

EFLK与logstash过滤

目录 一、Filebeat工作原理&#xff1a; 二、为什么要使用Filebeat&#xff1a; 三、Filebeat和Logstash的区别&#xff1a; 四、logstash 的过滤插件&#xff1a; 五、FilebeatELK 部署&#xff1a; 1. 安装filebeat&#xff1a; 2. 设置 filebeat 的主配置文件&#xff1…...

docker jenkins

mkdir jenkins_home chown -R 1000:1000 /root/jenkins_home/docker run -d --name myjenkins -v /root/jenkins_home:/var/jenkins_home -p 8080:8080 -p 50000:50000 --restarton-failure jenkins/jenkins:lts-jdk17参考 Official Jenkins Docker imageDocker 搭建 Jenkins …...

单例模式之「双重校验锁」

单例模式之「双重校验锁」 单例模式 单例即单实例&#xff0c;只实例出来一个对象。一般在创建一些管理器类、工具类的时候&#xff0c;需要用到单例模式&#xff0c;比如JDBCUtil 类&#xff0c;我们只需要一个实例即可&#xff08;多个实例也可以实现功能&#xff0c;但是增…...

2023年中国商业版服务器操作系统市场发展规模分析:未来将保持稳定增长[图]

服务器操作系统一般指的是安装在大型计算机上的操作系统&#xff0c;比如Web服务器、应用服务器和数据库服务器等&#xff0c;是企业IT系统的基础架构平台&#xff0c;也是按应用领域划分的三类操作系统之一。同时服务器操作系统也可以安装在个人电脑上。 服务器操作系统分类 …...

BIM如何通过3D开发工具HOOPS实现WEB轻量化?

随着建筑行业的数字化转型和信息建模技术的不断发展&#xff0c;建筑信息模型&#xff08;BIM&#xff09;已经成为设计、建造和管理建筑项目的标准。然而&#xff0c;BIM模型通常包含大量的数据&#xff0c;导致在Web上的传输和查看效率低下。为了解决这一挑战&#xff0c;HOO…...

Unity 3D基础——通过四元数控制对象旋转

在这个例子中&#xff0c;通过键盘的左右方向来控制场景中的球体 Sphere 的横向运动&#xff0c;而 Cube 立方体则会一直朝着球体旋转。 1.在场景中新建一个 Cube 立方体和一个 Sphere 球体&#xff0c;在 Inspector 视图中设置 Cube 立方体的坐标为&#xff08;3&#xff0c;0…...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...

Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

多种风格导航菜单 HTML 实现(附源码)

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

elementUI点击浏览table所选行数据查看文档

项目场景&#xff1a; table按照要求特定的数据变成按钮可以点击 解决方案&#xff1a; <el-table-columnprop"mlname"label"名称"align"center"width"180"><template slot-scope"scope"><el-buttonv-if&qu…...

MySQL 主从同步异常处理

阅读原文&#xff1a;https://www.xiaozaoshu.top/articles/mysql-m-s-update-pk MySQL 做双主&#xff0c;遇到的这个错误&#xff1a; Could not execute Update_rows event on table ... Error_code: 1032是 MySQL 主从复制时的经典错误之一&#xff0c;通常表示&#xff…...

二维FDTD算法仿真

二维FDTD算法仿真&#xff0c;并带完全匹配层&#xff0c;输入波形为高斯波、平面波 FDTD_二维/FDTD.zip , 6075 FDTD_二维/FDTD_31.m , 1029 FDTD_二维/FDTD_32.m , 2806 FDTD_二维/FDTD_33.m , 3782 FDTD_二维/FDTD_34.m , 4182 FDTD_二维/FDTD_35.m , 4793...