通过学习mayfly-go，我学会了前端如何优雅设计字典值

shigen坚持更新文章的博客写手，擅长Java、python、vue、shell等编程语言和各种应用程序、脚本的开发。记录成长，分享认知，留住感动。
个人IP：shigen

shigen在假期的最后一天早晨起来，翻看了一下博客，一个mayfly-go的开源项目吸引了我的注意力，其实很久之前准备去啃它的，后来看到了代码就放弃了。现在正好有这个决心，打开了mayfly-go官网准备学习一番。发现官方给的更多的是展示的效果，没有详细的设计文档和技术文档，直到我我找到了mayfly-go的语雀文档，认真的研读了一番，最后在枚举值统一管理维护这一块看得我豁然开朗。因为在shigen之前的文章后段数据字典的优雅设计的文墨就提到了我的困惑，也接触了很多稀烂的项目，所以困惑更深，设篇文章的设计正好为我提供了一个巧妙的解决方案。于是，我花了一下午的时间来研究者问题，并写了如下的代码验证。

技术选型：Vue+typescript

字典，我相信对于开发者来说并不陌生。我就直接展开讲述。

设计反例

直接揉在代码里，最后代码就是一坨shi。

<template>
  <div>
    <el-select v-model="type" placeholder="please select type">
      <el-option :key="1" label="菜单" :value="1"></el-option>
      <el-option :key="2" label="资源" :value="2"></el-option>
    </el-select>
    <p>type: {{ getTypeTag(type) }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: 1,
    }
  },
  methods: {
    getTypeTag(type) {
      switch (type) {
        case 1: return "菜单";
        case 2: return "资源";
      }
    },
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

无可否认，效果达到了。

但是，细细想一下，代码的维护起来，维护的成本不言而喻。

我就直接展示我借助【mayfly-go】获得的思路。

优雅设计

首先，我们提取枚举值，或者说字典值的共性：

export class TagType {
  type: string;
}  
1
2
3

结合element-ui el-rag文档，我们标签或者按钮的类型只有几个固定的选项，primary，success,warring等等。所以，我们的标签类型只需要一个type字段，且约束为字符串类型。

对于字典值，我们抽象如下：

export interface EnumValue {
  value: any;
  label: string;
  type: TagType;
}
1
2
3
4
5

一个标签，一个字典值，一个字典类型（可有可无）。抽象一下，就很好办了，我们有了对于字典定义和构造的能力了。

export class TagType {
  type: string;

  constructor(type: string) {
    this.type = type;
  }

  public static of(type = 'primary'): TagType {
    return new TagType(type);
  }

  public static tagTypeInfo(): TagType {
    return TagType.of('info');
  }

  public static tagTypeSuccess(): TagType {
    return TagType.of('success');
  }

  public static tagTypeDanger(): TagType {
    return TagType.of('danger');
  }

  public static tagTypeWarning(): TagType {
    return TagType.of('warning');
  }
}

export interface EnumValue {
  value: any;
  label: string;
  type: TagType;
}

export class EnumValue {
  value: any;
  label: string;
  type: TagType;

  constructor(value: any, label: string, type = TagType.of('primary')) {
    this.value = value;
    this.label = label;
    this.type = type;
  }

  public static of(value: any, label: string, type = TagType.of('primary')): EnumValue {
    return new EnumValue(value, label, type);
  }
}  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

第一次尝试写ts的模块化开发，还有点不习惯，毕竟脑子里还是Java。

OK，现在我们还需要在一堆同类型的字典中获得特定的字典，或者特定的字典属性。继续：

  public static getEnumByValue(enumValues: EnumValue[], value: any): EnumValue | null {
    const enums = Object.values(enumValues);
    return enums.find(enumValue => enumValue.value === value) || null;
  }

  public static getLabelByValue<T extends EnumValue>(enumValues: T[], value: any): string {
    const enums = Object.values(enumValues);
    const enumValue = enums.find(enumItem => enumItem.value === value);
    return enumValue ? enumValue.label : '';
  }
1
2
3
4
5
6
7
8
9
10

这里，ES6的新语法安排上。

现在就是我们业务字段枚举的组装问题，快看看我的设计：

import { EnumValue, TagType } from "@/common/Enum";

export const ResourceTypeEnum = {
  Menu: EnumValue.of(1, "菜单"),
  Resource: EnumValue.of(2, "资源"),
}

export const ResourceStatusTypeEnum = {
  Enable: EnumValue.of(true, "Enable", TagType.tagTypeSuccess()),
  Disable: EnumValue.of(false, "Disable", TagType.tagTypeDanger()),
}
1
2
3
4
5
6
7
8
9
10
11

称不上优雅，但至少看起来简洁明了，容易理解。

在具体的页面上，我们只需要引入对应的资源即可。

<template>
  <div>
    <h2>资源类型</h2>
    <el-select v-model="resourceType" placeholder="please select resouce type">
      <el-option v-for="(resourceType, index) in ResourceTypeEnum" :key="index" :label="resourceType.label"
        :value="resourceType.value"></el-option>
    </el-select>
    <p>label：{{ getLabelByValue(ResourceTypeEnum, resourceType) }}</p>

    <h2>资源类型状态</h2>
    <el-tag v-for="(status, index) in ResourceStatusTypeEnum" :key="index" :type="status.type.type"
      :value="resourceType.value"> {{ status.label }}
    </el-tag>
  </div>
</template>

<script>
import EnumValue from '@/common/Enum';
import { ResourceTypeEnum, ResourceStatusTypeEnum } from '@/views/system/enum';
export default {
  data() {
    return {
      resourceType: 1,
      resourceTypeStatus: false,
      // 需要引入，避免报错undefined
      ResourceTypeEnum,
      ResourceStatusTypeEnum,
    }
  },
  methods: {
    getLabelByValue(enums, value) {
      return EnumValue.getLabelByValue(enums, value);
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

现在页面效果是这样的：

最大的优势就在于我在自己的页面代码看不到任何的字典设计和定义，完全是从一个文件中引入的。修改的话，只需要在enum.ts中修改即可。

当然，我印象中看到了有一种设计是把所有的字典值放在一个文件，如yaml文件中维护的。其实都是简化的方式，比传统的硬编码舒服多了。

与shigen一起，每天不一样！