[发明专利]一种高效的移动表单设计与渲染方法

说明书

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

技术领域

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

背景技术

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

发明内容

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

本发明的技术方案是：

一种高效的移动表单设计与渲染方法，所述方法通过对移动表单进行分步式设计，综合出整体配置的设计，根据配置进行动态渲染与响应，并利用基于虚拟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配置。