背景

即便是已经开发过数不清的业务功能，在遇到下面这种情况的时候，第一感觉还是“一个头两个大”。

得想个办法先简化功能内容，再进行方案设计，方能实现务场景从繁琐到简单的蜕变。

简单的思维转换

越是繁琐的业务场景越需要梳理经络，经络捋顺清楚，开发方案也就八九不离十了。

操作按钮展示规则

通过需要判断的值的数组、逻辑运算符、关系运算符，最终确定是否展示布尔值。

1、逻辑运算符

将逻辑运算转换成数组对应的方法

|| (或运算)：多个判断值中有一个符合条件即可，所以使用数组的some方法得到最终的布尔值

&& (与运算)：多个判断值中必须都符合条件即可，所以使用数组的every方法得到最终的布尔值

if (expressionType === 'or') {
  flag = list.some(item => {
    return this.getResByInequalityType(item, record[key], inequalityType);
  });
}
if (expressionType === 'and') {
  flag = list.every(item => {
    return this.getResByInequalityType(item, record[key], inequalityType);
  });
}

2、关系运算符

关系运算符因为有多种，所以使用switch表达式更加清晰。

/**
   * 根据不同的操作符获取不同的结果
   * @param {any} item 可能的值
   * @param {any} value 被判断的值
   * @param {string} type 操作运算符
   */
 getResByInequalityType(item, value, type) {
  switch (type) {
    case '!==':
      return value !== item;
    case '>':
      return value > item;
    case '<':
      return value < item;
    case '>=':
      return value >= item;
    case '<=':
      return value <= item;
    case '==':
      return value == item;
    case '!=':
      return value != item;
    default:
      return value === item;
  }
}

3、注意事项

该方法仅支持单个判断值、同类型逻辑运算符、同类型关系运算符。

嵌套交互的处理

1、为什么要特别处理嵌套交互？

• 会让业务和代码更加清晰，可读性更高。
• 未来需要在中间插入流程时会方便快捷

2、流程图

必要时，流程图可以帮助简化功能

3、实现方案

最初想借助中间件设计模式，但是中间件无法满足单步操作中止并返回的功能。所以在中间件的基础上增加了中止返回的功能。

• 当flag的值是next时，进入下一步;
• 当flag的值是suspend时，中止方法数组继续循环。此时当前方法可进行一些操作比如提示之类;

/**
   * 嵌套交互方法组合 flag的值:suspend-中止，next-进入下一步
   * @param {Array} funcList 列表数据
   */
  nestedInteractionCompose(funcList) {
    let next;
    while (funcList.length > 0) {
      let middle = funcList.shift();
      let flag = middle();
      console.log(flag, 'flag');
      // flag需要存在值 因为可能有些方法是异步的
      if (flag && flag === 'next') {
        next = middle;
      } else {
        // 中止方法列表继续循环
        break;
      }
    }
    return next;
  },

多重支付优惠设置

该功能的 RP 罗列的十分详细，一目了然。但是我们在做开发设计的时候，是需要进行归纳的。

1、功能介绍

这时候，功能说明就排上用场了。上面这个详细的表格，归纳成功能说明，就是下面的三句话，一目了然。

2、实现方案

实现方案可以帮助保障代码质量，同时也帮助前后端提前了解并确定数据的结构。最好包含功能实现的伪代码，有助于阐述逻辑。

上面支付优惠的伪代码：

/**
   * 通过不同订单和用户类型的优惠方式
   * @param {Object} param 订单和用户信息
   * @return {Array} 返回的支付优惠方式
   */
  getEmployerPayTypeListByData(param) {
    const { orderType, userType, configPayDiscountMap } = param;
    let payDiscountTypeList = configPayDiscountMap[orderType][userType];
    const customizedMap = {
      exclusive: 3, // 3-尊享优惠
      enterprise:4, // 3-企业优惠
    }
    // 如果用户类型是尊享用户或企业用户 优惠方式需要新增一种
    if (userType === 'exclusive' || userType === 'enterprise') {
      const customizedDiscountTyp = customizedMap[userType];
      payDiscountTypeList.push(customizedDiscountTyp)
      
    }
    return payDiscountTypeList;
  }

总结

对于复杂的业务场景，无论是UI还是逻辑，都可以通过总结与归纳，将功能拆解，然后在整合，进而剔除冗余的内容，实现从繁琐到简单的蜕变。

作者介绍

非职业「传道授业解惑」的开发者叶一一。

《趣学前端》、《CSS畅想》等系列作者。华夏美食、国漫、古风重度爱好者，刑侦、无限流小说初级玩家。

如果看完文章有所收获，欢迎点赞👍 | 收藏⭐️ | 留言📝。