JavaScript 前端枚举库 js-enumerate

JavaScript 前端枚举库js-enumerate

    • 1. 安装
      • 1.1 NodeJS
      • 1.2 Bower
    • 2 使用
      • 2.1 constructor构造函数
      • 2.2 register全局注册
      • 2.3 用法示例
      • 2.4 前端组件中使用
      • 2.5 其他扩展用法
      • 2.6 内置属性
      • 2.7 Enum object API
      • 2.8 其他注意事项
    • 3. 推荐

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 Bower

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

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

2 使用

2.1 constructor构造函数

new Enum(data, options)

参数说明:

参数类型说明默认值版本
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

2.3 用法示例

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

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可以选择“全部”*/}<Select defaultValue={Color.RED} options={Color.filters} /><Radio.Group defaultValue={Color.GREEN} options={Color.options} /><Table colums={[{ key: 'color', title: '颜色', filters: Color.to_filters() }]}/></>
);

2.5 其他扩展用法

const Color = new Enum([{ key: 'RED', value: 'red', label: '红色', disabled: true, color: '#f00' },{ key: 'GREEN', value: 'green', label: '绿色', extra: { msg: '其他信息' }, color: '#0f0' },
]);
const redMem = Color.getMember(Color.RED);
redMem.disabled // true
redMem.color // '#f00'
const greenMem = Color.getMember(Color.GREEN);
greenMem.extra // { msg: '其他信息' }// 以下非读操作会报错
Color.RED = 'red-v2'; // Throws Error
delete Color.RED; // Throws Error
redMem.label = '大红色'; // Throws Error// 可以通过 options.freez 不冻结枚举实例
// 但不建议这么使用,容易出现不可预期的事情
const ColorEdit = new Enum([{ key: 'RED', value: 'red', label: '红色' },{ key: 'GREEN', value: 'green', label: '绿色' },
], { freez: false });
const redEdit = ColorEdit.getMember(ColorEdit.RED);
redEdit.label // '红色'
redEdit.label = '大红色' // true
redEdit.label // '大红色'

2.6 内置属性

  • length 枚举实例所有成员个数
  • options 可用于下拉选择的数组数据
  • filters 可用于刷选的数组数据,比options多一个value=''的成员

2.7 Enum object API

  • forEach,map,filter 这三个方法是对枚举成员迭代器进行遍历操作
  • getMember(value) 通过value获取成员对象
  • has(value) 值value是否在枚举定义的成员当中
  • getLabel(value) 通过value获取成员label用于展示
  • to_filters() 转换成ant design/element中表格table组件filters需要的刷选条件
  • getOptions(option = {}) 根据所有成员信息返回数组数据
  • Enum.register(key = 'Enum')类的静态方法,用于全局注册对象

2.8 其他注意事项

  • 成员key属性只能由数字、大小写字母、中横线、下划线组成的字符串,且不能以__开头;
  • 成员key属性不能使用内置属性字符串,例如length/options/filters不能使用;
  • 成员value不能为nullundefined
  • 成员label不能为null''
  • 枚举实例成员默认都被freez冻结,不允许修改;

3. 推荐

  • 若是后端是Python语言,推荐 py-enum 配合该lib一起使用

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/828644.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

4.18.2 EfficientViT:具有级联组注意力的内存高效Vision Transformer

现有Transformer模型的速度通常受到内存低效操作的限制&#xff0c;尤其是MHSA&#xff08;多头自注意力&#xff09;中的张量整形和逐元素函数。 设计了一种具有三明治布局的新构建块&#xff0c;即在高效FFN&#xff08;前馈&#xff09;层之间使用单个内存绑定的MHSA&#x…

面向初学者的网络安全(二)

原文&#xff1a;annas-archive.org/md5/8570b4b9b47974c7302ce023e1eb9bc8 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 九、攻击和防御方法的演变 当我写下这本书的第一版时&#xff0c;网络安全只是网络安全专家和精明的高管感兴趣的话题。这本书是为了让任何人…

数组、链表、集合、table、map、二叉树、索引、数据库

数据结构&#xff1a;帮助数据快速读写的一种结构模型&#xff0c;数据库是 系统文件索引&#xff08;索引是各种数据结构提高数据检索以平衡数据读写速度&#xff0c;系统文件是存储用户真正的数据&#xff0c;比如业务表数据、文件、图片等等&#xff09; 1.数组&#xff1a…

本地缓存数据存入文件中

