策略模式——多重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 判断操作，逻辑比较复杂，并且处理起来相对麻烦。可以采用策略模式来优化分支代码。 策略模式 💤：是一种行为设计模式，它允许你在运行时根据不同情况选择不同的算法或行为。 设计模式 🤌&…...
CTAmap 1.12版本2013年-2023年省市县矢量数据更新
中国行政区划数据CTAmap 1.12版本更新 从2022年起，笔者开始整理长时间序列的中国行政区划数据，通过以国家基础地理信息矢量数据为基础，以高德、民政部、gadm、乡镇界、村界、各省标准地图等区划矢量数据和相关行政区划变更文字资料为参考&am…...
【Linux初阶】多线程3 | 线程同步，生产消费者模型（普通版、BlockingQueue版）
文章目录 ☀️一、线程同步🌻1.条件变量🌻2.同步概念与竞态条件🌻3.条件变量函数🌻4.条件变量使用规范🌻5.代码案例 ☀️二、生产者消费者模型🌻1.为何要使用生产者消费者模型🌻2.生产者消费者模…...
JUC并发编程——四大函数式接口（基于狂神说的学习笔记）
四大函数式接口 函数式接口：只有一个方法的接口 ，例如：Runnable接口 Function 函数型接口，有一个输入参数，有一个输出 源码： /*** Represents a function that accepts one argument and produces a resul…...
【2】c++11新特性（稳定性和兼容性）—＞超长整型 long long
c11标准要求long long整型可以在不同的平台上有不同的长度，但是至少64位，long long整型有两种： 有符号long long：–对应类型的数值可以使用LL或者ll后缀 long long num1 123456789LL; long long num2 123456789ll;无符号unsign…...
AI算法检测对无人军用车辆的MitM攻击
南澳大利亚大学和查尔斯特大学的教授开发了一种算法来检测和拦截对无人军事机器人的中间人（MitM）攻击。 MitM 攻击是一种网络攻击，其中两方（在本例中为机器人及其合法控制器）之间的数据流量被拦截，以窃听或…...
运维 | 如何在 Linux 系统中删除软链接 | Linux
运维 | 如何在 Linux 系统中删除软链接 | Linux 介绍 在 Linux 中，符号链接（symbolic link，或者symlink）也称为软链接，是一种特殊类型的文件，用作指向另一个文件的快捷方式。 使用方法 我们可以使用 ln…...
Jmeter接口测试：jmeter导入和导出接口的处理
JMeter测试导入接口 利用Jmeter测试上传文件，首先可根据接口文档或者fiddler抓包分析文件上传的接口；如下图： 以下是我通过fiddler所截取的文件上传的接口 1、填写导入接口的信息 查看文件上传栏下的填写信息： 文件名称&#x…...
一文了解 Go fmt 标准库的常用占位符及其简单使用
今天分享的内容是 Go fmt 标准库的常用占位符及其简单使用。如果本文对你有帮助，不妨点个赞，如果你是 Go 语言初学者，不妨点个关注，一起成长一起进步，如果本文有错误的地方，欢迎指出 占位符 通过占位符&a…...
之history)
Linux命令(94)之history
linux命令之history 1.history介绍 linux命令history会记录并显示用户所执行过的所有命令，也可以对其命令进行修改和删除操作。 2.history用法 history [参数] history参数 参数说明-a将当前会话的历史信息追加到历史文件(.bash_history)中-c删除所有条目从而清…...
Prompt 驱动架构设计：探索复杂 AIGC 应用的设计之道？
你是否曾经想过，当你在 Intellij IDEA 中输入一个段代码时，GitHub 是如何给你返回相关的结果的？其实，这背后的秘密就是围绕 Prompt 生成而构建的架构设计。 Prompt 是一个输入的文本段落或短语，用于引导 AI 生成模型执…...
【代码随想录】算法训练营 第三天 第二章 链表 Part 1
目录 链表基础 链表的定义 203. 移除链表元素 题目 思路 代码 直接删除法 虚拟头结点辅助法 707. 设计链表 题目 思路 代码 206. 反转链表 题目 思路 代码 双指针法 递归法 链表基础 链表是一种通过指针串在一起的线性结构，每个节点都由数据域和指…...
winform开发经验（1）——调用Invoke更新UI时程序卡死原因以及解决办法
1、问题代码如下： private void Form1_Load(object sender, EventArgs e){this.Invoke(new Action(()...
JNI 的数据类型以及和Java层之间的数据转换
JNI的数据类型和类型签名 数据类型 JNI的数据类型包含两种：基本类型和引用类型。 基本类型主要有jboolean、jchar、jint等，它们和Java中的数据类型的对应关系如下表所示。 JNI中的引用类型主要有类、对象和数组，它们和Java中的引用类型的对…...
EFLK与logstash过滤
目录 一、Filebeat工作原理： 二、为什么要使用Filebeat： 三、Filebeat和Logstash的区别： 四、logstash 的过滤插件： 五、FilebeatELK 部署： 1. 安装filebeat： 2. 设置 filebeat 的主配置文件࿱…...
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 …...
单例模式之「双重校验锁」
单例模式之「双重校验锁」 单例模式 单例即单实例，只实例出来一个对象。一般在创建一些管理器类、工具类的时候，需要用到单例模式，比如JDBCUtil 类，我们只需要一个实例即可（多个实例也可以实现功能，但是增…...
2023年中国商业版服务器操作系统市场发展规模分析：未来将保持稳定增长[图]
服务器操作系统一般指的是安装在大型计算机上的操作系统，比如Web服务器、应用服务器和数据库服务器等，是企业IT系统的基础架构平台，也是按应用领域划分的三类操作系统之一。同时服务器操作系统也可以安装在个人电脑上。 服务器操作系统分类 …...
BIM如何通过3D开发工具HOOPS实现WEB轻量化？
随着建筑行业的数字化转型和信息建模技术的不断发展，建筑信息模型（BIM）已经成为设计、建造和管理建筑项目的标准。然而，BIM模型通常包含大量的数据，导致在Web上的传输和查看效率低下。为了解决这一挑战，HOO…...
Unity 3D基础——通过四元数控制对象旋转
在这个例子中，通过键盘的左右方向来控制场景中的球体 Sphere 的横向运动，而 Cube 立方体则会一直朝着球体旋转。 1.在场景中新建一个 Cube 立方体和一个 Sphere 球体，在 Inspector 视图中设置 Cube 立方体的坐标为（3，0…...
学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1
每日一言 生活的美好，总是藏在那些你咬牙坚持的日子里。 硬件：OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写，"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...
CocosCreator 之 JavaScript/TypeScript和Java的相互交互
引擎版本： 3.8.1 语言： JavaScript/TypeScript、C、Java 环境：Window 参考：Java原生反射机制 您好，我是鹤九日！ 回顾 在上篇文章中：CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...
基于Docker Compose部署Java微服务项目
一. 创建根项目 根项目（父项目）主要用于依赖管理 一些需要注意的点： 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件，否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...
unix/linux，sudo，其发展历程详细时间线、由来、历史背景
sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...
什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南
文章目录 什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果
【JavaWeb】Docker项目部署
引言 之前学习了Linux操作系统的常见命令，在Linux上安装软件，以及如何在Linux上部署一个单体项目，大多数同学都会有相同的感受，那就是麻烦。 核心体现在三点： 命令太多了，记不住 软件安装包名字复杂&…...
图表类系列各种样式PPT模版分享
图标图表系列PPT模版，柱状图PPT模版，线状图PPT模版，折线图PPT模版，饼状图PPT模版，雷达图PPT模版，树状图PPT模版 图表类系列各种样式PPT模版分享：图表系列PPT模板https://pan.quark.cn/s/20d40aa…...
Web 架构之 CDN 加速原理与落地实践
文章目录 一、思维导图二、正文内容（一）CDN 基础概念1. 定义2. 组成部分 （二）CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 （三）CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 …...
Pinocchio 库详解及其在足式机器人上的应用
Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库，专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性，并提供了一个通用的框架&…...
HDFS分布式存储 zookeeper
hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架，允许使用简单的变成模型跨计算机对大型集群进行分布式处理（1.海量的数据存储 2.海量数据的计算）Hadoop核心组件 hdfs（分布式文件存储系统）&a…...