CN112685037A - 一种前端表单组件化编排数据绑定及校验的实现方法 - Google Patents

Abstract

本发明提供了一种前端表单组件化编排数据绑定及校验的实现方法，包括：利用组件原生JS能力，扩展HTML属性：利用HTML数据岛能力完成数据的自动绑定：利用JS的原生扩展能力完成单组件的多样式数据校验，及组件间的关联数据校验。本发明所述的前端表单组件化编排数据绑定及校验的实现方法通过重构前端组件，增强数据的自我绑定能力和组件的数据校验能力，最大化增强前端研发持续自动化能力。

Description

一种前端表单组件化编排数据绑定及校验的实现方法

技术领域

本发明属于前端开发技术领域，尤其是涉及一种前端表单组件化编排数据绑定及校验的实现方法。

背景技术

WEB化场景，无论是基于PC，还是基于移动APP，页面渲染必不可少，按传统的人肉开发模式耗时耗力。特别是不太适合当前移动互联网场景下的“小步快跑”的敏捷研发模式。基于此，逐步构建快捷的可视化的组件式前端开发模式，对推进项目前端工程的持续化敏捷构建具有极大的现实意义。

目前的一些开源的BPM项目，主要是完成页面的可视化布局，缺少或者较弱支持组件校验，且数据绑定自动化程度低，操作不方便。

发明内容

有鉴于此，本发明旨在提出一种前端表单组件化编排数据绑定及校验的实现方法，以解决目前的一些开源的BPM项目，主要是完成页面的可视化布局，缺少或者较弱支持组件校验，且数据绑定自动化程度低，操作不方便的问题。

为达到上述目的，本发明的技术方案是这样实现的：

一种前端表单组件化编排数据绑定及校验的实现方法，包括：

利用组件原生JS能力，扩展HTML属性：

利用HTML数据岛能力完成数据的自动绑定：

利用JS的原生扩展能力完成单组件的多样式数据校验，及组件间的关联数据校验。

进一步的，数据的自动绑定的方法如下：

在画布加载需要渲染的API接口，利用API接口解析出数据Title栏位、数据格式、数据的分组信息元数据信息，并根据元数据渲染对应的页面空间，同时在页面生成数据岛控件嵌入，完成对应数据绑定操作。

进一步的，如果数据格式为JSON，需要转换为XML。

进一步的，渲染页面空间包括渲染table组件、渲染表单组件、渲layoutz组件。

进一步的，所述单组件的多样式数据校验方法如下：

S1、加载API接口描述；

S2、获取绑定字段模式；

S3、补充预置基本校验；

S4、判断是否有MOCK描述；如果有，则根据MOCK语法生成校验规则，然后注册事件监听，如果没有，则直接进入注册事件监听。

进一步的，所述的组件间的关联数据校验方法如下：

组件间联动数据有效，需要手段配置，如果需要补充联动校验，对应控件会拉取画布内有效的具备数据绑定能力的组件，作为目标组件供待关联组件选择，并且进行流程式编排完成联动校验。

相对于现有技术，本发明所述的前端表单组件化编排数据绑定及校验的实现方法具有以下优势：

本发明通过重构前端组件，增强数据的自我绑定能力和组件的数据校验能力，最大化增强前端研发持续自动化能力，具有：轻量化，基于XML编排，可阅读性强；基于JS原生，即插即用，兼容性好；简单易用，低代码，自动化程度高等优点。

附图说明

构成本发明的一部分的附图用来提供对本发明的进一步理解，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1为本发明所述的数据自动绑定流程图；

图2为本发明单组件的多样式数据校验流程图；

图3为本发明组件间的关联数据校验流程图。

具体实施方式

需要说明的是，在不冲突的情况下，本发明中的实施例及实施例中的特征可以相互组合。

下面将参考附图并结合实施例来详细说明本发明。

组件基于原生JS能力，扩展HTML5属性。借助HTML数据岛能力完成数据的自动绑定，借助JS的原生扩展能力完成单组件的多样式数据校验，及组件间的关联数据校验。

1、数据绑定

数据自动绑定解析流程如图1所示，通过在画布加载需要渲染API接口，根据API(若格式为JSON，需要转换为XML，HTML原生数据岛仅支持XML格式数据)解析出数据Title栏位，数据格式，数据的分组信息等元数据信息，并根据元数据渲染对应的页面空间。同时在页面生成数据岛控件嵌入，完成对应数据绑定操作。

2、组件内数据校验

如图2所示，组件内校验规则充分利用API接口定义及Mock描述，生成校验规则。如字段定义为日期型，则渲染为日期空间(日期控件带日期格式校验)；非空要求补充require＝true描述；整型字段填充％d正则；数据字典则调用数据字典规则。

3、组件间联动数据有效校验

如图3所示，组件间联动数据有效，需要手段配置，如需要补充联动校验，对应控件会拉取画布内有效的具备数据绑定能力的组件，作为目标组件供待关联组件选择，并且进行简单的流程式编排完成联动校验。

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及方法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

在本申请所提供的几个实施例中，应该理解到，所揭露的方法和系统，可以通过其它的方式实现。例如，以上所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。上述单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本发明实施例方案的目的。

最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围，其均应涵盖在本发明的权利要求和说明书的范围当中。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (6)

1.一种前端表单组件化编排数据绑定及校验的实现方法，其特征在于，包括：

利用组件原生JS能力，扩展HTML属性：

利用HTML数据岛能力完成数据的自动绑定：

利用JS的原生扩展能力完成单组件的多样式数据校验，及组件间的关联数据校验。

2.根据权利要求1所述的前端表单组件化编排数据绑定及校验的实现方法，其特征在于，数据的自动绑定的方法如下：

在画布加载需要渲染的API接口，利用API接口解析出数据Title栏位、数据格式、数据的分组信息元数据信息，并根据元数据渲染对应的页面空间，同时在页面生成数据岛控件嵌入，完成对应数据绑定操作。

3.根据权利要求2所述的前端表单组件化编排数据绑定及校验的实现方法，其特征在于：如果数据格式为JSON，需要转换为XML。

4.根据权利要求2所述的前端表单组件化编排数据绑定及校验的实现方法，其特征在于：渲染页面空间包括渲染table组件、渲染表单组件、渲layoutz组件。

5.根据权利要求1所述的前端表单组件化编排数据绑定及校验的实现方法，其特征在于，所述单组件的多样式数据校验方法如下：

S1、加载API接口描述；

S2、获取绑定字段模式；

S3、补充预置基本校验；

S4、判断是否有MOCK描述；如果有，则根据MOCK语法生成校验规则，然后注册事件监听，如果没有，则直接进入注册事件监听。

6.根据权利要求1所述的前端表单组件化编排数据绑定及校验的实现方法，其特征在于，所述的组件间的关联数据校验方法如下：

组件间联动数据有效，需要手段配置，如果需要补充联动校验，对应控件会拉取画布内有效的具备数据绑定能力的组件，作为目标组件供待关联组件选择，并且进行流程式编排完成联动校验。

Images