策略模式——多重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("提交成功!");}
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/111061.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

solidworks 2024新功能之--保存为低版本 硕迪科技

大家期盼已久的SOLIDWORKS保存低版本文件功能来了&#xff0c;从SOLIDWORKS 2024 开始&#xff0c;您可以将在最新版本的SOLIDWORKS 中创建的SOLIDWORKS零件、装配体和工程图另存为SOLIDWORKS 早期版本的全功能文档&#xff08;完成的特征树与相关参数&#xff09;。 将文件另…

跟我一起写个虚拟机 .Net 7(三)- 安装LC-3 模拟器和编译器

LC-3&#xff08;Little Computer 3&#xff09; 是一门教学用的虚拟计算机模型&#xff0c;主要是为了方便学生了解简单化的计算机结构。 主要想学习《计算机系统概论》上的案例&#xff0c;基本都是通过LC-3 模拟器和LC-3编译器来的&#xff0c;所以&#xff0c;把安装的方式…

Kotlin中的逻辑运算符

在Kotlin中&#xff0c;逻辑运算符用于对布尔值进行逻辑运算。Kotlin提供了三个逻辑运算符&#xff1a;与运算&#xff08;&&&#xff09;、或运算&#xff08;||&#xff09;和非运算&#xff08;!&#xff09;。下面对这些逻辑运算符进行详细介绍&#xff0c;并提供示…

第1章 入门

当今&#xff0c;图形编程是基于着色器的&#xff0c;也就是说&#xff0c;有些程序是基于C或Java等标准程序语言编写的&#xff0c;并运行在中央处理器上&#xff08;CPU&#xff09;&#xff1b;另一些是用专用的着色器语言编写的&#xff0c;直接运行在图形处理单元&#xf…

数据库管理-第111期 Oracle Exadata 02-硬件构成(20231017)

数据库管理-第111期 Oracle Exadata 02-硬件构成&#xff08;202301017&#xff09; 新开的坑&#xff0c;感觉一般般&#xff0c;还是坚持写下去吧。 1 过去和Exadata相关的博文 这里集合汇总一下之前写过的和Exadata相关的文章&#xff1a; 数据库管理-第三十七期 我搞挂了…

搜维尔科技:“虚实结合” 体验式人机验证技术,助力通用汽车开启研发新篇章

虚拟现实(VR)技术为制造业带来了巨大的可能性。它使工程师能够以真实世界的比例完整体验他们的设计,就像身临其境一样。通过在VR中模拟制造过程,可以发现并解决许多问题,从而避免在实际生产中投入大量资源后才发现问题。VR模拟使不同团队之间的沟通和协作变得比较直观和高效。这…

SystemVerilog Assertions应用指南 Chapter1.34 :SVA中的多时钟定义

SVA允许序列或者属性使用多个时钟定义来采样独立的信号或者子序列。SVA会自动地同步不同信号或子序列使用的时钟域下面的代码显示了一个序列使用多个时钟的简单例子。 sequence s_multiple_clocks;(posedge clk1) a ##1 (posedge clk2) b; endsequence 序列 s_multiple_clocks…

解决方案|智能制造升级,汽车行业借力法大大电子签进入“快车道”

《“十四五”智能制造发展规划》明确智能制造是制造强国建设的主攻方向&#xff0c;其发展程度直接关乎我国制造业质量水平。发展智能制造对于巩固实体经济根基、建成现代化产业体系、实现新型工业化具有重要作用。 规划明确指出要深入实施智能制造工程&#xff0c;着力提升创…

零基础如何学习自动化测试

现在很多测试人员有些急于求成&#xff0c;没有任何基础想当然的&#xff0c;要在一周内上手自动化测试。 在自动化的过程中时候总有人会犯很低级的问题&#xff0c;有语法问题&#xff0c;有定位问题&#xff0c;而且有人居然连__init__.py 文件名都弄错误&#xff0c;还有将…

【LeetCode】 412. Fizz Buzz

题目链接 文章目录 Python3 【O(n) O(1)】C.emplace_back() 【C 11 之后】 Python3 【O(n) O(1)】 初始版本 class Solution:def fizzBuzz(self, n: int) -> List[str]:ans []for i in range(1, n1):if i % 5 0 and i % 3 0:ans.append("FizzBuzz")elif i % …

