一种可扩展的自定义表单引擎构建装置和方法

摘要

本发明公开一种可扩展的自定义表单引擎构建装置和方法，属于计算机技术领域，包括标准结构基类、统一的数据流、基类结构中默认的实现、以及用于绘制和编辑的组件；所述标准结构基类用来抽象表达视窗的显示内容和交互方式；所述统一的数据流为结构数据提供统一的出入口和处理处；所述基类结构中默认的实现，提供可扩展的自定义表单引擎默认提供的构建表单的功能；所述绘制和编辑的组件中，绘制组件用于渲染已经定义好的表单，编辑组件用于进行自定义表单引擎的可视化设计。本发明实现了三方无需修改编译发布表单引擎本身源码，就可以扩展表单引擎功能的能力，扩大了业务使用范围，缩减了业务周期和项目复杂度，提高了开发效率。

说明书

技术领域

本发明属于前端可视化与前端工程化技术领域，具体涉及一种可扩展的自定义表单引擎构建装置。

背景技术

现在主流的可视化表单引擎可以实现通过托拉拽的形式，利用事先定义实现好的组件和方法，实现表单的构建。但在和业务系统结合过程中会遇到各种问题，首先，现在主流的表单引擎和业务结合通过拷贝代码的形式，导致表单引擎和业务系统耦合严重，表单引擎版本管理混乱。其次，业务系统往往对表单引擎展示的界面样式，组件的范围和属性有定制化的需求，现在主流的方式是通过修改表单引擎源码的形式实现，导致业务周期和项目复杂度大大增加，开发效率降低。

发明内容

本发明解决的技术问题：提供一种通过设计模式和表单引擎抽象，通过注册一系列标准结构，最终构建和渲染出可扩展的自定义表单引擎的装置和方法。

技术方案：为了解决上述技术问题，本发明采用的技术方案如下：

一种可扩展的自定义表单引擎构建装置，包括：标准结构基类、统一的数据流、基类结构中默认的实现、以及用于绘制和编辑的组件；所述标准结构基类用来抽象表达视窗的显示内容和交互方式；所述统一的数据流为结构数据提供统一的出入口和处理处；所述基类结构中默认的实现，提供可扩展的自定义表单引擎默认提供的构建表单的功能；所述绘制和编辑的组件中，绘制组件用于渲染已经定义好的表单，编辑组件用于进行自定义表单引擎的可视化设计。

作为优选，所述标准结构基类包括注册插件结构、注册视图内容结构、注册可编辑的组件结构以及注册组件编辑属性视图的结构，根据标准结构可写出基础类，该基础类通过设计模式和行为规则来提供方法构成一个近可能无限拓展的以交互更新数据的逻辑基础。

作为优选，所述注册插件结构实现拓展功能和绑定注入API的功能，拓展功能可以在配置不满足行为或者既有能力不满足组件需要的情况下进行修改和新增；绑定注入API实现获取上下文、注册结构、注册全局钩子、获取全局数据流的API来对外暴露FD表单引擎提供的功能。

作为优选，所述注册视图内容结构包括头部视图、核心内容视图、脚部视图、左侧视图、右侧视图、预览视图和清除视图。

作为优选，所述注册可编辑的组件结构包括全局包裹层、区块层以及默认组件。

作为优选，注册组件编辑属性视图的结构定义了默认组件属性的视图实现，包括组件基础属性视图及各默认组件个性的属性视图的实现。

作为优选，定义统一的数据流后，选择框架来构建显示基础，通过基类提供的API，注册和拓展来创造功能区域；接着注册相关功能区域的结构数据来决定和增加当前功能区域显示的内容，当不同区域的不同内容触发了当前区域的功能操作，就会更新数据流，和框架的绑定会造成View视图层的更新。

作为优选，基类结构中默认的实现包括默认插件结构的实现、默认注册视图内容结构的实现、默认可编辑组件属性的实现以及默认组件编辑视图的实现。

一种可扩展的自定义表单引擎构建方法，包括以下步骤：

1)获取功能需求；

2)引入表单引擎对象；

3)根据功能需求，在初始化标准节结构基类对象的时候，构造自定义的注册插件结构、注册视图内容结构、注册可编辑的组件结构以及注册组件编辑属性视图的结构，来覆盖或添加对表单引擎默认的实现。

作为优选，所述表单引擎在结合业务项目使用的时候，采用ES6标准模块化方式，通过import方式引入表单引擎对象，分为绘制和编辑的组件，并按需调用。

有益效果：与现有技术相比，本发明具有以下优点：

