FEMessage blog

编码技巧

代码要清晰表达意图

普通写法(魔法数字)

coffeeShop.placeOrder(2)

阅读上面的代码，可以大致明白是要在咖啡店下一个订单，但是，2到底是什么意思？要两杯咖啡，还是下单两次，还是指杯子的大小？

我们搞不清楚。

有人可能会说可以加点注释。

coffeeShop.placeOrder(2) // large cup

现在看起来好一点了。不过请注意，注释不是为了帮写得不好的代码补漏，我们应该养成习惯，用代码沟通。

优雅写法

所以，更清晰的代码书写方式是，定义常量（或枚举），消除魔法数字。

const LARGE_CUP = 2

coffeeShop.placeOrder(LARGE_CUP)

避免重复(提高可维护性)

一个常见的场景是， 一个字段, 比如说状态 ，对应的值有好几个，会渲染成下拉选择框，也会作格式化处理。

普通写法(魔法字符串)

第一直觉写出来的代码都是类似这样的

// select options 配置
{
  $type: 'select',
  $options: [
   {
    label: '待处理',
    value: 1,
    },
    {
    label: '处理中',
    value: 2,
    },
    {
    label: '已处理',
    value: 3,
    }
  ]
}

// table columns 配置
{
  prop: 'status',
  label: '状态',
  minWidth: '50px',
  formatter: row => {
    switch (row.status) {
      case 1:
        return '待处理'
      case 2:
        return '处理中'
      case 3:
        return '已处理'
    }
  }
}

可以发现，类似'待处理'这样的字符串，出现了不止一次，如果要添加一个状态，或修改一下状态的文字描述，就得在各处寻找替换，增加了维护成本。

优雅写法

可以定义一个常量对象，里面包含了状态值与状态文字描述的映射关系。

const STATUS = {
  1: '待处理',
  2: '处理中',
  3: '已处理'
}

则select组件的options可以用这个对象来渲染，table组件的状态列也可以用这个对象来格式化后端字段

// select options 配置
{
  $type: 'select',
  $options: Object.keys(STATUS).map(v => {
    return {
      value: v,
      label: STATUS[v]
    }
  })
}

// table columns 配置
{
  prop: 'status',
  label: '状态',
  minWidth: '50px',
  formatter: row => STATUS[row.status]
}

这样状态的值与文字描述集中起来，且只出现一次，提高了可维护性。

← 履行承诺，交付可用的功能 →