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包,直接下载使用即可

参考

前端如何优雅地使用枚举


相关文章
|
25天前
|
监控 JavaScript 算法
如何使用内存监控工具来定位和解决Node.js应用中的性能问题?
总之,利用内存监控工具结合代码分析和业务理解,能够逐步定位和解决 Node.js 应用中的性能问题,提高应用的运行效率和稳定性。需要耐心和细致地进行排查和优化,不断提升应用的性能表现。
175 77
|
23天前
|
存储 缓存 监控
如何使用内存监控工具来优化 Node.js 应用的性能
需要注意的是,不同的内存监控工具可能具有不同的功能和特点,在使用时需要根据具体工具的要求和操作指南进行正确使用和分析。
66 31
|
26天前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
20天前
|
移动开发 缓存 前端开发
深入理解前端路由:原理、实现与应用
本书《深入理解前端路由:原理、实现与应用》全面解析了前端路由的核心概念、工作原理及其实现方法,结合实际案例探讨了其在现代Web应用中的广泛应用,适合前端开发者和相关技术人员阅读。
|
24天前
|
JavaScript 前端开发 API
深入理解Node.js事件循环及其在后端开发中的应用
本文旨在揭示Node.js的核心特性之一——事件循环,并探讨其对后端开发实践的深远影响。通过剖析事件循环的工作原理和关键组件,我们不仅能够更好地理解Node.js的非阻塞I/O模型,还能学会如何优化我们的后端应用以提高性能和响应能力。文章将结合实例分析事件循环在处理大量并发请求时的优势,以及如何避免常见的编程陷阱,从而为读者提供从理论到实践的全面指导。
|
23天前
|
JavaScript
如何使用内存快照分析工具来分析Node.js应用的内存问题?
需要注意的是,不同的内存快照分析工具可能具有不同的功能和操作方式,在使用时需要根据具体工具的说明和特点进行灵活运用。
39 3
|
25天前
|
自然语言处理 前端开发 JavaScript
深入理解前端中的 “this” 指针:从基础概念到复杂应用
本文全面解析前端开发中“this”指针的运用,从基本概念入手,逐步探讨其在不同场景下的表现与应用技巧,帮助开发者深入理解并灵活掌握“this”的使用。
|
25天前
|
存储 前端开发 JavaScript
前端中对象的深度应用与最佳实践
前端对象应用涉及在网页开发中使用JavaScript等技术创建和操作对象,以实现动态交互效果。通过定义属性和方法,对象可以封装数据和功能,提升代码的组织性和复用性,是现代Web开发的核心技术之一。
|
27天前
|
JavaScript 前端开发 安全
JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择
本文深入探讨了JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择。JavaScript以其灵活性和广泛的生态支持著称,而TypeScript通过引入静态类型系统,提高了代码的可靠性和可维护性,特别适合大型项目。文章还讨论了结合使用两种语言的优势,以及如何根据项目需求和技术背景做出最佳选择。
46 4
|
27天前
|
机器学习/深度学习 人工智能 JavaScript
JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景
本文探讨了JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景。JavaScript将注重性能优化、跨平台开发、AI融合及WebAssembly整合;TypeScript则强调与框架整合、强类型检查、前端工程化及WebAssembly的深度结合。两者结合发展,特别是在Vue 3.0中完全采用TypeScript编写,预示着未来的Web开发将更加高效、可靠。
40 4
下一篇
DataWorks