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

使用策略模式优化多重if/else

一、为什么需要策略模式?

        作为前端程序员,我们经常会遇到这样的场景,例如

        进入一个营销活动页面,会根据后端下发的不同 type ,前端页面展示不同的弹窗。

async getMainData() {try {const res = await activityQuery(); // 请求后端数据this.styleType = res.styleType;if (this.styleType === STYLE_TYPE.Reward) {this.openMoneyPop();}else if (this.styleType === STYLE_TYPE.Waitreward) {this.openShareMoneyPop();} else if (this.styleType === STYLE_TYPE.Poster) {this.openPosterPop();} else if (this.styleType === STYLE_TYPE.Activity) {this.openActivityPop();} else if (this.styleType === STYLE_TYPE.Balance) {this.openBalancePop();} else if (this?.styleType === STYLE_TYPE.Cash) {this.openCashBalancePop();}} catch (error) {log.error(MODULENAME, '主接口异常', JSON.stringify(error));}
}

        我们在写的时候也许不觉得,但是当我们去维护别人的代码时,这个代码的话看了就想打人,未来新增一种弹窗类型的话,我们需要到 getMainData 内部去补一个 else if,一不小心可能就会影响到原有的逻辑,并且随着迭代函数会越来越大。但其实每种弹窗是相互独立的,我们并不关心其他弹窗的逻辑。

        此时,就需要策略模式了。

二、策略模式是什么?

        1.定义:策略模式作为一种软件设计模式 (opens new window),指对象有某个行为,但是在不同的场景中,该行为有不同的实现算法。

策略模式:

  • 定义了一族算法(业务规则);
  • 封装了每个算法;
  • 这族的算法可互换代替(interchangeable)

        2.运用:借助策略模式的思想,我们可以尝试这样写:

const strategies = {FirstStrategy() {console.log("Called FirstStrategy");},SecondStrategy() {console.log("Called SecondStrategy");},ThirdStrategy() {console.log("Called ThirdStrategy");}
}const execute = (strategy) => {return strategies[strategy]();
}execute('FirstStrategy')
execute('SecondStrategy')
execute('ThirdStrategy')

        将不同的处理逻辑都放到strategies这个对象里面去统一维护,然后通过给execute()这个方法传递不同的strategy参数,然后通过统一的strategies[strategy]()去根据参数匹配不同的处理逻辑。

三、提炼优化

        当我们要处理的情况较多时,如果将所有的代码都写到一个文件中,看上去还是会有些臃肿,这个时候我们就要考虑是否可以将业务代码与逻辑处理代码分离开来,于是就有了进一步的优化,如下:

        1.我们可以将不同类型的处理逻辑代码全都拿到一个单独的文件当中,然后给出一个统一的函数去供业务使用:

const popTypes = {[STYLE_TYPE.Reward]: function() {...},[STYLE_TYPE.Waitreward]: function() {...},[STYLE_TYPE.Poster]: function() {...},[STYLE_TYPE.Activity]: function() {...},[STYLE_TYPE.Balance]: function() {...},[STYLE_TYPE.Cash]: function() {...},
}export function openPop(type){return popTypes[type]();
}

        2.在我们需要的文件当中引入上面的配置文件

import { openPop } from './popTypes';

        3.在拿到不同参数时再去根据参数,调用方法

async getMainData() {try {const res = await activityQuery(); // 请求后端数据openPop(res.styleType)} catch (error) {log.error(MODULENAME, '主接口异常', JSON.stringify(error));}
}

 现在,我们的代码是不是看上去就非常的清晰了呢?嘿嘿~~

相关文章:

使用策略模式优化多重if/else

一、为什么需要策略模式? 作为前端程序员,我们经常会遇到这样的场景,例如 进入一个营销活动页面,会根据后端下发的不同 type ,前端页面展示不同的弹窗。 async getMainData() {try {const res await activityQuery()…...

逆强化学习

1.逆强化学习的理论框架 1.teacher的行为被定义成best 2.学习的网络有两个,actor和reward 3.每次迭代中通过比较actor与teacher的行为来更新reward function,基于新的reward function来更新actor使得actor获得的reward最大。 loss的设计相当于一个排序问…...

postgresql新特性之Merge

postgresql新特性之Merge 创建测试表测试案例 创建测试表 create table cps.public.test(id integer primary key,balance numeric,status varchar(1));测试案例 官网介绍 merge into test t using ( select 1 id,0 balance,Y status) s on(t.id s.id) -- 当匹配上了,statu…...

【注解】注解解析与应用场景

注解解析与应用场景 1.注解解析 注解解析就是判断类上、方法上、成员变量上是否存在注解,并把注解里的内容给解析出来 2.如何解析注解? 思想:要解析谁上面的注解,就应该先拿到谁(通过反射)如果要解析类…...

mysql面试题14:讲一讲MySQL中什么是全同步复制?底层实现?

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:讲一讲mysql中什么是全同步复制?底层实现? MySQL中的全同步复制(Synchronous Replication)是一种复制模式,主服务器在写操作完成后,必须等待…...

Linux驱动设备号分配与自动创建设备节点

Linux 驱动设备号 对于 Linux 系统,为了识别和管理设备,每个设备便使用一个唯一的编号来标记设备,每个注册到内核的设备都需要一个编号,这个编号就是设备号,为了细分设备号分为主设备号和次设备号。 由于 Linux 的设…...

基于MFC和OpenCV实现人脸识别

基于MFC和OpenCV实现人脸识别 文章目录 基于MFC和OpenCV实现人脸识别1. 项目说明1. 创建项目2. 启动窗口3. 登录窗口-添加窗口、从启动窗口跳转4. 启动窗口-美化按钮5. 登录窗口-美化按钮、雪花视频6. 注册窗口-美化按钮、雪花视频、从启动窗口跳转7. 注册窗口-开启摄像头8. 注…...

力扣 -- 377. 组合总和 Ⅳ

解题步骤&#xff1a; 参考代码&#xff1a; class Solution { public:int combinationSum4(vector<int>& nums, int target) {int nnums.size();vector<double> dp(target1);//初始化dp[0]1;//填表for(int i1;i<target;i){for(int j0;j<n;j){//填表if(…...

阿里云新账户什么意思?老用户、产品首购详细说明

阿里云新账户、老账号、产品首购和同人账号什么意思&#xff1f;阿里云账号分为云新账户、老账户、产品首购、同人账号和同一用户&#xff0c;阿里云官方推出的活动很多是限制账号类型的&#xff0c;常见的如阿里云新用户&#xff0c;什么是阿里云新用户&#xff1f;是指从未在…...

C++ YAML使用

C++工程如何使用YAML-cpp 一、前期准备工作 1、已安装minGW、cmake、make等本地工具。 2、下载YAML-cpp第三方开源代码(一定要下载最新的release版本,不然坑很多)。 3、生成YAML-cpp静态库 (1)在yaml-cpp-master下建立build文件夹; (2)在该文件夹下生成MakaFile文…...

十二、Django之模板的继承+用户列表

模板的继承 新建layout.html&#xff1a; {% load static %} <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><link rel"stylesheet" href"{% static plugins…...

wzsc_文件上传(条件竞争)

打开题目链接&#xff0c;很常见的文件上传框 经过尝试&#xff0c;发现上传东西后会调用upload.php&#xff0c;猜测文件被传到upload目录下 随便传了几个类型的文件&#xff0c;访问upload目录 发现.php文件以及.htaccess、.user.ini这种配置文件都没有传上去 但是通过抓包…...

unplugin-vue-components和unplugin-auto-import插件

unplugin-auto-import&#xff1a;自动按需引入 vue\vue-router\pinia 等的 api unplugin-vue-components&#xff1a;自动按需引入 第三方的组件库组件 和 我们自定义的组件 使用此类插件&#xff0c;不需要手动编写import {xxx} from vue这样的代码了&#xff0c;提升开发效…...

docker系列文章目录

docker系列专栏笔记总算完成了&#xff0c;平时下班比较晚&#xff0c;利用晚上的一些时间整理了这一系列的学习笔记。 docker系列教程包含以下几个方面&#xff1a; docker环境篇 介绍docker环境的搭建&#xff0c;已经管理平台工具(portainer)的简单使用。 docker常用命令篇…...

第80步 时间序列建模实战:GRNN回归建模

基于WIN10的64位系统演示 一、写在前面 这一期&#xff0c;我们使用Matlab进行GRNN模型的构建。 使用的数据如下&#xff1a; 采用《PLoS One》2015年一篇题目为《Comparison of Two Hybrid Models for Forecasting the Incidence of Hemorrhagic Fever with Renal Syndrom…...

《C和指针》笔记33:指针数组

除了创建整型数组一样&#xff0c;也可以声明指针数组。 int *api[10];为了弄清这个复杂的声明&#xff0c;我们假定它是一个表达式&#xff0c;并对它进行求值。下标引用的优先级高于间接访问&#xff0c;所以在这个表达式中&#xff0c;首先执行下标引用。因此&#xff0c;a…...

C/C++字符函数和字符串函数详解————内存函数详解与模拟

个人主页&#xff1a;点我进入主页 专栏分类&#xff1a;C语言初阶 C语言程序设计————KTV C语言小游戏 C语言进阶 C语言刷题 欢迎大家点赞&#xff0c;评论&#xff0c;收藏。 一起努力&#xff0c;一起奔赴大厂。 目录 1.前言 2 .memcpy函数 3.memmove函…...

CAcUiDockControlBar初始位置 2023/8/19 下午3:51:18

2023/8/19 下午3:51:18 CAcUiDockControlBar初始位置 2023/8/19 下午3:52:00 CAcUiDockControlBar的初始位置是根据其在程序代码中的设置而确定的。通常情况下,它的初始位置可以通过以下几种方式进行设置: 使用Create函数:在创建CAcUiDockControlBar对象时,可以调用Cre…...

CDH6.3.2 的pyspark读取excel表格数据写入hive中的问题汇总

需求&#xff1a;内网通过Excel文件将数据同步到外网的CDH服务器中&#xff0c;将CDH中的文件数据写入hive中。 CDH版本为&#xff1a;6.3.2 spark版本为&#xff1a;2.4 python版本&#xff1a;2.7.5 操作系统&#xff1a;CentOS Linux 7 集群方式&#xff1a;yarn-cluster …...

2120 -- 预警系统题解

Description OiersOiers 国的预警系统是一棵树&#xff0c;树中有 &#xfffd;n 个结点&#xff0c;编号 1∼&#xfffd;1∼n&#xff0c;树中每条边的长度均为 11。预警系统中只有一个预警信号发射站&#xff0c;就是树的根结点 11 号结点&#xff0c;其它 &#xfffd;−1…...

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

Neo4j 集群管理:原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

Python Ovito统计金刚石结构数量

大家好,我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构,但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法,可以持续统计各步的金刚石结构,具体代码如下: from ovito…...

Vue3 PC端 UI组件库我更推荐Naive UI

一、Vue3生态现状与UI库选择的重要性 随着Vue3的稳定发布和Composition API的广泛采用&#xff0c;前端开发者面临着UI组件库的重新选择。一个好的UI库不仅能提升开发效率&#xff0c;还能确保项目的长期可维护性。本文将对比三大主流Vue3 UI库&#xff08;Naive UI、Element …...

Windows 下端口占用排查与释放全攻略

Windows 下端口占用排查与释放全攻略​ 在开发和运维过程中&#xff0c;经常会遇到端口被占用的问题&#xff08;如 8080、3306 等常用端口&#xff09;。本文将详细介绍如何通过命令行和图形化界面快速定位并释放被占用的端口&#xff0c;帮助你高效解决此类问题。​ 一、准…...

起重机起升机构的安全装置有哪些?

起重机起升机构的安全装置是保障吊装作业安全的关键部件&#xff0c;主要用于防止超载、失控、断绳等危险情况。以下是常见的安全装置及其功能和原理&#xff1a; 一、超载保护装置&#xff08;核心安全装置&#xff09; 1. 起重量限制器 功能&#xff1a;实时监测起升载荷&a…...

算法250609 高精度

加法 #include<stdio.h> #include<iostream> #include<string.h> #include<math.h> #include<algorithm> using namespace std; char input1[205]; char input2[205]; int main(){while(scanf("%s%s",input1,input2)!EOF){int a[205]…...