JavaScript业务约束梳理重构

背景

在某云计算业务中，例如针对云硬盘变更后端存储操作，增加了很多约束。这些约束是随着业务的发展不断扩充累加上来，约束越来越复杂，说明信息无法准确的描述清楚当前不能操作变更后端存储是受到了什么约束。用户（甚至相关开发、测试人员）在想使用云硬盘变更后端存储功能时突然发现按钮不存在或者灰化，很短的时间内无法甄别出不能使用的原因。

改造前

js 复制代码

// 灰化约束
disabled: (data: Pick<OperationData, 'status' | 'snaptotal'>) => ['available', 'in-use', 'inner-snapped'].indexOf(data.status || '') === -1 || !isShow(data) || isClusterCreated(data) || data.snaptotal > 0

// 显隐约束
usable: (data) => show(data),

这个操作和角色权限、状态、迁移状态、是否集群创建、是否缓存卷、是否存在快照、容灾场景7个场景来判断。在相对复杂的约束场景下，易用性降低、维护性差。

分解

首先重新整理约束场景，将场景分为两类

角色权限
业务权限(这条数据中的其它字段对这个操作的影响)

角色权限属于顶层约束，即租户角色没有当前操作权限，这个操作一直不能操作。归于显隐约束。

业务权限属于业务约束，即在某些场景或组合场景中，可以操作。归于灰化约束。最复杂的约束场景一般存在于此类约束，精准提示也应用到此类约束。

首先将之前的7个约束场景拆分成原子约束。即构建一个checkList。用包含、不包含、大于、小于、等于、不等于和表达式表达（'=','!=','>','<','in','no-in','expression'）。随即检索执行checkList，发现不满足立即中断检索，精准提示不满足原因、操作建议 。expression表达式属于兜底约束表达，处理复杂场景的约束，前面6种表达无法表示准确的场景（例如：当前操作和全局变量有关，脱离业务本身管制）。

js 复制代码

const checkList = [
    {
      prop: 'status',
      operate: 'no-in',
      value: ['available', 'in-use', 'inner-snapped'],
      msg: t('storage.change-backend-storage.status'),
      checked: false,
    },
    {
      prop: 'migrationStatus',
      operate: 'no-in',
      value: [null, 'error', 'success', 'none'],
      msg: t('storage.change-backend-storage.migrationStatus'),
      checked: false,
    },
    {
      prop: 'isCacheVol',
      operate: '=',
      value: 'true',
      msg: t('storage.change-backend-storage.isCacheVol'),
      checked: false,
    },
    {
      expression: (data) => isClusterCreated(data),
      msg: t('storage.change-backend-storage.isCluster'),
      checked: false,
    },
    {
      expression: (data) => data.snaptotal > 0,
      msg: t('storage.change-backend-storage.snaptotal'),
      checked: false,
    }
];
return checkOperateDisabled(checkList, data);

改造后

备注

针对开发人员来说，相对增大开发成本，建议酌情针对核心业务、复杂业务处理。张弛有度，取舍自若。