前言

之前写过一篇文章，<<前端数据字典的最优方案探索>>，主要写的是怎么合理的获取和保存后端的字典表，有兴趣的道友可以进去看一下。

现在我又有了新想法，在我看来，字典应该是属于一些固定不变的数据，比如我们常见的性别，民族，或者一些特殊的状态，这些数据在程序设计之初就应该固定统一下来，并不会随着程序的运行而发生改变，所以这些数据完全就是可以或者应该存放在前端代码中的，我相信这也是大多数同学使用的方式。

怎么在前端维护字典表

创建字典表

代码比较简单，我就不描述思路了，反正就是下面这样，创建一个字典表。

// 字典工厂函数
const createDict = function (dict) {
  return {
    enum: Object.fromEntries(dict.map(({ alias, value }) => [alias, value])),
    options: dict.map(({ label, value }) => ({ label, value })),
    map: Object.fromEntries(dict.map((item) => [item.value, item])),
  };
};

// 菜单类型
export const menuType = createDict([
  { label: "菜单", value: "1", alias: "menu", color: "#87d068" },
  { label: "目录", value: "2", alias: "folder", color: "#108ee9" },
]);

// 性别
export const gender = createDict([
  { label: "男", value: "1", alias: "male", color: "#00b9ff" },
  { label: "女", value: "2", alias: "woman", color: "#f179b4" },
]);

const dict = {
  menuType,
  gender,
};

export default dict;

使用

在 Select 中使用

import { Select } from "antd";
import { gender as genderDict } from "@/utils/dict";

export default function GenderSelect() {
  return <Select options={genderDict.options} />;
}

这里用的是 antd 的 Select 组件来做演示，其他UI组件也基本上是这样

显示

import { Tag } from "antd";
import { gender as genderDict } from "@/utils/dict";

export default function GenderTag() {
  const gender = "1"; // 这是后端返回的，我演示时写死
  const map = genderDict.map[gender];
  return <Tag color={map.color}>{map.label}</Tag>;
}

这里也特意用了一个 Tag 组件来做展示，顺便也展示了一下字典中的的 color 属性，一般为了更好的用户体验还是比较建议使用不同的颜色来区分一下，显示效果如下面这样

逻辑判断

import { gender as genderDict } from "@/utils/dict";

const gender = "1"; // 变量
if (gender === genderDict.enum.male) {
  // 如果是男
} else if (gender === genderDict.enum.woman) {
  // 如果是女
}

这里主要演示的是上面定义的字典表中 alias 字段的作用，如果没有这个字段，在我们日常的逻辑判断中就很可能写出一大量的魔法值