通过学习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>

无可否认,效果达到了。

实现效果

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

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

优雅设计

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

export class TagType {
  type: string;
}  

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

对于字典值,我们抽象如下:

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

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

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);
  }
}  

第一次尝试写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 : '';
  }

这里,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()),
}

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

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

<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>

现在页面效果是这样的:

页面效果

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

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

与shigen一起,每天不一样!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/520721.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

spring注解驱动系列--声明式事务

一、环境搭建 一、导入依赖 <!-- 数据源、数据库驱动、spring-jdbc模块--> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-jdbc</artifactId> <version>4.3.12.RE…

Dockerfile详解构建镜像

Dockerfile构建企业级镜像 在服务器上可以通过源码或rpm方式部署Nginx服务&#xff0c;但不利于大规模的部署。为提高效率&#xff0c;可以通过Dockerfile的方式将Nginx服务封装到镜像中&#xff0c;然后Docker基于镜像快速启动容器&#xff0c;实现服务的快速部署。 Dockerf…

统一网关 Gateway(黑马程序员)

网关的技术实现 在 SpringCloud 中网关的实现包括两种&#xff1a; gatewayzuul Zuul 是基于 Servlet 的实现&#xff0c;属于阻塞式编程。而 SpringCloudGateway 则是基于 Spring5 中提供的 WebFlux &#xff0c; 属于响应式编程的实现&#xff0c;具备更好的性能。 网关的作…

火柴排队(c++实现)

题目 涵涵有两盒火柴&#xff0c;每盒装有 n 根火柴&#xff0c;每根火柴都有一个高度。 现在将每盒中的火柴各自排成一列&#xff0c;同一列火柴的高度互不相同&#xff0c;两列火柴之间的距离定义为&#xff1a; 其中 ai 表示第一列火柴中第 i 个火柴的高度&#xf…

【OneAPI】贴纸生成API

OneAPI新接口发布&#xff1a;贴纸生成 生成一个10241024像素的贴纸。 API地址&#xff1a;POST https://oneapi.coderbox.cn/openapi/api/stickers 请求参数&#xff08;body&#xff09; 参数名类型必填含义说明prompt提示词是提示词示例&#xff1a;一只可爱的小狗 响应…

网络网络层之(1)IPv4地址

网络网络层之(1)IPv4地址 Author: Once Day Date: 2024年4月1日 一位热衷于Linux学习和开发的菜鸟&#xff0c;试图谱写一场冒险之旅&#xff0c;也许终点只是一场白日梦… 漫漫长路&#xff0c;有人对你微笑过嘛… 全系列文档可参考专栏&#xff1a;通信网络技术_Once-Day的…

嵌入式系统初学者指南

什么是嵌入式系统&#xff1f; 嵌入式系统是一种独立的、基于微处理器的计算机系统。您可以将其视为大型系统的一部分的微型计算机。如今&#xff0c;从洗碗机到波音 747&#xff0c;几乎所有“电子”产品内部都有嵌入式系统。但是&#xff0c;嵌入式系统与笔记本电脑或手机不…

mysql dublewrite 双写缓存机制

mysql dublewrite 双写缓存机制&#xff0c;像不像主板双bois系统&#xff0c; 在MySQL的InnoDB存储引擎中&#xff0c;当进行数据写操作时&#xff0c;会先将数据写入到内存中的缓冲池&#xff08;Buffer Pool&#xff09;&#xff0c;然后异步刷新到磁盘上的数据文件。为了提…

基于巴法云物联网云平台构建可视化控制网页(以控制LED为例)

0 前言 如今大大小小的物联网云平台非常多&#xff0c;但大部分要收取费用&#xff0c;免费的物联网云平台功能则有很多限制使用起来非常不方便。以百度云物联网云平台为例&#xff0c;它的物可视不支持发布主题&#xff0c;等于可视化界面只能作为数据监控而不具备双向通信的…

打造个人高效图床系统:威联通NAS+兰空+PicGo全方位整合教程

1.图床选择 最近因为家里人有使用图床的需求&#xff0c;又担心第三方图床跑路导致数据丢失&#xff0c;恰好家里有个威联通NAS&#xff0c;还有公网IP和域名&#xff0c;既然如此&#xff0c;那就动手自建一个图床吧&#xff0c;毕竟开源的图床应用还是有很多的。 一上来就在…

