笔记

项目中的类型和状态管理

这段时间项目迭代比较快，所以很多时候对于记录的状态和类型判断我都是使用的 魔术字符串 的形式，但是这样就与代码形成了 “强耦合”， 不利于后期的维护。

例如这样的代码结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- 用vue template来举例 -->
<template>
    <table>
        <!-- 其它结构 -->
        <td>
            <!-- 直接使用状态值判断 -->
            <a @click='xxx' v-if='record.status === 0'>操作A</a>
            <!-- 使用数组下标判断 -->
            <a @click='xxx' v-eles-if='record.status === status[1].key'>操作B</a>
            <a @click='xxx' v-else'>其他操作</a>
        </td>
        <!-- 其它结构 -->
    </table>
</template>

特别是最近一整个分类的类型和状态的都变更了，所以在业务逻辑内的魔术字符串也需要一个一个文件去同步修改，大部分的都被替换了，但还有一些零碎的地方没有被修改到，导致不断有 BUG 被提上来，这就很头疼了。

所以我就想者怎么把业务逻辑内的魔术字符串使用一种方式替换掉，最开始我想法是把状态集中起来进行管理

阶段一：使用数组来管理 方式 ①

在数组中枚举所有状态，然后调用数组下标的方式去使用。
例如这个示例：

1
2
// order.js
const statusLabels = ['已创建', '申请中', '通过审核', '....']

就可以这样使用 statusLabels[index] 来转换 key 值为 label ，但是这样很明显会有一些问题，比如说：

  1. 这个 key 值不能是负数，虽然可以通过下面的方式来处理，但是有点蠢….
    如果最小的 key 值 为 -2 时，把对应的 状态名 放到数组首位，通过这样转换 status[index + 2]；

  2. 依旧强耦合，在组件的条件判断中还是会使用 key 值，例如：<a @click='xxx' v-if='record.status === 0'>编辑</a>,
    如果将来 增加/删除 状态的时候会还是需要一个一个文件修改。

  3. 只能处理 key - label 的转换，并不能增加其他属性

当然如果单纯只是转换 key 和 label 可以这样使用，这个是项目一开始所使用的方式，后来陆续修改成了 方式 ② 的形式。

阶段二：数组管理 方式 ②

这个阶段因为很多组件复用了订单状态表，并且增加了很多属性，比如说图标等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// order.js
const status = [
    {
        label:'已创建',
        key:0,
        icon: 'exclamation-circle',
    },
    {
        label:'申请中',
        key:1,
        icon: 'clock-circle',
    },
    {
        label:'通过审核',
        key:2,
        icon: 'check-circle',
    },
    // .....
]

转换 key 值为 label 就可以这样使用 status.find(r => r.key===record.status)，然后通过 .属性名 的方式来使用需要的属性，但是这样也会有一些问题，比如说：

  1. 条件判断中语义不明，会出现这样的代码，<a @click='xxx' v-if='record.status === status[1].key'>编辑</a>，除了我之外其他人并不知道 status[1] 是什么意思；
  2. 如果将来 增加/删除 状态的时候会还是需要去同步修改使用下标的组件，不然可能下标错位，当然可以直接追加在最后，但是我有代码洁癖的所以就没办法了。

这个阶段就是我写这篇笔记时的管理，因为项目的 v1.2.x 版本 状态码整体调整了一次，后续状态码一直有小范围的改动，所以出现了需要大面积替换魔术字符串的情况。

那么我就在考虑如何在状态管理的文件中 枚举一次 所有状态，来处理转换状态标签和操作的判断条件，如果后续如果状态码有改动也方便维护的处理方式，就有之后两个阶段的处理方式

阶段三：使用对象来管理

这个阶段有考虑过使用 Map 数据结构 因为可以遍历，但是在取值的时候会比较麻烦，并不能直接使用 链式（变量属性）来使用。

所以使用对象来管理，并且使用 Object.values 来返回所有状态数组，例如以下示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// order.js
const status = {
    created:{
        label:'已创建',
        key:0
    },
    pending:{
        label:'申请中',
        key:1
    },
    approved:{
        label:'通过审核',
        key:12
    },
    // .....
}
const statusList = Object.values(status)

// 转换
const getOrderStatus = function(key){
  const f = statusList.find(item => item.key === key)
  return f || status.created
}

这个时候可以通过 getOrderStatus 函数来处理 key-label 的转换，并且可以使用 链式（变量属性）的方式去处理判断条件。

1
<a @click='xxx' v-if='record.status === status.created.key'>编辑</a>

那这样就可以很方便的来 转换状态 和 在判断条件中使用，并且不用担心语义化的问题。

但是这边又出现了一个问题，比如说：

在用户下的客户类别中的付费用户，如果单纯使用一个 user.js 来管理，并且使用 user.customer.member.key 去判断是否展示操作内容，但是这样的话，在管理端的用户列表中，去替换用户类型的 key 为 label 就比较麻烦，因为层级会比较深，Object.values 只会返回一层，如果一个一个拿出来手动放到一个数组里边有会显得很呆。

所以！

阶段四：对集中管理文件中的对象拆分

因为如果同一个列别中有多级分类的话，就类似上边的例子，user.customer.member 这种用户类别。所以这个时候就把 user.js 拆分成多个文件，然后再 import 进来，这样既可以在状态判断和label转换的时候引入需要的文件就可以了。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
// customer.js
const customer = {
    normal:{ /*...*/ },
    member:{ /*...*/ },
    // ...
}
const customerTypes = Object.values(customer)
const getCustomerType = function (key) {
  const record = customerTypes.find(record => record.key === key)
  return record || { label: '未指定', key: 0 }
}
export { customer, customerTypes, getCustomerType }
1
2
3
4
5
6
7
8
9
10
11
12
13
// agent.js
const agent = {
    province:{ /*...*/ },
    area:{ /*...*/ },
    // ...
}
const agentTypes = Object.values(agent)

const getAgentType = function (key) {
  const record = agentTypes.find(record => record.key === key)
  return record || { label: '未指定', key: 0 }
}
export { agent, agentTypes, getAgentType }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// user.js
import { customer, customerTypes } from "./customer.js"
import { agent, agentTypes } from "./agent.js"

const user = {
  customer:customer,
  agent:agent,
  // 一些单独的其它类型
  xxxx:{ /*...*/ },
  xxxx:{ /*...*/ }
  // ...
}
const allUserTypeList = [
  ...customerTypes,
  ...agentTypes,
  users.xxxx,
  users.xxxx,
]

// 获取账户角色类型
const getAccountType = function (type, key = 'key') {
  const finder = allUserTypeList.find(item => item[key] === type)
  return finder || { label: '未指定', key: 0 },
}

确定是用户类型的时候，只需要 import 对应的 角色.js 的就可以，如果不确定类型的时候就可以使用 user.js 来使用 user.xxx.xxx 来使用对应的角色类型数据，或者用 getAccountType 来获取类型。

现在我是用这种方式来管理状态的，但是我觉得还是有一些问题，准备看一下前人是否已经总结出来这种模式，所以准备把之前买来的设计模式大概翻看一下，看看有没有可用的，也算把自己的基础能力完善起来。


尾声

我在 Segmentfault 上的问题帖：项目中前端部分关于订单状态管理的一些疑问，如果有更好的想法，可以直接评论，或者 📧 Mail给我