文章目录 演示代码本地缓存数据存入文件从文件提取数据到本地缓存工具类 实战初始化操作执行 本地缓存数据存入文件 的线程任务持久化工具类 演示代码 本地缓存数据存入文件 public static void testQ15() {LinkedBlockingDeque<ConcurrentHashMap<String, ConcurrentHa…

【STM32HAL库】外部中断

目录 一、中断简介 二、NVIC 1.寄存器 2.工作原理 3.优先级 4.使用NVIC 三、EXTI 1.简介 2.AFIO&#xff1a;复用功能IO&#xff0c;主要用于重映射和外部中断映射配置​编辑 3. 中断使用 4.HAL库配置使用 一、中断简介 中断的意义&#xff1a;高效处理紧急程序&#xff0c;不会…

[C++初阶]一些类的选择题

本篇就是举例一些类的选择题,用于提高大家的基础,便于记忆。 1.有一个类A&#xff0c;其数据成员如下&#xff1a; 则构造函数中&#xff0c;成员变量一定要通过初始化列表来初始化的是&#xff1a;&#xff08; &#xff09; &#xfeff;class A { ... private: int a; publi…

SPRD Android 14 通过属性控制系统设置显示双栏或者单栏

SPRD Android 14 通过属性控制系统设置显示双栏或者单栏 第一步 确认有添加静态库第二步 验证第三步 修改源码在合适的地方配置 ro.product.is_support_SettingsSplitEnabled 即可。第一步 确认有添加静态库 --- a/packages/apps/Settings/Android.bp +++ b/packages/apps/Set…

Uniapp 报错Uncaught URIError: URI malformed

场景&#xff1a;数据中有url,或者别的不规则的字符&#xff0c;就会报错 解决办法&#xff1a; 1、将复杂参替换 //传复杂参替换encodeContent(key) {const encodeArr [{code: %,encode: %25}, {code: ?,encode: %3F}, {code: #,encode: %23}, {code: &,encode: %26},…

php反序列化逃逸

php反序列化逃逸 逃逸是php中反序列化时的恶意利用&#xff0c;以ctf为例演示 第一段演示 逃逸为ctf反序列化的内容&#xff0c;主要是对序列化对象进行过滤&#xff0c;其中替换串长度不一致&#xff0c;造成字符逃逸。攻击者可以构造恶意的payload&#xff0c;改变对象中的…

MATLAB循环语句

MATLAB 循环语句 在某些情况下&#xff0c;您需要多次执行一个代码块。通常&#xff0c;语句是按顺序执行的。首先执行函数中的第一条语句&#xff0c;然后执行第二条&#xff0c;依此类推。 编程语言提供了各种控制结构&#xff0c;允许更复杂的执行路径。 循环语句允许我们…

猫头虎分享已解决Bug || **Error: ‘Promise‘ is undefined**

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

3.8设计模式——State 状态模式(行为型)

意图 允许一个对象在其内部状态改变时改变它的行为。对象看起来似乎修改了它的类。 结构 Context&#xff08;上下文&#xff09;定义客户感兴趣的接口&#xff1b;维护一个ConcreteState子类的实例&#xff0c;这个实例定义当前状态。State&#xff08;状态&#xff09;定义…

4 -25

1 100个英语单词两篇六级阅读 2 cf补题&#xff1b; 3 仿b站项目看源码 debug分析业务。 上了一天课&#xff0c;晚上去健身。 物理备课&#xff0c;周六去上课腻。 五一回来毛泽东思想期末考试&#xff0c;概率论期中考试。

冯诺依曼体系结构再谈操作系统

前言 前面对基本的指令、权限以及环境开发的基本工具进行了介绍&#xff0c;本期开始我们将进入系统的的学习&#xff0c;例如我们常听的进程等&#xff0c;在进入进程的学习前我们先要铺垫一下&#xff0c;所以本期我们先来介绍一下冯诺依曼体系结构和再谈操作系统&#xff0…

30 番外5 AHK语法应用实战

番外5 AHK语法应用实战 ahk是一种极其轻量,极其易上手,极其方便好用的脚本语言,对于没有编程基础的人来说,可以轻松掌握. 作为一个强大轻量的工具,ahk主要提供了热键宏操作. 什么是热键宏?简单的理解,就是自定义快捷键. AHK使用场景举例 ahk到底有什么用处呢? 1.把一个按键映…

关于TrAXFilter类在动态加载的利用思考以及如何无视构造器获取对象

第一个问题 今天在又看cc3的时候想不通一个问题&#xff0c;就是关于TrAXFilter这个类&#xff0c;我们看到这个类的构造方法 public TrAXFilter(Templates templates) throwsTransformerConfigurationException{_templates templates;_transformer (TransformerImpl) tem…

DRF案例之车厂API

DRF案例之车厂API 目录 DRF案例之车厂API需求urls.pymodels.pyviews.pyMySerializers.pyMyValidate.pyMyFilter.pyMyPagination.pysettings注册自定义类国际化输出 需求 定义车型表(CarModel)&#xff0c;车厂表(CarFactory)&#xff0c;经销商表(Distributor)一个车厂可以生产…

做亚马逊店铺怎么解决网络问题?

在全球电商市场迅速崛起的背景下&#xff0c;亚马逊已成为众多商家拓展海外市场的首选平台。然而&#xff0c;网络问题始终困扰着亚马逊商家&#xff0c;若不能有效解决&#xff0c;不仅影响工作效率&#xff0c;更可能面临店铺被封禁的风险。本文将详细介绍亚马逊店铺运营遇到…

C++_跨平台编译_cmakefile中_添加内容

C_跨平台编译_cmakefile.txt中_添加内容, 包含 cmakefile.txt中 1. 系统架构(aarch64) 2. gcc g编译器位置 3. 架构指定: march 4. 你的root一些基础的lib, bin文件路径 (YOUR_SYSROOT) # 在x86上, 编译linux系统下 aarch64版本的库文件: SET(CMAKE_SYSTEM_NAME Linux) SE…

xgp加速器免费 微软商店xgp用什么加速器

2001年11月14日深夜&#xff0c;比尔盖茨亲自来到时代广场&#xff0c;在午夜时分将第一台Xbox交给了来自新泽西的20岁年轻人爱德华格拉克曼&#xff0c;后者在回忆中说&#xff1a;“比尔盖茨就是上帝。”性能超越顶级PC的Xbox让他们趋之若鹜。2000年3月10日&#xff0c;微软宣…