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

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

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

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

java 复制代码
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.运用:借助策略模式的思想,我们可以尝试这样写:

java 复制代码
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.我们可以将不同类型的处理逻辑代码全都拿到一个单独的文件当中,然后给出一个统一的函数去供业务使用:

javascript 复制代码
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.在我们需要的文件当中引入上面的配置文件

javascript 复制代码
import { openPop } from './popTypes';

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

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

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

相关推荐
Stark-C1 天前
万物皆可Docker,在NAS上一键部署最新苹果MacOS 15系统
macos·docker·策略模式
bug管理者1 天前
UI自动化测试中公认最佳的设计模式-POM
jenkins·策略模式
RT_01143 天前
设计模式之策略模式
java·设计模式·策略模式
江河湖海3 天前
以Java为例,实现一个简单的命令行图书管理系统,包括添加图书、删除图书、查找图书等功能。
java·开发语言·策略模式
智慧城市20304 天前
109页PPT丨全面优化:制造企业运营生产成本削减战略与实践指南
阿里云·策略模式
monkey_meng6 天前
【Rust中的策略模式实现】
开发语言·rust·策略模式
不会叫的狼7 天前
设计模式-策略模式
设计模式·策略模式
jjjxxxhhh1238 天前
c++设计模式之策略模式
c++·设计模式·策略模式
南城花随雪。9 天前
策略模式、状态机详细解读
策略模式
gjh120810 天前
设计模式:工厂方法模式和策略模式
设计模式·工厂方法模式·策略模式