当前位置: 首页 > 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));}
}

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

http://www.lryc.cn/news/182266.html

相关文章:

  • 逆强化学习
  • postgresql新特性之Merge
  • 【注解】注解解析与应用场景
  • mysql面试题14:讲一讲MySQL中什么是全同步复制?底层实现?
  • Linux驱动设备号分配与自动创建设备节点
  • 基于MFC和OpenCV实现人脸识别
  • 力扣 -- 377. 组合总和 Ⅳ
  • 阿里云新账户什么意思?老用户、产品首购详细说明
  • C++ YAML使用
  • 十二、Django之模板的继承+用户列表
  • wzsc_文件上传(条件竞争)
  • unplugin-vue-components和unplugin-auto-import插件
  • docker系列文章目录
  • 第80步 时间序列建模实战:GRNN回归建模
  • 《C和指针》笔记33:指针数组
  • C/C++字符函数和字符串函数详解————内存函数详解与模拟
  • CAcUiDockControlBar初始位置 2023/8/19 下午3:51:18
  • CDH6.3.2 的pyspark读取excel表格数据写入hive中的问题汇总
  • 2120 -- 预警系统题解
  • C++入门-day01
  • Android开源 Skeleton 骨架屏 V1.3.0
  • 网络资料搬运(2)
  • SEO搜索引擎
  • 动态规划-状态机(188. 买卖股票的最佳时机 IV)
  • 银行业务队列简单模拟(队列应用)
  • 2023/8/8 下午10:42:04 objectarx
  • Day-06 基于 Docker安装 Nginx 镜像
  • linux入门---信号的保存和捕捉
  • 5.外部中断
  • Mydb数据库问题