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

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

相关推荐
小小寂寞的城12 小时前
JAVA策略模式demo【设计模式系列】
java·设计模式·策略模式
来自宇宙的曹先生18 小时前
使用策略模式 + 自动注册机制来构建旅游点评系统的搜索模块
旅游·策略模式
花好月圆春祺夏安3 天前
基于odoo17的设计模式详解---策略模式
设计模式·策略模式
佛祖让我来巡山3 天前
【工厂和策略设计模式妙用】解决接口选择与多重if-else 问题
设计模式·策略模式·工厂模式
刘某某.4 天前
使用工厂模式和策略模式实现布隆过滤器
策略模式
牛奶咖啡137 天前
学习设计模式《十六》——策略模式
学习·设计模式·策略模式·认识策略模式·策略模式的优缺点·何时选用策略模式·策略模式的使用示例
勤奋的知更鸟8 天前
Java 编程之策略模式详解
java·设计模式·策略模式
FreeBuf_8 天前
朝鲜APT组织使用Nim语言恶意软件对macOS发起隐秘Web3与加密货币攻击
macos·web3·策略模式
暮乘白帝过重山8 天前
设计模式篇:灵活多变的策略模式
设计模式·策略模式
GodKeyNet8 天前
设计模式-策略模式
设计模式·策略模式