React/JS中多嵌套条件下按钮文本及动作的优化实现方案咨询

问题背景 #

针对购物车场景的多嵌套条件匹配需求，需对应不同按钮文本及执行动作：

• 购物车为空且所选商品未购买时，按钮显示Get，执行商品获取动作
• 已购买且需追加时，显示Purchase more，执行追加购买动作
• 购买成功时显示Download，执行下载动作

当前采用多分支if、Map实现，存在扩展性差、维护成本高的问题，且触发SonarQube重构提示，需更易维护、低认知复杂度的实现方案。

推荐方案：策略模式 + 规则匹配器 #

核心逻辑 #

将每个「条件-文本-动作」组合封装为独立的策略类，通过匹配器按优先级遍历策略列表，找到与当前状态匹配的策略后执行对应逻辑。这种方式彻底解耦条件判断、文本展示与业务动作，新增场景仅需添加新策略，无需修改原有代码。

实现步骤 #

1. 定义策略接口：统一规范所有按钮策略的核心方法（匹配条件、获取文本、执行动作）
2. 实现具体策略：为每个场景单独实现策略接口，各自维护自身的判断逻辑与业务动作
3. 构建匹配器：维护策略列表（可按优先级排序），负责遍历并返回第一个匹配当前状态的策略
4. 业务侧调用：传入当前购物车/商品状态，通过匹配器获取对应策略后执行操作

代码示例（Java） #

1. 策略接口定义

public interface CartButtonStrategy {
    // 判断当前状态是否匹配该策略
    boolean matches(CartState state);
    // 返回按钮文本
    String getButtonText();
    // 执行对应业务动作
    void executeAction();
}

2. 具体策略实现

// Get按钮策略：购物车空且未购买
public class GetButtonStrategy implements CartButtonStrategy {
    @Override
    public boolean matches(CartState state) {
        return state.isCartEmpty() && !state.isProductPurchased();
    }

    @Override
    public String getButtonText() {
        return "Get";
    }

    @Override
    public void executeAction() {
        // 实现添加商品到购物车的逻辑
        System.out.println("Adding product to cart...");
    }
}

// Purchase more按钮策略：已购买且需追加
public class PurchaseMoreButtonStrategy implements CartButtonStrategy {
    @Override
    public boolean matches(CartState state) {
        return state.isProductPurchased() && state.wantsAddMore();
    }

    @Override
    public String getButtonText() {
        return "Purchase more";
    }

    @Override
    public void executeAction() {
        // 实现追加购买的逻辑
        System.out.println("Processing additional purchase...");
    }
}

// Download按钮策略：购买成功
public class DownloadButtonStrategy implements CartButtonStrategy {
    @Override
    public boolean matches(CartState state) {
        return state.isPurchaseSuccess();
    }

    @Override
    public String getButtonText() {
        return "Download";
    }

    @Override
    public void executeAction() {
        // 实现下载商品的逻辑
        System.out.println("Initiating product download...");
    }
}

3. 策略匹配器

import java.util.List;

public class CartButtonStrategyMatcher {
    private final List<CartButtonStrategy> strategies;

    public CartButtonStrategyMatcher(List<CartButtonStrategy> strategies) {
        this.strategies = strategies;
    }

    // 找到第一个匹配当前状态的策略
    public CartButtonStrategy match(CartState state) {
        return strategies.stream()
                .filter(strategy -> strategy.matches(state))
                .findFirst()
                .orElseThrow(() -> new IllegalArgumentException("No matching strategy found"));
    }
}

4. 业务代码调用

public class CartService {
    public void handleButtonAction(CartState currentState) {
        // 初始化策略列表（实际可通过依赖注入框架动态注入）
        List<CartButtonStrategy> strategies = List.of(
                new DownloadButtonStrategy(),
                new PurchaseMoreButtonStrategy(),
                new GetButtonStrategy()
        );
        CartButtonStrategyMatcher matcher = new CartButtonStrategyMatcher(strategies);
        
        CartButtonStrategy matchedStrategy = matcher.match(currentState);
        System.out.println("Displayed button text: " + matchedStrategy.getButtonText());
        matchedStrategy.executeAction();
    }
}

方案优势 #

• 高扩展性：新增按钮场景仅需实现CartButtonStrategy接口并加入策略列表，完全符合开闭原则
• 低维护成本：每个策略的条件与动作独立封装，修改或定位问题仅需调整对应策略类
• 规避SonarQube提示：消除冗长的if-else分支，代码结构清晰，不会触发分支过多的重构警告
• 低认知复杂度：新开发者可快速理解各策略职责，无需通读全量条件判断逻辑

内容的提问来源于stack exchange，提问作者Asmi