AutoSar 学习路线

1 获取Spec 如何获取Autosar SPEC文档&#xff1f; 从官网获取最新的规范文档&#xff0c;网址&#xff1a;https://www.autosar.org/standards。 如果浏览器拦截&#xff0c; 点开高级&#xff0c; 点击继续访问即可。 Autosar 分Classific 和 Adaptive Platform. AUTOSAR分…

Kotlin中的函数定义

在 Kotlin 中&#xff0c;函数是一种重要的语言特性&#xff0c;它用于封装可重复使用的代码块。在本篇博客中&#xff0c;我们将介绍 Kotlin 函数的定义方式&#xff0c;并提供示例代码演示不同类型的函数。 首先&#xff0c;让我们来看一下函数的基本组成部分&#xff1a; …

深度学习(12)之模型训练[训练集、验证集、过拟合、欠拟合]

模型训练[训练集、验证集、过拟合、欠拟合] 在不断补充训练数据集的过程中&#xff0c;发现纯粹增加数据集并不会使得模型效果单向地变好&#xff0c;如果是多目标检测模型的话&#xff0c;常会出现精度变低的现象本文想总结在模型训练时的一些注意事项&#xff0c;比如训练集…

07 创建型模式-单例模式

1.单例模式介绍 单例模式&#xff08;Singleton Pattern&#xff09;是 Java 中最简单的设计模式之一&#xff0c;此模式保证 某个类在运行期间&#xff0c;只有一个实例对外提供服务&#xff0c;而这个类被称为单例类。 2.使用单例模式要做的两件事 保证一个类只有一个实例…

vue3后台管理系统之pinia及持久化集成使用

安装依赖 pnpm i pinia 在src目录下创建store 创建大仓库 //仓库大仓库 import { createPinia } from pinia //创建大仓库 const pinia createPinia() //对外暴露&#xff1a;入口文件需要安装仓库 export default pinia 全局注册pinia 配置用户仓库pinia管理数据 // 创建用…

linux环境下安装jdk1.8

一.下载linux版jdk安装包 可以在官网上下载&#xff0c;也可以自己找一个 官网地址&#xff1a;https://www.oracle.com/java/technologies/downloads/#java8 我这里用的是 jdk-8u291-linux-x64.tar.gz 二. 将jdk上传到Linux机器上 我这里用的是MobaXterm,直接拖拽就可以上传…

Python学习-----Day09

一、利用装饰器来获取函数运行的时间、 #导入time模块 import timedef decorated(fn):def inner():#time.time获取函数执行的时间a time.time() # func开始的时间fn()b time.time() # func结束的时间print(f"{fn.__name__}程序运行的总数时间:{b - a}秒")return…

Qt之自定义插件(单控件,Qt设计师中使用)

文章目录 步骤1.选择项目类型2.设置项目名称3.选择合适的构建套件4.根据实际情况选择插件控件列表6.控件类生成&#xff08;默认勾选项&#xff09;7.构建生成项目及生成库位置&#xff08;默认&#xff09;8.库文件拷贝9.重启Qt查看效果 步骤 1.选择项目类型 如图选择‘其他…

软考-物理安全与环境安全技术

本文为作者学习文章&#xff0c;按作者习惯写成&#xff0c;如有错误或需要追加内容请留言&#xff08;不喜勿喷&#xff09; 本文为追加文章&#xff0c;后期慢慢追加 by 2023年10月 物理安全概念 广义的物理安全则指由硬件&#xff0c;软件&#xff0c;操作人员&#xff…

Android 13.0 第三方无源码apk授予QUERY_ALL_PACKAGES等其他权限的方法

1.概述 在13.0的系统产品中,对于内置第三方低版本app时,会有某些权限的冲突,导致在启动app时,崩溃掉,在查询相关日志发现是报权限的问题,所以就需要在安装解析app的时候,授予权限 2.第三方无源码apk授予QUERY_ALL_PACKAGES等其他权限的方法的核心类 /frameworks/base…