CN108363573A

CN108363573A - 一种高效的移动表单设计与渲染方法

Info

Publication number: CN108363573A
Application number: CN201810026766.5A
Authority: CN
Inventors: 石磊; 李伟龙
Original assignee: Shandong Inspur Genersoft Information Technology Co Ltd
Current assignee: Shandong Inspur Genersoft Information Technology Co Ltd
Priority date: 2018-01-11
Filing date: 2018-01-11
Publication date: 2018-08-03

Abstract

本发明提供了一种高效的移动表单设计与渲染方法，所述方法通过对移动表单进行分步式设计，综合出整体配置的设计，根据配置进行动态渲染与响应，并利用基于虚拟DOM技术的前端UI框架提升渲染与响应速度。本发明相对于生成Html，JSON配置具有更高的可读性和可维护性，相对于生成大量的JavaScript文件，由唯一的动态渲染页面进行渲染，也极大的降低了大量表单页面的重复性维护工作，加快了加载速度，减少了数据存储空间和后期维护时间。利用基于虚拟DOM技术的React等前端UI框架，可以极大的提高界面的渲染速度和代码的可读性。

Description

一种高效的移动表单设计与渲染方法

技术领域

本发明涉及企业信息系统的移动表单开发技术领域，具体涉及一种高效的移动表单设计与渲染方法。

背景技术

随着移动信息系统的发展，越来越多的企业部署基于移动端的信息系统。然而对于传统的移动表单开发方式，每个发布表单都会生成大量的存储数据，随着表单数量的增加，数据重复而又冗余，给维护带来很多重复性的工作，工作量大，增加了开发周期。

发明内容

为了解决以上技术问题，各种系统的现状，本发明提出了一种高效的移动表单设计与渲染方法。该方法解决了传统方式代码易读性差，数据重复率高，维护工作量大，渲染和响应速度慢等问题，使移动表单的开发和维护更加方便灵活和高效。

本发明的技术方案是：

一种高效的移动表单设计与渲染方法，所述方法通过对移动表单进行分步式设计，综合出整体配置的设计，根据配置进行动态渲染与响应，并利用基于虚拟DOM技术的前端UI框架提升渲染与响应速度。

虚拟DOM，Virtual DOM 是一个模拟 DOM 树的JavaScript 对象。React使用Virtual DOM 来渲染 UI，当组件状态state有更改的时候，React会自动调用组件的render方法重新渲染整个组件的UI。

React主要的目标是提供一套不同的，高效的方案来更新DOM，不是通过直接把DOM变成可变的数据，而是通过构建“Virtual DOM”，虚拟的DOM，随后React处理真实的DOM上的更新来进行模拟相应的更新。

所述方法内容包括：

在移动表单设计发布时，生成该移动表单的JSON配置数据，依据该配置数据，由动态渲染页面对移动表单进行渲染。

所述方法内容包括：

将移动表单的所有配置属性抽象出来，通过图形化界面展示，并通过设计将数据保存到后台。

所述方法内容包括：

在将移动表单发布时，根据设计时产生的后台数据，经过集成生成已经固定好格式的JSON配置。

所述方法内容包括：

在对移动表单进行渲染时，对JSON配置进行解析，利用虚拟DOM技术加快页面渲染与响应，动态地渲染需要生成的界面。

所述移动表单的设计过程包括：

首先根据移动表单架构和设计功能的需要，抽象出移动表单的所有属性；

然后依据移动表单属性配置的先后顺序分组分类，通过图形化界面，将这些属性分步式呈现给设计者，设计者利用图形化设计页面，根据所需移动表单的业务要求，分步式依次配置出移动表单的属性；

最终移动表单的属性依次保存于后台数据库，通过此模式易于开发者理解开发流程和原理，易于操作。

所述生成发布JSON配置的过程包括：

移动表单加载最新JSON配置时，将表单所有的配置数据综合处理，并生成与该表单对应的JSON配置。

如果自动生成的配置不满足设计需求，需要后期手动处理，也可以在JSON处理窗口输入所需的处理JSON的function（函数），传递该function的参数生成JSON配置，点击生成配置，该function会处理JSON并返回处理后的JSON的配置，通过function来修改JSON配置。

上述操作是为了后期如果设计改动，在需要重新加载JSON配置的时候，可以利用该function恢复之前的手动处理JSON配置的过程，灵活方便，提高工作效率，以JSON配置的形式展现给开发者，有更高的可读性和可维护性。

所述方法内容还包括：

在移动表单的展现过程中，移动表单的渲染页面为单页应用，所有的移动表单统一通过该页面进行渲染，只传递不同的JSON配置，开发人员也只需维护该页面，因此降低了大量表单页面的重复性维护工作。

所述方法内容还包括：

