利用策略模式优化if代码【策略模式】

问题描述

当前我们代码中存在很多的if，else去控制程序的流程，但是这样就会导致一个问题——代码的可扩展性不高。

这里以策略模式进行对if-else代码的优化

实现过程

1.定义策略模式类型

/** 通用类型 */
export namespace Common {
    
  /** * 策略模式 * - 状态 * - true时执行的函数 */
  type StrategyAction = [boolean, () => void];
}

参数中，左侧是boolean类型，右侧是对应的响应函数

2.执行策略模式函数

import {
     Common } from "@/types/common/common"

export function exeStrategyActions(actions: Common.StrategyAction[]) {
    
    actions.some((item) => {
    
        const [flag, action] = item
        if (flag) {
    
            action()
        }
        return flag
    })
}

通过some去执行策略模式，当对应策略模式类型中的flag为true时，执行对应的方法
some的官方定义
The some() method tests whether at least one element in the array passes the test implemented by the provided function. It returns true if, in the array, it finds an element for which the provided function returns true; otherwise it returns false. It doesn’t modify the array.
解释：
这个some方法测试是否数组中至少有一个通过提供的函数。将它变为ture，如果它找到了一个元素符合提供的函数；否则变为false。它不会改变原本数组

也就是说，当some找到了第一个满足的条件后，就不再执行后续方法

3.实例使用

const action :Common.StrategyAction[] = [
    [
      value === '首页',
      () => {
    
        useRouterPush().routerPush('home')
      },
    ],
    [
      value === '提交列表',
      () => {
    
        submitListModal.openModal()
      },
    ],
  ]

  exeStrategyActions(action)

• 当value为首页时，执行跳转路由方法
• 当value为提交列表时，打开拟态框