• 售前

  • 售后

热门帖子
入门百科

js如何更好的管理项目中的枚举

[复制链接]
一品菊花茶酪 显示全部楼层 发表于 2022-1-12 12:13:35 |阅读模式 打印 上一主题 下一主题
如何更好的管理项目中的枚举?

   什么是枚举? 1.枚举key,2.枚举值,3.枚举值描述
  gitee源码地址
1. ❌做法

1.是这样吗?

  1.   // 这种???
  2.   const userState = {
  3.     0: '离线',
  4.     1: '在线',
  5.     3: '隐身'
  6.   }
复制代码
2.还是这样?

  1. const loginState = 0;
  2. const getUserState = (state) => {
  3.     if (state === 0) {
  4.              return '离线'
  5.     } else if (state === 1) {
  6.               return '在线'
  7.     } else if (state === 2) {
  8.               return '隐身'
  9.     }
  10. }
  11. // 逻辑判断
  12. if (loginState === 1 || loginState === 2) {
  13.         // do sth...
  14. }
复制代码
3.痛点



  • 枚举东西一旦多了起来,很难维护、管理;
  • 在代码中写0,1,2,3…可读性很差,同事看了无法理解意思;
  • 多个模块使用,定义多套,如果后段更改了值,那么前端就好玩了;
2.✅做法

统一管理

以 Vue 项目为例,枚举统一放在, ./src/common/enums/xxxx.js
  1. |-- src
  2.     |-- common
  3.     |   |   |-- enums
  4.     |   |   |   |-- common.js   # 公共模块
  5.     |   |   |   |-- user.js     # 用户模块
  6.     |   |   |   |-- order.js    # 订单模块
  7.     |   |   |   |-- auth.js     # 权限模块
  8.     |   |   |   |-- ...         # 更多
  9.     |--
复制代码
统一按需访问

Vue 为例,如果在xxx页面需要使用枚举
  1. [/code] [size=5]2.如何使用?[/size]
  2. [code]// 1.引入枚举包装类
  3. import { EnumWrap } from './enum-class.js' //枚举核心模块
  4. // 2.实例化一个用户登录状态枚举
  5. const userLoginStateEnum = new EnumWrap({
  6.   OFF_LINE: [0, '离线'],
  7.   ON_LINE: [1, '在线'],
  8.   STEALTH: [2, '隐身'],
  9.   NOT_BOTHER: [3, '请勿打扰']
  10. })
  11. // 3.在使用模块导入即可, 比如定义了大模块叫 user.js
  12. import { userLoginStateEnum } from './src/common/enums/user.js'
  13. // es6 解构出想要的枚举值
  14. const { OFF_LINE, ON_LINE, STEALTH, NOT_BOTHER } = userLoginStateEnum.getValMap()
  15. if (userState === OFF_LINE) {
  16.         console.log('用户离线啦~')
  17. } else if (userState === ON_LINE) {
  18.           console.log('用户在线啦~')
  19. }
  20. // next do sth....
复制代码
2.内置方法

方法名参数返回值备注getVal(key)key: 枚举中keyNumber、String单个枚举值getValList(key1, key2, …keyn)key: 枚举keyArray,列表枚举值getValMap(key1, key2, …keyn)key: 枚举keyObject,对象枚举值{key1: value1, key2: value2}es6解构使用更佳getName(key)key:枚举keyString,枚举值名字3.备注

建议大家所有枚举放在一个目录统一,如:./common/enums/模块名.js
使用地方再去引入 import { xxxxxEnum } from '@enums/user’
   Q:为什么要这么做?引入?

A: 其实这样更能看出一个模块到底依赖于外部什么内容,对于后期编码很大的方法,从上往下看就知道改模块依赖于外部xxxx模块;
  贴图

注册地方


使用地方



来源:https://blog.caogenba.net/menghaoer/article/details/122408723
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作