优化实战 第43期 - 数据字典的设计

在日常的项目研发中，常常会遇到一些下拉框选项或一组（单选/多选）的选择项，比如性别、学历、行业等。通常以 [{ label: '前端显示的文案', value: '后端存储的数据库值' }] 的枚举数据形式作为数据源

那这些数据源应该维护在客户端还是服务端呢？一定要通过设计字典表的形式维护在服务端

---

如果维护在客户端，会带来哪些问题？

• 问题1

  数据源中的业务字段必须要和服务端的数据库字段保持一致，无形中 增加了维护难度

• 问题2

  数据源基本上是不会修改的，但不代表永远不会修改，如果有需要修改，那前端就要修改代码，进行打包、部署，无形中 增加维护成本且效率低下

设计字典表

• 字典类型表

  id	type	type_name	createTime
  1	gender	性别	2021-12-03 15:42:15
  2	education	学历	2021-12-03 15:42:38

  对字典信息分文别类的进行维护

• 字典内容表

  id	label	value	dic_id	createTime
  1	男	male	1	2021-12-03 15:43:15
  2	女	female	1	2021-12-03 15:43:38
  3	大专	specialty	2	2021-12-03 15:44:06
  4	本科	undergraduate	2	2021-12-03 15:44:33

  存放每个类别的字典信息

• 字典表的作用

  对基础数据进行维护，统一数据格式，实现枚举数据的标准化

获取显示数据

• 代码注释

  /**
  * @description 获取显示数据
  * @param {String} type 数据源类型
  * @param {Array | String} ids 回显数据的id
  * @return {String} delimiter 回显数据的分割符
  * @example
  * 
  *   const getDisplayData = getBasicData()
  *   
  *   getDisplayData('ad_target')
  *
  *   [
  *     { value: '1', label: '注册' },
  *     { value: '2', label: '下载' },
  *     { value: '3', label: '关注' }
  *   ]
  *
  *   getDisplayData('ad_target', '2')  // '下载'
  *   getDisplayData('ad_target', '2, 3')  // '下载、关注'
  *   getDisplayData('ad_target', ['2', '3'])  // '下载、关注'
  */
  

• 方法封装

  const getBasicData = (dictionaries = 'basicData') => {
    const basicData = JSON.parse(localStorage.getItem(dictionaries))
    return function (type, ids = '', delimiter = '、') {
      const result = basicData[type]
      if (ids && ids.length) {
        return result.filter(item => ids.includes(item.id)).map(item => item.name).join(delimiter)
      } else {
        return result
      }
    }
  }
  

  basicData 是从服务端获取的字典表枚举数据且存储在本地的健值名称