掌握数据相关性新利器:基于R、Python的Copula变量相关性分析及AI大模型应用探索

在工程、水文和金融等各学科的研究中&#xff0c;总是会遇到很多变量&#xff0c;研究这些相互纠缠的变量间的相关关系是各学科的研究的重点。虽然皮尔逊相关、秩相关等相关系数提供了变量间相关关系的粗略结果&#xff0c;但这些系数都存在着无法克服的困难。例如&#xff0c;…

写JDBC遇到的问题

执行会出现以下错误信息 java.sql.SQLSyntaxErrorException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ? and loginPwd ? at line 1 at com.mysql.cj.jdbc.exceptions…

spark3.x新特性

Adaptive Query Execution自适应查询(SparkSQL) 由于缺乏或者不准确的数据统计信息&#xff08;元数据&#xff09;和对成本的错误估算&#xff08;执行计划调度&#xff09;导致生成的初始执行计划不理想 在Spark3.x版本提供Adaptive Query Execution自适应查询技术 通过在”…

数据结构顺序表的初始化,头插,尾插,头删,尾删,指定位置删除,指定位置插入,查找,销毁(详解)

目录 前言顺序表的介绍静态顺序表动态顺序表一.顺序表的初始化二.销毁扩容顺序表打印顺序表三.头插四.尾插五.头删六.尾删七.指定位置之前&#xff08;包括指定位置&#xff09;的插入八.指定位置数据的删除九.查找全部的代码实现总结 前言 数据结构是什么&#xff1f; 数据结…

碘浊度法与红外相机联用测定食品中维生素C

&#x1f31e;欢迎来到看论文的世界 &#x1f308;博客主页&#xff1a;卿云阁 &#x1f48c;欢迎关注&#x1f389;点赞&#x1f44d;收藏⭐️留言&#x1f4dd; &#x1f31f;本文由卿云阁原创&#xff01; &#x1f4c6;首发时间&#xff1a;&#x1f339;2024年4月6日&…

1.微服务

一、微服务是什么 微服务是一种架构风格&#xff0c;即&#xff0c;一个应用应该是一组小型服务&#xff0c;每个服务器只负责一种服务&#xff0c;服务之间可以通过 HTTP 的方式进行互通。每一个功能元素最终都是一个可独立替换和独立升级的软件单元。 可以说&#xff0c;微…

网络编程套接字应用分享【Linux C/C++ 】【UDP应用 | TCP应用 | TCP线程池小项目】

目录 前提知识 1. 理解源ip&#xff0c;目的ip和Macip 2. 端口号 3. 初识TCP&#xff0c;UDP协议 4. 网络字节序 5. socket 编程 sockaddr类型 一&#xff0c;基于udp协议编程 1. socket——创建套接字 2. bind——将套接字强绑定 3. recvfrom——接受数据 4. s…

c++11的重要特性2

可变参数模板在3中。 目录 ​编辑 1、统一的列表初始化&#xff1a; std::initializer_list&#xff1a; std::initializer_list是什么类型&#xff1a; std::initializer_list使用场景&#xff1a; 让模拟实现的vector也支持{}初始化和赋值 2、声明 auto decltype nul…

「每日跟读」英语常用句型公式 第4篇

「每日跟读」英语常用句型公式 第4篇 1. I’ve decided to ____ 我决定要____了 I’ve decided to take a vacation (我决定要去度假) I’ve decided to change my lifestyle (我决定要改变我的生活方式) I’ve decided to adopt a dog (我决定要收养一条狗了) I’ve dec…

【深度学习环境配置】一文弄懂cuda,cudnn,NVIDIA Driver version,cudatoolkit的关系

【深度学习环境配置】一文弄懂cuda&#xff0c;cuDNN&#xff0c;NVIDIA Driver version&#xff0c;cudatoolkit的关系 NVIDIA Driver version&#xff08;NVIDIA驱动程序&#xff09;CUDAcuDNNcudatoolkit深度学习环境配置顺序 今天突然发现配置的环境有些问题&#xff0c;意…