前言
在前端开发中，表单是必不可少的交互组件。然而，处理表单数据会涉及到很多重复机械的代码，特别是在大型应用中。为了提高开发效率和代码复用性，可以使用 @jsonforms/vanilla-renderers 这个 npm 包。
@jsonforms/vanilla-renderers 是一个基于 JSON 数据的渲染器库。它提供了一系列的渲染器，可以用来渲染表单元素，例如文本框、下拉框、多选框、日期选择器等。这些渲染器封装了大量的表单处理逻辑，使得表单的渲染、验证、提交等操作变得简单易懂。使用该库，你可以少写很多表单处理代码，而关注于更重要的业务逻辑。
安装
可以通过 npm 安装该库：
npm install @jsonforms/vanilla-renderers --save
使用
在使用之前，首先需要准备好 JSON 数据。该数据描述了表单元素的类型、属性和验证规则。以下是一份示例的 JSON 数据：
-- -------------------- ---- ------- - ------- --------- ------------- - ------- - ------- --------- -------- ----- ------------ -- -- ------ - ------- ---------- -------- ----- ---------- -- ---------- --- -- --------- - ------- --------- -------- ----- ------- ----- ---- ----- -- -------- - ------- -------- -------- ------- -------- - ------- --------- ------- ------ ----- ----- ----- ----- - -- ----------- - ------- --------- -------- ----- --------- ------ - -- ----------- -------- ------ --------- -展开代码
接着，需要为每个表单元素指定一个渲染器。@jsonforms/vanilla-renderers 提供了多种渲染器，包括文本框、下拉框、多选框、日期选择器等。这里以文本框、下拉框和日期选择器为例。以下是一份示例的渲染器配置：
-- -------------------- ---- ------- ------ - ---------------- - ---- ------------------------------- ----- --------- - ------------------------- - --------- ------------ ------ - ----- ------- -- ------- - ----- --------- -- -- - --------- ------------ ------ - -------- - - ------ ---- ------ --- -- - ------ ---- ------ --- -- - ------ ----- ------ ---- -- -- -- ------- - ----- --------- ----- ----- ---- ------ -- -- - --------- ------------- ------- - ----- --------- ------- ------- -- -- ---展开代码
该配置定义了三个渲染器：TextField、EnumField 和 DatePicker。每个渲染器都有一个 tester 属性，它表示该渲染器适用的数据类型和格式。其中，TextField 和 EnumField 分别适用于字符串类型的数据，而 DatePicker 适用于日期类型的数据。
最后，在页面中呈现表单元素。需要通过以下两个步骤来初始化表单：
- 初始化 JSON Schema 和 UI Schema：
-- -------------------- ---- ------- ------ - ---------- - ---- ------------------ ------ - ---------------- - ---- ------------------------------- ----- ------ - - ----- --------- ----------- - ----- - ----- --------- ------ ----- ---------- --- -- ---- - ----- ---------- ------ ----- -------- -- -------- ---- -- ------- - ----- --------- ------ ----- ----- ----- ---- ------ -- ------ - ----- -------- ------ ------- ------ - ----- --------- ----- ------ ----- ----- ----- ------ -- -- --------- - ----- --------- ------ ----- ------- ------- -- -- --------- -------- ------ ---------- -- ----- -------- - - ----- ----------------- --------- - - ----- ---------- ------ -------------------- -------- - ------ ------ -- -- - ----- ---------- ------ ------------------- -------- - ------ ------ -- -- - ----- ---------- ------ ---------------------- -------- - ------ ------ -- -- - ----- ---------- ------ --------------------- -------- - ------ ------ -- -- - ----- ---------- ------ ------------------------ -------- - ------ ------ -- -- -- -- ----- ---------- - --- -------------------展开代码
- 初始化渲染器和数据：
-- -------------------- ---- ------- ------ - --------- - ---- -------------- ---------------------------------- - ----- - ----- --- ---- --- ------- --- ------ --- --------- --- -- ------- ----------- --------- --------- ---------- ---------- ---展开代码
其中，JsonFormsVanilla.render('#myForm', options) 用于初始化 JSON 表单，options 是配置项。这里将渲染目标指定为 #myForm，将数据初始化为空数据，并将 JSON Schema 和 UI Schema 配置传递给 JsonFormsVanilla。
示例代码
以下是一个简单的示例代码，演示了如何使用 @jsonforms/vanilla-renderers 渲染表单元素：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----------- ------------ ----- ---------------- ---------------------------------------------------------------------- ----- ---------------- ------------------------------------------------------------------------------------------------ ------- ------ ---- ------------------ ------- ------------------------------------------------- ------- -------------------------------------------------------------- -------- ----- - ---------------- - - ------- ----- ------ - - ----- --------- ----------- - ----- - ----- --------- ------ ----- ---------- --- -- ---- - ----- ---------- ------ ----- -------- -- -------- ---- -- ------- - ----- --------- ------ ----- ----- ----- ---- ------ -- ------ - ----- -------- ------ ------- ------ - ----- --------- ----- ------ ----- ----- ----- ------ -- -- --------- - ----- --------- ------ ----- ------- ------- -- -- --------- -------- ------ ---------- -- ----- -------- - - ----- ----------------- --------- - - ----- ---------- ------ -------------------- -------- - ------ ------ -- -- - ----- ---------- ------ ------------------- -------- - ------ ------ -- -- - ----- ---------- ------ ---------------------- -------- - ------ ------ -- -- - ----- ---------- ------ --------------------- -------- - ------ ------ -- -- - ----- ---------- ------ ------------------------ -------- - ------ ------ -- -- -- -- ----- --------- - ------------------------- - --------- ------------ ------ - ----- ------- -- ------- - ----- --------- -- -- - --------- ------------ ------ - -------- - - ------ ---- ------ --- -- - ------ ---- ------ --- -- - ------ ----- ------ ---- -- -- -- ------- - ----- --------- ----- ----- ---- ------ -- -- - --------- ------------- ------- - ----- --------- ------- ------- -- -- --- ----- ---------- - --- ------------------- ---------------------------------- - ----- - ----- --- ---- --- ------- --- ------ --- --------- --- -- ------- ----------- --------- --------- ---------- ---------- --- --------- ------- -------展开代码
结论
@jsonforms/vanilla-renderers 是一个能够提高表单处理效率和代码复用性的前端库。它封装了大量的表单处理逻辑，提供了多种渲染器和验证规则。使用该库，你可以少写很多表单处理代码，而关注于更重要的业务逻辑。通过本文的介绍和示例，你可以轻松地开始使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/jsonforms-vanilla-renderers
