使用策略模式优化多重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));
  }
}

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

相关推荐
修道-03231 小时前
【JAVA】二、设计模式之策略模式
java·设计模式·策略模式
Jack黄从零学c++1 天前
设计模式——策略模式(c++)
c++·设计模式·策略模式
南城花随雪。2 天前
Spring框架之策略模式 (Strategy Pattern)
java·spring·策略模式
Fre丸子_2 天前
设计者模式之策略模式
c++·策略模式
超越不平凡2 天前
Spring Plugin与策略模式:打造动态可扩展的应用
spring·策略模式·spring plugin
G皮T3 天前
【设计模式】行为型模式(二):策略模式、命令模式
java·设计模式·策略模式·命令模式·command·strategy
7年老菜鸡6 天前
策略模式(C++)三分钟读懂
c++·qt·策略模式
也无晴也无风雨6 天前
代码中的设计模式-策略模式
设计模式·bash·策略模式
凉辰7 天前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
菜菜-plus7 天前
java设计模式之策略模式
java·设计模式·策略模式