渲染页面根据解析生成的JSON配置对页面进行渲染，例如解析控件的默认值属性，初始化默认值，解析表单控件的类型渲染不同的控件，为解析基于React的表单控件的动态渲染代码示例，基于虚拟DOM技术进行渲染，由于不直接操作DOM，控件发生变化时并不会直接操作所有DOM，只操作变化的DOM，提高了响应速度，优化了用户体验，为移动表单生成页面示例。

本发明的有益效果为：

本发明相对于生成Html，JSON配置具有更高的可读性和可维护性，相对于生成大量的JavaScript文件，由唯一的动态渲染页面进行渲染，也极大的降低了大量表单页面的重复性维护工作，加快了加载速度，减少了数据存储空间和后期维护时间。利用基于虚拟DOM技术的React等前端UI框架，可以极大的提高界面的渲染速度和代码的可读性。

附图说明

图1为本发明原理流程图。

具体实施方式

下面结合具体实施例，对本发明的内容进行更加详细的阐述：

如图1所示，一种高效的移动表单设计与渲染方法，主要通过以下步骤完成：

1.首先将移动表单的所有配置属性抽象出来，通过图形化界面展示，并通过设计将数据保存到后台。

2.发布时根据设计时产生的后台数据，经过集成生成已经固定好格式的JSON配置。

3.在渲染时对JSON配置进行解析，利用虚拟DOM技术加快页面渲染与响应，动态渲染需要生成的界面。

其中：

表单设计页面的架构和展现，首先根据表单架构和设计功能的需要，抽象出表单的所有属性，然后依据表单属性配置的先后顺序分组分类，通过图形化界面，将这些属性分步式呈现给设计者，设计者利用图形化设计页面，根据自己所需表单的业务要求，分步式依次配置出表单的属性，最终表单的属性会依次保存后台数据库，通过此模式易于开发者理解开发流程和原理，易于操作。

表单的发布会生成发布JSON配置，移动表单加载最新JSON配置时，会将表单所有的配置数据综合处理，并生成与该表单对应的JSON配置，如果自动生成的配置不满足设计需求，需要后期手动处理，也可以在JSON处理窗口输入自己所需的处理JSON的function，传递给该function的参数为生成的JSON配置，点击生成配置，该function会处理JSON并返回处理后的JSON的配置，通过function来修改JSON配置，之所以这么处理，是为了后期如果设计改动，需要重新加载JSON配置的时候，可以利用该function恢复之前的手动处理JSON配置的过程，灵活方便，提高工作效率。以JSON配置的形式展现给开发者，有更高的可读性和可维护性。

在移动表单的展现过程中，表单的渲染页面为单页应用，所有的移动表单统一通过该页面进行渲染，只是传递不同的JSON配置，开发人员也只需维护该页面，因此降低了大量表单页面的重复性维护工作。渲染页面会解析生成的JSON配置对页面进行渲染，例如解析控件的默认值属性，初始化默认值，解析表单控件的类型渲染不同的控件，基于虚拟DOM技术的渲染方式，由于不直接操作DOM，控件发生变化时并不会直接操作所有DOM，只会操作变化的DOM，提高了响应速度，优化了用户体验。

以上所述仅为本发明的优选实现方法，但并不限于此，对本领域技术人员来说，本发明实现方法可以有各种变化。凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims

1.一种高效的移动表单设计与渲染方法，其特征在于，所述方法通过对移动表单进行分步式设计，综合出整体配置的设计，根据配置进行动态渲染与响应，并利用基于虚拟DOM技术的前端UI框架提升渲染与响应速度。

2.根据权利要求1所述的一种高效的移动表单设计与渲染方法，其特征在于，所述方法内容包括：

3.根据权利要求2所述的一种高效的移动表单设计与渲染方法，其特征在于，所述方法内容包括：

4.根据权利要求3所述的一种高效的移动表单设计与渲染方法，其特征在于，所述方法内容包括：

5.根据权利要求4所述的一种高效的移动表单设计与渲染方法，其特征在于，所述方法内容包括：

6.根据权利要求5所述的一种高效的移动表单设计与渲染方法，其特征在于，所述移动表单的设计过程包括：

最终移动表单的属性依次保存于后台数据库。

7.根据权利要求5所述的一种高效的移动表单设计与渲染方法，其特征在于，所述生成发布JSON配置的过程包括：

8.根据权利要求7所述的一种高效的移动表单设计与渲染方法，其特征在于，如果自动生成的配置不满足设计需求，在JSON处理窗口输入所需的处理JSON的function，传递该function的参数生成JSON配置，通过function来修改JSON配置。

9.根据权利要求7所述的一种高效的移动表单设计与渲染方法，其特征在于，所述方法内容还包括：

在移动表单的展现过程中，移动表单的渲染页面为单页应用，所有的移动表单统一通过该页面进行渲染，只传递不同的JSON配置。

10.根据权利要求9所述的一种高效的移动表单设计与渲染方法，其特征在于，所述方法内容还包括：

渲染页面根据解析生成的JSON配置对页面进行渲染，基于虚拟DOM技术进行渲染，控件发生变化时只操作变化的DOM。