CN112558945A - 一种新型模块化页面设计方法 - Google Patents

Abstract

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

Description

一种新型模块化页面设计方法

技术领域

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

背景技术

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

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

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

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

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

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

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

发明内容

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

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

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

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

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

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

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

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

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

第二方面，本发明提供了一种电子设备，所述电子设备进行人机交互时，具有主页面，所述主页面利用上述第一方面所述的新型模块化页面设计方法创建得到。

相对于现有技术，本发明所述的新型模块化页面设计方法具有以下优势：

(1)本发明采用“模块化”的思维方式，可根据实际业务需要，将单页面分解为几个独立的区域，化繁为简。每个区域内容通过【子页面】的形式展示，既可以对功能区有效划分，也方便后期维护，由原来的在整个页面中寻找元素，变为在子区域内查找元素修改，效率提升。

(2)本发明可实现服务合并。通过创建子页面的形式，在解析器组件上可以统一绑定一个服务，并配置各组件数据映射结构，数据请求时会根据映射表进行数据分配并显示，达到服务合并的目的，进而避免大量重复请求影响性能。

(3)本发明创建过程更灵活、高度自定义。例如对于同样设备分布图来讲，智慧楼宇和智慧工厂、智慧仓储等位置、图标、内容差异大，甚至同一场景不同区域也是存在差异。这时使用拖拽的方式自定义设备分布，上传设备图标，设置状态阈值，尺寸、样式配置，可以快速完成一个布局。高效、便捷的优势表现地淋漓尽致。尤其在大量需求并行时，一人即可完成。

(4)本发明借助于“子页面+解析器”的思想，其他应用场景皆可通过该方式解决。例如轮播图的自定义页面可以绑定多个子页面，解析器逐一解析之后，生成轮播项；弹窗展示项中，也可以绑定子页面来自定义展示内容，即使在内容一致参数不一样的场景也同样适用，这里通过内置全局变量+服务的形式实现。因此，同理其他应用场景中也可以使用“子页面+解析器”的思路解决。

(5)本发明具有可复用性。当子页面创建之后，可在解析器中绑定同一子页面、不同数据源使用。创建一次，多次使用。

附图说明

构成本发明的一部分的附图用来提供对本发明的进一步理解，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1为传统的可视化搭建系统示意图；

图2为子页面管理界面图；

图3为子页面的使用逻辑流程图；

图4为页面组成示意图；

图5为解析器工作流程示意图。

具体实施方式

需要说明的是，在不冲突的情况下，本发明中的实施例及实施例中的特征可以相互组合。

下面将参考附图并结合实施例来详细说明本发明。

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

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

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

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

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

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

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

本发明的重点是在原有页面的基础上创建一个子页面的概念，同时在主页面创建一个解析器，用于渲染子页面。需要说明的是子页面不是一个真正的页面，不能脱离于页面独立展示。子页面其实是一个相对独立的模块，在模块内部的工作方式与主页面类似，可以自定义添加各种组件、拖动调整位置、绑定数据、添加交互逻辑等。

每个主页面都有属于自己的子页面列表，各主页面之间的子页面列表不共享。子页面管理及配置界面如图2所示：

子页面的使用逻辑如下：

在主页面下，切换到子页面模式。创建子页面并编辑内容。编辑方式与主页面一致。

当页面内组件有数据绑定时，支持两种形式，一种是直接给该组件绑定一个独立的服务；一种是在使用子页面时，给子页面解析器绑定服务，另外给子页面内各组件指定其数据源的keyPath，解析器会自动根据keyPath将数据源数据分配给对应组件。

子页面创建完成后，在主页面添加一个【子页面组件】，其实为一个解析器，用于渲染。给子页面绑定数据的功能如上描述。

轮播组件、弹窗等均可通过关联子页面的形式用于展示，其核心原理也是解析器，只是应用场景不同。

使用示意流程如图3所示(为便于理解，仅列出步骤，详细操作过程省略)：

在传统的开发模式中，对于开头中列举的痛点问题，都是通过约定的方式提前把相应模块进行组合的或者内容固定。也就是说对于类似的模块或者同一模块多次出现时，需要重复开发，结果就是时间成本高、效率低。

而对于可视化搭建系统中，一个典型的问题就是如何保证和提升页面性能，性能差的直接后果就是用户体验度、操作感差，用户流失。服务请求重复、代码重复率高、定制开发等都会导致性能问题。

本发明的核心点在于创建子页面和子页面解析引擎的方式来解决可视化系统中高度灵活的页面搭建。通过这种新型方式的搭建出来的页面组成示例如图4所示：

正如图所示，通过【子页面】的方式搭建页面是由多个子页面组合而成一个真正的页面。每个子页面都包含以下几点：

1.组成元素。包括文本、图片、形状、音视频、图表、表单、按钮、输入框、表格等各类可编辑元素。

2.编辑元素。通过拖拽来调整大小尺寸及位置，通过编辑面板来修改样式。同时，不同的元素将拥有不同的编辑面板。

3.数据及交互。通过配置面板绑定数据，也可以添加交互动作。比如输入框change动作，可以使组件联动。

子页面创建完成后实际是用json对象的形式进行存储的。json对象中记录了元素的类型、样式、数据、交互等信息。接下来解析引擎的作用就是把json对象根据记录信息逐一解析成代码语言组合，渲染即可。例如button组件，首先根据类型解析为<button></button>，再根据样式解析为<button style＝”color:#f0f”></button>，最后通过渲染器把最后生成的代码插入到页面中即可。解析器工作流程如图5所示：

本实施例提供了一种电子设备，电子设备的组成及其连接关系能够为现有技术，所述电子设备进行人机交互时，具有主页面，所述主页面利用所述的新型模块化页面设计方法创建得到。

不局限于上述实施例，本发明的技术方案即创建了“创建子页面，关联，解析器，渲染”的机制。从某个角度也可以认为是建模的过程，类似的也可以通过多组件合并成组的方式实现解决场景问题。可以解决请求合并问题，但是对于轮播自定义、弹窗页定义的问题并不能解决。替代方案局限性较差，而本发明可以同时解决多种应用场景问题，一举多得，所以暂无可替代方案。

最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围，其均应涵盖在本发明的权利要求和说明书的范围当中。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (6)

1.一种新型模块化页面设计方法，包括主页面，其特征在于：所述主页面由多个子页面组成，每个所述子页面均为独立的模块；

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

2.根据权利要求1所述的新型模块化页面设计方法，其特征在于，所述主页面还创建有用于渲染子页面的解析器。

3.根据权利要求2所述的新型模块化页面设计方法，其特征在于，利用解析器对子页面渲染的方法如下：

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

4.根据权利要求1所述的新型模块化页面设计方法，其特征在于：所述主页面还设有创建编辑组件，用于创建子页面，并编辑子页面内容。

5.根据权利要求1所述的新型模块化页面设计方法，其特征在于：所述数据绑定组件包括两种绑定模式，其中一种是直接给该组件绑定独立的服务；另一种是在使用子页面时，给子页面解析器绑定服务，另外给子页面内各组件指定其数据源的keyPath，解析器自动根据keyPath将数据源数据分配给对应组件。

6.一种电子设备，所述电子设备进行人机交互时，具有主页面，其特征在于：所述主页面利用权利要求1-5任一所述的新型模块化页面设计方法创建得到。

Images