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

文档序号:15095595发布日期:2018-08-04 14:29阅读:491来源:国知局

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



背景技术:

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



技术实现要素:

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

本发明的技术方案是:

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

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

当前第1页1 2 3 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1