• JavaScript 前端枚举库 js-enumerate

    JavaScript 前端枚举库js-enumerate

    Enum is a javascript enumeration module. It works with Node.js and the browser.

    构建Enum对象在JavaScript中使用，可用于枚举定义，前端组件单选、多选等的options选项的定义。

    1. 安装

    可查看版本变更记录ChangeLog

    1.1 NodeJS

    npm install js-enumerate

    import * as Enum from 'js-enumerate';

new Enum([
  { key: 'RED', value: 'red', label: '红色' },
  { key: 'GREEN', value: 'green', label: '绿色' },
]);
// 也可使用字典构造
new Enum({
  Red: 'red',
  green: 'green',
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    1.2 Bower

    <script src="../releases/js-enumerate-latest.min.js">script>
<script>
    new Enum([{ key: 'RED', value: 'red', label: '红色' }]);
script>

    • 1
    • 2
    • 3
    • 4

    ps: 可自行将 releases/js-enumerate-latest.min.js 文件上传到CDN、或者拷贝到项目里引用。

    2 使用

    2.1 constructor构造函数

    new Enum(data, options)

    • 1

    参数说明：

    参数类型说明默认值版本
    dataarray/object初始化枚举成员
    optionsobject配置选项

    options参数说明

    参数类型说明默认值版本
    freezbool初始化枚举成员,只读不允许修改true
    allDefaultValueobject定义刷选默认"全部"的场景{ key: ‘__ALL’, value: ‘’, label: ‘全部’ }

    2.2 register全局注册

    // 在nodejs中定义 global.Enum
// 在浏览器中定义 window.Enum
Enum.register();
// 可以通过key更改对象的名称
Enum.register("JsEnum"); // window.JsEnum

    • 1
    • 2
    • 3
    • 4
    • 5

    2.3 用法示例

    const Color = new Enum([
  { key: 'RED', value: 'red', label: '红色' },
  { key: 'GREEN', value: 'green', label: '绿色' },
]);
// 使用成员值
Color.RED // 'red'
Color.GREEN // 'green'
// 成员个数
Color.length // 2

Color.toJSON(); // 返回数组 [{"key":"RED","value":"red","label":"红色"},{"key":"GREEN","value":"green","label":"绿色"}]
JSON.stringify(Color); // 返回字符串 '[{"key":"RED","value":"red","label":"红色"},{"key":"GREEN","value":"green","label":"绿色"}]'

// 获取成员
const member = Color.getMember('red'); // 返回单个成员对象 {"key":"RED","value":"red","label":"红色"}
member.value === 'red'; // true
member.key; // 'RED'
member.label; // '红色'
Color.getLabel(Color.RED); // '红色'

// 判断枚举值是否合法
Color.has('red'); // true
Color.has('yellow'); // false

// map，forEach和filter函数都可直接使用
Color.map(member => member.label); // ['红色', '绿色']
// 属性成员来自定义枚举的key
Object.keys(Color); // ['RED', 'GREEN']
// 用in是遍历keys
for (const key in Color) {
  console.log(key);
}
// 用of是遍历成员对象
for (const member of Color) {
  console.log(member);
}

// 使用字典构造
const ColorV2 = new Enum({
  Red: 'red',
  green: 'green',
});
ColorV2.toJSON(); // [{"key":"Red","value":"red"},{"key":"blue","value":"blue"}]
// 注意区分大小写，字典属性字段为成员的key
ColorV2.Red // 'red'
ColorV2.green // 'green'

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46

    2.4 前端组件中使用

    使用React + Ant Design举例：

    import React from 'react';
import { Select, Radio, Table } from 'antd';
// 可以直接在index.js入口文件中执行Enum.register()，即可全局使用；
import Enum from 'js-enumerate';

const Color = new Enum([
  { key: 'RED', value: 'red', label: '红色' },
  { key: 'GREEN', value: 'green', label: '绿色' },
]);
// 依次应用于 下拉选项、单选框、表格字段的筛选菜单项
const App = () => (
  <>
    {/*使用filters可以选择“全部”*/}