js:前端使用枚举enums的实际应用

简介: js:前端使用枚举enums的实际应用

前端代码中应该避免直接使用接口返回的枚举值:0、1、2、3…

使用语义化的方式来处理枚举值

定义一个枚举对象创建函数

// 创建枚举对象,用于界面显示转换
function createEnumObject(enums) {
  let labels = null
  let values = null
  return {
    getLabels() {
      if (!labels) {
        labels = enums.map((item) => item.label)
      }
      return labels
    },
    getValues() {
      if (!values) {
        values = enums.map((item) => item.value)
      }
      return values
    },
    getLabel(value) {
      let index = this.getValues().indexOf(value)
      if (index > -1) {
        return this.getLabels()[index]
      }
    },
    getValue(label) {
      let index = this.getLabels().indexOf(label)
      if (index > -1) {
        return this.getValues()[index]
      }
    },
    getItem(valueOrLabel) {
      let index = this.getValues().indexOf(valueOrLabel)
      if (index < 0) {
        index = this.getLabels().indexOf(valueOrLabel)
      }
      if (index > -1) {
        return enums[index]
      }
    },
  }
}

创建枚举对象

// 枚举值,用于逻辑判断
const statusEnum = {
  // 待支付
  WaitPay: 0,
  // 已完成
  Success: 1,
  // 已取消
  Cancel: 2,
}
// 枚举值配置,用于属性扩展
const statusEnumConfig = [
  {
    value: statusEnum.WaitPay,
    label: '待支付',
    color: 'yellow',
    // 支付 取消支付
    actions: ['pay', 'cancel'],
  },
  {
    value: statusEnum.Success,
    label: '已完成',
    color: 'green',
    // 查看详情 退款
    actions: ['detail', 'return'],
  },
  {
    value: statusEnum.Cancel,
    label: '已取消',
    color: 'red',
    // 查看详情
    actions: ['detail'],
  },
]
// 枚举值对象,用于数值转换
const statusEnumObj = createEnumObject(statusEnumConfig)

使用示例

console.log(statusEnumObj.getItem(1))
// {
//   value: 1,
//   label: '已完成',
//   color: 'green',
//   actions: [ 'detail', 'return' ]
// }
console.log(statusEnumObj.getValue('已完成'))
// 1
// 没有对应的值返回undefined
console.log(statusEnumObj.getValue(1))
// undefined
// 接口返回的真实数值,转换为显示值
console.log(statusEnumObj.getLabel(1))
// 已完成
// 接口返回的数值,做逻辑判断
console.log(statusEnum.Success == 1);
// true

2022-11-22更新

优化后实现的代码,预留config配置,支持key,传参明确

// enum-util.js
// 增强枚举对象
export function createEnumObject(enums, config = null) {
  let valueKey = (config ? config.valueKey : null) || 'value'
  let labelKey = (config ? config.labelKey : null) || 'label'
  return {
    getItem(value, key = null) {
      for (let item of enums) {
        if (item[key || valueKey] == value) {
          return item
        }
      }
    },
    getColums(key) {
      return enums.map((item) => item[key])
    },
    getColum(column, key, value) {
      let item = this.getItem(value, key)
      if (item) {
        return item[column]
      }
    },
    getLabels() {
      return this.getColums(labelKey)
    },
    getValues() {
      return this.getColums(valueKey)
    },
    getLabel(value, key = null) {
      return this.getColum(labelKey, key || valueKey, value)
    },
    getValue(value, key = null) {
      return this.getColum(valueKey, key || labelKey, value)
    },
  }
}

2022-11-25更新

现在已封装为一个npm包,直接下载使用即可

参考

前端如何优雅地使用枚举


相关文章
|
7天前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
16 2
|
2天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
8天前
|
Rust 前端开发 JavaScript
前端性能革命:WebAssembly在高性能计算中的应用探索
【10月更文挑战第26天】随着Web应用功能的日益复杂,传统JavaScript解释执行模式逐渐成为性能瓶颈。WebAssembly(Wasm)应运而生,作为一种二进制代码格式,支持C/C++、Rust等语言编写的代码在浏览器中高效运行。Wasm不仅提升了应用的执行速度,还具备跨平台兼容性和安全性,显著改善了Web应用的响应速度和用户体验。
23 4
|
7天前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
14 1
|
7天前
|
前端开发 数据管理 测试技术
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第27天】本文介绍了前端自动化测试中Jest和Cypress的实战应用与最佳实践。Jest适合React应用的单元测试和快照测试,Cypress则擅长端到端测试,模拟用户交互。通过结合使用这两种工具,可以有效提升代码质量和开发效率。最佳实践包括单元测试与集成测试结合、快照测试、并行执行、代码覆盖率分析、测试环境管理和测试数据管理。
19 2
|
8天前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
14 3
|
8天前
|
数据可视化 JavaScript 前端开发
数据可视化进阶:D3.js在复杂数据可视化中的应用
【10月更文挑战第26天】数据可视化是将数据以图形、图表等形式呈现的过程,帮助我们理解数据和揭示趋势。D3.js(Data-Driven Documents)是一个基于JavaScript的库,使用HTML、SVG和CSS创建动态、交互式的数据可视化。它通过数据驱动文档的方式,将数据与DOM元素关联,提供高度的灵活性和定制性,适用于复杂数据的可视化任务。 示例代码展示了如何使用D3.js创建一个简单的柱状图,展示了其基本用法。D3.js的链式调用和回调函数机制使代码简洁易懂,支持复杂的布局和交互逻辑。
21 3
|
8天前
|
前端开发 JavaScript 数据可视化
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第26天】前端自动化测试在现代软件开发中至关重要,Jest和Cypress分别是单元测试和端到端测试的流行工具。本文通过解答一系列问题,介绍Jest与Cypress的实战应用与最佳实践,帮助开发者提高测试效率和代码质量。
22 2
|
8天前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
22 2
|
5天前
|
前端开发 JavaScript
JavaScript新纪元:ES6+特性深度解析与实战应用
【10月更文挑战第29天】本文深入解析ES6+的核心特性,包括箭头函数、模板字符串、解构赋值、Promise、模块化和类等,结合实战应用,展示如何利用这些新特性编写更加高效和优雅的代码。
14 0