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

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

An efficient design and rendering method for mobile forms

The present invention provides an efficient method for designing and rendering mobile forms. The method is designed by step by step design of mobile forms, combining the design of the whole configuration, rendering and responding dynamically according to the configuration, and using the front-end UI framework based on virtual DOM technology to improve the rendering and response speed. Compared with the generation of Html, the JSON configuration has higher readability and maintainability. Compared with generating a large number of JavaScript files and rendering a unique dynamic rendering page, it also greatly reduces the repetition maintenance work of a large number of form pages, speeds up the loading speed, reduces the data storage space and later in the later period. Maintenance time. Using front-end UI frameworks such as React based on virtual DOM technology can greatly improve the rendering speed of the interface and the readability of the code.

【技术实现步骤摘要】
一种高效的移动表单设计与渲染方法
本专利技术涉及企业信息系统的移动表单开发
，具体涉及一种高效的移动表单设计与渲染方法。
技术介绍
随着移动信息系统的发展，越来越多的企业部署基于移动端的信息系统。然而对于传统的移动表单开发方式，每个发布表单都会生成大量的存储数据，随着表单数量的增加，数据重复而又冗余，给维护带来很多重复性的工作，工作量大，增加了开发周期。
技术实现思路
为了解决以上技术问题，各种系统的现状，本专利技术提出了一种高效的移动表单设计与渲染方法。该方法解决了传统方式代码易读性差，数据重复率高，维护工作量大，渲染和响应速度慢等问题，使移动表单的开发和维护更加方便灵活和高效。本专利技术的技术方案是：一种高效的移动表单设计与渲染方法，所述方法通过对移动表单进行分步式设计，综合出整体配置的设计，根据配置进行动态渲染与响应，并利用基于虚拟DOM技术的前端UI框架提升渲染与响应速度。虚拟DOM，VirtualDOM是一个模拟DOM树的JavaScript对象。React使用VirtualDOM来渲染UI，当组件状态state有更改的时候，React会自动调用组件的render方法重新渲染整个组件的UI。React主要的目标是提供一套不同的，高效的方案来更新DOM，不是通过直接把DOM变成可变的数据，而是通过构建“VirtualDOM”，虚拟的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，提高了响应速度，优化了用户体验。以上所述仅为本专利技术的优选实现方法，但并不限于此，对本领域技术人员来说，本专利技术实现方法可以有各种变化。凡在本专利技术的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本专利技术的保护范围之内。本文档来自技高网...

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

【技术特征摘要】
1.一种高效的移动表单设计与渲染方法，其特征在于，所述方法通过对移动表单进行分步式设计，综合出整体配置的设计，根据配置进行动态渲染与响应，并利用基于虚拟DOM技术的前端UI框架提升渲染与响应速度。2.根据权利要求1所述的一种高效的移动表单设计与渲染方法，其特征在于，所述方法内容包括：在移动表单设计发布时，生成该移动表单的JSON配置数据，依据该配置数据，由动态渲染页面对移动表单进行渲染。3.根据权利要求2所述的一种高效的移动表单设计与渲染方法，其特征在于，所述方法内容包括：将移动表单的所有配置属性抽象出来，通过图形化界面展示，并通过设计将数据保存到后台。4.根据权利要求3所述的一种高效的移动表单设计与渲染方法，其特征在于，所述方法内容包括：在将移动表单发布时，根据设计时产生的后台数据，经过集成生成已经固定好格式的JSON配置。5.根据权利要求4所述的一种高效的移动表单设计与渲染方法，其特征在于，所述方法内容包括：在对移动表单进行渲染时，对JSON配置进行解析，利用虚拟DOM技术加快页面渲染与响应，动态地渲染需要生成的界面。6.根据权利要求5所述的一种高效的移动表单设计与渲染方法，其特征在于，所述移动表单的设计过程包括：首先根据移动表单架构和设计功能的需要，抽象出移动表单的...

【专利技术属性】
技术研发人员：石磊，李伟龙，
申请(专利权)人：山东浪潮通软信息科技有限公司，
类型：发明
国别省市：山东,37