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

最新推荐文章于 2024-11-01 00:05:53 发布

原创最新推荐文章于 2024-11-01 00:05:53 发布 · 8.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js #开发工具

JavaScript 同时被 2 个专栏收录

7 篇文章

订阅专栏

Vue

2 篇文章

订阅专栏

本文介绍了一种有效的枚举管理方法，包括枚举的统一存放、按需访问及使用技巧。通过对枚举进行集中管理和合理组织，可以显著提高代码的可读性和可维护性。

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

什么是枚举？ 1.枚举key，2.枚举值，3.枚举值描述

gitee源码地址

1. ❌做法

1.是这样吗？

  // 这种？？？
  const userState = {
    0: '离线',
    1: '在线',
    3: '隐身'
  }

2.还是这样？

 const loginState = 0;
 const getUserState = (state) => {
    if (state === 0) {
     	return '离线'
    } else if (state === 1) {
      	return '在线'
    } else if (state === 2) {
      	return '隐身'
    }
 }
// 逻辑判断
if (loginState === 1 || loginState === 2) {
	// do sth...
}

3.痛点

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

2.✅做法

统一管理

以 Vue 项目为例，枚举统一放在, ./src/common/enums/xxxx.js

|-- src 
    |-- common
    |   |   |-- enums
    |   |   |   |-- common.js   # 公共模块
    |   |   |   |-- user.js     # 用户模块
    |   |   |   |-- order.js    # 订单模块
    |   |   |   |-- auth.js     # 权限模块
    |   |   |   |-- ...         # 更多
    |--

统一按需访问

例子1，以 Vue 为例，如果在xxx页面需要使用枚举

<script>
	import { loginStateEnum } from '@enums/user' //用户模块枚举，注意：使用了别名
	export default {
		data() {
			return {
				// 登录状态
				loginState: 1
			}
		},
    	methods: {
	    	// 获取用户状态
	      	getUserState() {
	        	// 解构出来的枚举
	        	const { ON_LINE, OFF_LINE } = loginStateEnum.getValMap()
	        	const { loginState } = this
	        	if (loginState === ON_LINE) {
	        		return '用户已上线呀~'
				} else if (loginState === OFF_LINE) {
					return '用户下线了~~'
				}
	    	}
	    }
	}
</script>

例子2


import { orderStateEnum } from './common/enums/order.js' // 推荐使用按需引入你对应的枚举模块


// 获取枚举值，如：获取订单待发货枚举值
console.log("代发货：--->", orderStateEnum.getVal('AWAIT_SEND_GOODS')) // 1

// 获取多个枚举值,方法 getValList(key1, key2, ...keyn)
console.log("代发货、运输中：--->", orderStateEnum.getValList('AWAIT_SEND_GOODS', 'IN_TRANSIT')) // [0, 1]

// 获取多个枚举值,方法 getValMap(), 再配合es6 解构，是不是美滋滋？？
const { AWAIT_SEND_GOODS, IN_TRANSIT, RECEIVED } = orderStateEnum.getValMap()
console.log(AWAIT_SEND_GOODS, IN_TRANSIT, RECEIVED) // 0, 1

// （获取枚举名、枚举描述、通过枚举值获取枚举描述）等更多方法请看下面文档

2.如何使用？

// 1.引入枚举包装类
import { EnumWrap } from './enum-class.js' //枚举核心模块


// 2.实例化一个用户登录状态枚举
const userLoginStateEnum = new EnumWrap({
  OFF_LINE: [0, '离线'],
  ON_LINE: [1, '在线'],
  STEALTH: [2, '隐身'],
  NOT_BOTHER: [3, '请勿打扰']
})


// 3.在使用模块导入即可， 比如定义了大模块叫 user.js 
import { userLoginStateEnum } from './src/common/enums/user.js'

// es6 解构出想要的枚举值
const { OFF_LINE, ON_LINE, STEALTH, NOT_BOTHER } = userLoginStateEnum.getValMap()

if (userState === OFF_LINE) {
	console.log('用户离线啦~')
} else if (userState === ON_LINE) {
  	console.log('用户在线啦~')
}
// next do sth....

2.内置方法

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