[发明专利]一种新型模块化页面设计方法

说明书

本发明提供了一种新型模块化页面设计方法，包括主页面，所述主页面由多个子页面组成，每个所述子页面均为独立的模块；所述子页面对应设有用于添加各种组件的自定义添加组件，用于调整子页面位置的位置调节组件，用于绑定数据的数据绑定组件，用于添加交互逻辑的逻辑添加组件。本发明采用“模块化”的思维方式，可根据实际业务需要，将单页面分解为几个独立的区域，化繁为简。每个区域内容通过【子页面】的形式展示，既可以对功能区有效划分，也方便后期维护，由原来的在整个页面中寻找元素，变为在子区域内查找元素修改，效率提升。

技术领域

本发明属于页面设计技术领域，尤其是涉及一种新型模块化页面设计方法。

背景技术

在现有司内可视化搭建应用的基础上，实际使用过程当中会有多种场景问题。在我们平时看到的页面中，是由多个元素组合而成，比如搜索框、按钮、表格、分页器等等。而在我们的可视化系统中也基本类似，也是由多种元素组成；此处我们划分为几种不同类型的组件，比如基础展示文字、图片，控制类按钮、开关，图表展示，表单输入框、下拉框等。这些组件也是可视化系统的基础。再辅以数据绑定、交互配置等，实现页面快速搭建。但是对于满足实际场景应用，往往还存在一些痛点问题。系统界面示意图如图1所示。

在实际可视化应用搭建中，会存在如下痛点问题：

1.在某一页面内，组件A、组件B、组件C分别展示三个动态数据空气温度、湿度、平均温度。此时展示三个数据需调用三次服务，如果展示数据更多，一次性调用服务数会更多，严重影响页面加载。

2.对于轮播组件，每个轮播页展示内容不一、位置不定，也需要一种灵活的方式解决页面配置问题。

3.在物联网应用中，会有较多设备出现。例如智能家居应用中，会有摄像头、温度传感器、烟感报警器、智能电视机等等。在页面展示中往往会需要展示这些设备的位置分布以及部分参数(名称、状态等)，尤其是位置具有高度的自定义性，每个应用场景都会不同，需要一种方便、快速地定义方式。

4.有些场景需要弹窗展示，而弹窗内容会依据功能、使用者、内容而不确定性，以上述设备分布为例，点击设备需要查询设备详细信息以及参数曲线图。

5.在使用可视化布局配置页面时，对于一些较复杂、内容较多的页面，如果一次性将所有内容都添加上去，可能有多则几十上百个组件，组件之间互相累加重叠，在后期维护中很难管理。有时可能在修改某个组件属性时，不小心导致其他组件被修改。

发明内容

有鉴于此，为克服上述缺陷，本发明旨在提出一种新型模块化页面设计方法。

为达到上述目的，本发明的技术方案是这样实现的：

第一方面，本发明提供了一种新型模块化页面设计方法，包括主页面，所述主页面由多个子页面组成，每个所述子页面均为独立的模块；

所述子页面对应设有用于添加各种组件的自定义添加组件，用于调整子页面位置的位置调节组件，用于绑定数据的数据绑定组件，用于添加交互逻辑的逻辑添加组件。

进一步的，所述主页面还创建有用于渲染子页面的解析器。

进一步的，利用解析器对子页面渲染的方法如下：

子页面创建完成后用json对象的形式进行存储，json对象中记录了元素的类型、样式、数据、交互信息，解析器把json对象根据记录信息逐一解析成代码语言组合，然后渲染。

进一步的，所述主页面还设有创建编辑组件，用于创建子页面，并编辑子页面内容。

进一步的，所述数据绑定组件包括两种绑定模式，其中一种是直接给该组件绑定独立的服务；另一种是在使用子页面时，给子页面解析器绑定服务，另外给子页面内各组件指定其数据源的keyPath，解析器自动根据keyPath将数据源数据分配给对应组件。