本发明的可扩展的自定义表单引擎构建装置，通过设计模式和抽象表单引擎标准结构，将自定义表单引擎抽象成注册插件结构、注册视图内容结构、注册可编辑的组件结构以及注册组件编辑属性视图的结构，定义统一的数据流，实现默认的上述结构，通过绘制和编辑的组件暴露。该装置实现了三方无需修改编译发布表单引擎本身源码，就可以扩展表单引擎功能的能力，扩大了业务使用范围，缩减了业务周期和项目复杂度，提高了开发效率。

可扩展的自定义表单引擎构建方法，通过使用ES6标准模块化方式引入表单引擎对象，并且在初始化FD对象的时候，构造自定义的注册插件结构、注册视图内容结构、注册可编辑的组件结构以及注册组件编辑属性视图的结构，来覆盖或添加对表单引擎默认的实现；业务方可以灵活使用FD对象注入或者获取表单引擎的能力。

附图说明

图1为本发明的一种可扩展的自定义表单引擎构建方法和装置的完成架构图；

图2为可扩展的自定义表单引擎构建方法和装置的未扩展之前表单引擎默认提供的组件及界面；

图3为可扩展的自定义表单引擎构建方法和装置的定义照片墙自定义组件所需要的步骤；

图4为可扩展的自定义表单引擎构建方法和装置的定义照片墙自定义组件上传类型属性的视图所需要的步骤；

图5为可扩展的自定义表单引擎构建方法和装置的扩展自定义的照片墙组件之后表单引擎默认提供的组件及界面；

图6为本可扩展的自定义表单引擎构建方法和装置的验证扩展的自定义的照片墙组件和支持图片上传类型属性视图是否能正常响应界面。

具体实施方式

下面结合具体实施例，进一步阐明本发明，实施例在以本发明技术方案为前提下进行实施，应理解这些实施例仅用于说明本发明而不用于限制本发明的范围。

本发明的可扩展的自定义表单引擎构建装置，包括标准结构基类、统一的数据流、基类结构中默认的实现、以及用于绘制和编辑的组件。

1)标准结构基类FD(class)，包括注册插件结构、注册视图内容结构、注册可编辑的组件结构以及注册组件编辑属性视图的结构。这些结构用来抽象表达视窗的显示内容和交互方式，根据标准结构可以写出一个基础类，该类通过设计模式和行为规则来提供一些方法构成一个近可能无限拓展的以交互(拖拽、编辑)更新数据的逻辑基础，这部分无关框架选择。

注册插件结构定义了拓展能力和绑定注入API的能力，前者可以在配置不满足行为或者既有能力不满足组件需要的情况下进行修改和新增。后者提供获取(context)上下文，注册(registry-*)结构，注册(hook)全局钩子，获取全局数据流(stores)的API来对外暴露FD表单引擎提供的能力。

注册视图内容结构定义了头部视图(header)，核心内容视图(content)，脚部视图(footer)，左侧视图(siderLeft)，右侧视图(siderRight)，预览视图(preview)，清除视图(clear)。

注册可编辑的组件结构定义了Package全局包裹层和Block区块层以及默认组件。Package全局包裹层用于包裹Block区块层和默认组件，提供诸如复制，删除，批注，敏感词校验的组件共性能力。Block区块层用于包裹单个或多个组件，并且支持自身嵌套。默认组件是FD(class)默认提供的组件，目前包括基础组件和高级组件两类，基础组件包括单行、多行、单选框、多选框、下拉框、文本、日期选择器、时间选择器、计数器、评分、滑动输入条、开关以及附件上传。高级组件包括区域、富文本、省市区、级联选择器、子表单、二维表单。

注册组件编辑属性视图的结构定义了默认组件属性的视图实现，包括组件基础属性视图及各默认组件个性的属性视图的实现。基础属性视图提供文本编辑视图、数字编辑视图、选择编辑视图。个性属性视图包括单选框视图、多选框视图、字体颜色视图等。

2)统一的数据流，有了FD(class)的基类并且把数据关联到数据流工具，确保结构数据有统一的出入口和处理处，就可以选择框架来构建显示基础，通过基类FD(class)提供的API(Application Programming Interface，应用程序接口)，可以注册和拓展来创造功能区域(此部分开始使用vue(一套用于构建用户界面的渐进式框架))，有了功能区域，我们接着注册相关区域的结构数据来决定和增加当前功能区域显示的内容，当不同区域的不同内容触发了当前区域的功能操作，就会更新数据流，和框架的绑定会造成视图层(View)的更新。

3)FD(class)基类结构中默认的实现，这些实现包括默认插件结构的实现、默认注册视图内容结构的实现、默认可编辑组件属性的实现以及默认组件编辑视图的实现。通过这些默认结构的实现，可以实现可扩展的自定义表单引擎默认提供的构建表单的能力。

4)FD(class)基类用于绘制(render)和编辑(edit)的组件，绘制(render)组件用于渲染已经定义好的表单，编辑(edit)组件用于进行自定义表单引擎的可视化设计。

本发明的可扩展的自定义表单引擎构建装置，深度抽象了自定义表单引擎的显示内容和交互方式从而形成标准结构，使其可以通过外部初始化FD(class)实例对象，然后注册三方自己的插件结构、视图内容结构、可编辑组件结构以及组件编辑视图结构，调用初始化方法，在无需修改编译发布表单引擎本身源码的前提下，又可以支持自定义扩展表单的目的。定义了单链的数据结构来描述组件和组件之间的层级关系，存储各组件的所有数据。可以为不同层级之间组件和组件联动提供能力。

本发明还公开一种可扩展的自定义表单引擎构建方法，包括以下步骤：

1)获取功能需求；

2)使用ES6标准模块化方式引入表单引擎对象；表单引擎在结合业务项目使用的时候，采用ES6标准模块化方式，通过import(模块化导入)方式引入表单引擎对象，分为绘制和编辑的组件，可以按需结合业务进行调用。

3)根据功能需求，在初始化标准节结构基类对象的时候，构造自定义的注册插件结构、注册视图内容结构、注册可编辑的组件结构以及注册组件编辑属性视图的结构，来覆盖或添加对表单引擎默认的实现。

业务系统在默认表单引擎提供的能力不满足的情况下，可以通过构造自定义的注册插件结构、注册视图内容结构、注册可编辑的组件结构以及注册组件编辑属性视图的结构来扩展，而无需修改编译发布表单引擎本身源码。

下面以业务系统扩展一个照片墙自定义组件为例，详述在无需修改编译发布表单引擎本身源码的前提下，实现扩展，具体步骤如下：

1)查阅FD(class)表单引擎文档，了解其提供的构造函数及标准注册结构的API，了解其对应的界面UI及实现。

2)遵循文档，定义满足业务要求的照片墙自定义组件，根据需求，定义照片墙组件需要的实现支持多图片上传，需要实现选择支持图片上传类型的属性，以满足使用照片墙组件的用户可以规定上传图片类型的需求。

3)遵循文档，定义满足照片墙自定义组件上传类型属性的视图，根据需求，支持图片上传类型的属性，图片上传类型为jpg、jpeg、png、bmp，所以需要使用checkbox视图内容来实现需求。

4)遵循文档，把定制的照片墙组件以及与之匹配的照片墙上传图片类型视图内容在FD(class)初始化的时候进行注册。

5)在业务系统通过ES6标准模块化的方式引入FD(class)，使用绘制(render)组件进行表单引擎的绘制，验证照片墙组件的功能是否满足。

如图2所示为未扩展之前表单引擎默认提供的组件及界面，包括以下结构：

1)注册视图内容结构，包含头部视图(header)，核心内容视图(content)，脚部视图(footer)，左侧视图(siderLeft)，右侧视图(siderRight)等。

2)注册可编辑的组件结构，包括基础组件和高级组件两类，基础组件包括单行、多行、单选框、多选框、下拉框、文本、日期选择器、时间选择器、计数器、评分、滑动输入条、开关以及附件上传。高级组件包括区域、富文本、省市区、级联选择器等。

3)注册组件编辑属性视图的结构，包括单选框视图、多选框视图、字体颜色视图等。

如图3所示为定义照片墙自定义组件，所需要的步骤：

1)定义并实现照片墙组件的样式及功能；

2)定义照片墙组件的可编辑属性及属性值；

3)初始化FD实现，并进行照片墙组件的注册；

如图4所示为定义照片墙自定义组件上传类型属性的视图，所需要的步骤：

1)定义并实现照片墙组件上传类型属性视图；

2)定义并实现上传类型属性视图的样式及功能；

3)初始化FD实现，并进行照片墙组件上传类型属性的注册；

如图5所示为扩展自定义的照片墙组件之后表单引擎默认提供的组件及界面，包括扩展的以下内容：

1)扩展了sliderLeft视图内容区域，基础组件中的照片墙组件。

2)扩展了sliderRight视图内容区域，与照片墙组件对应的支持图片上传类型属性视图。

如图6所示为验证扩展的自定义的照片墙组件和支持图片上传类型属性视图是否能正常响应界面，所需要的步骤：

1)拖拽自定义的照片墙组件；

2)编辑照片墙组件只支持jpg格式；

3)验证照片墙组件是否只能选择jpg格式的照片；

发现，可以正常响应。

由此可见，本发明可以通过无需修改编译发布表单引擎本身源码的前提下，实现扩展，并且通过ES6标准模块化的方式引入，解决了当前表单引擎与业务系统耦合，版本关联混乱，缩短了项目周期，提升了开发效率。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。