CN114090083B - 一种可视化组件配置方法、装置、设备及存储介质 - Google Patents

Abstract

本申请实施例提供一种可视化组件配置方法、装置、设备及存储介质，其中，所述方法包括：客户端在进行页面初始化时，确定所述页面上的视图元素的标识；根据所述视图元素的标识确定与所述视图元素绑定的组件配置数据，其中所述组件配置数据包括组件标识和组件属性信息；根据所述组件标识，获取所述页面的目标组件类；所述目标组件类是从对组件进行更新的组件服务端获得的；调用解析引擎，根据所述组件属性信息和所述目标组件类，进行实例化渲染，得到目标页面；这样，在更新组件时候，用户无需额外的操作，就能完成组件的更新。

Description

一种可视化组件配置方法、装置、设备及存储介质

技术领域

本申请涉及组件配置领域，涉及但不限于一种可视化组件配置方法、装置、设备及存储介质。

背景技术

相关技术进行动态组件配置生成页面的方式，存在这样的问题：页面的配置引擎、解析引擎和组件内部的实现方式，在发布打包的时候已经静态化，这种方式对于大量项目使用公共组件尤其是开源组件时有重大弊端，当组件内部逻辑出现问题需要更新时，所有相关项目针对修复都要重新更新打包，然后重新发布或者手动更换相关组件，这种方式缺乏足够的灵活性。

发明内容

有鉴于此，本申请实施例提供一种可视化组件配置方法、装置、设备及存储介质。

本申请的技术方案是这样实现的：

本申请实施例提供一种可视化组件配置方法，包括：

客户端在进行页面初始化时，确定所述页面上的视图元素的标识；

根据所述视图元素的标识确定与所述视图元素绑定的组件配置数据，其中所述组件配置数据包括组件标识和组件属性信息；

根据所述组件标识，获取所述页面的目标组件类；所述目标组件类是从对组件进行更新的组件服务端获得的；

调用解析引擎，根据所述组件属性信息和所述目标组件类，进行实例化渲染，得到目标页面。

本申请实施例提供一种可视化组件配置方法，包括：

适配器与组件有升级需求时，组件服务端接收上传的组件和适配器；所述适配器用于按照所述组件的开发模式对所述组件进行类封装，得到组件类，以使得客户端能够兼容不同开发模式的组件；

与客户端建立全双工连接；

接收所述客户端发送的加载组件请求和加载适配器请求；

响应所述加载组件请求，向所述客户端发送第一文件路径，以使所述客户端访问所述第一文件路径，得到目标组件；

响应所述加载适配器请求，向所述客户端发送第二文件路径，以使所述客户端访问所述第二文件路径，得到目标适配器。

本申请实施例提供一种可视化组件配置装置，包括：

第一确定模块，用于在进行页面初始化时，确定所述页面上的视图元素的标识；

第二确定模块，用于根据所述视图元素的标识确定与所述视图元素绑定的组件配置数据，其中所述组件配置数据包括组件标识和组件属性信息；

获取模块，用于根据所述组件标识，获取所述页面的目标组件类；所述目标组件类是从组件服务端获得更新后的适配器，按照目标组件的开发模式对从所述组件服务端获得更新后的目标组件进行类封装而得到的；

渲染模块，用于根据所述组件属性信息和所述目标组件类，进行实例化渲染，得到目标页面。

本申请实施例提供一种可视化组件配置装置，包括：

第二接收模块，用于适配器与组件有升级需求时，接收上传的组件和适配器；所述适配器用于按照所述组件的开发模式对所述组件进行类封装，得到组件类，以使得客户端能够兼容不同开发模式的组件；

建立模块，用于与客户端建立全双工连接；

第三接收模块，用于接收所述客户端发送的加载组件请求和加载适配器请求；

第一发送模块，用于响应所述加载组件请求，向所述客户端发送第一文件路径，以使所述客户端访问所述第一文件路径，得到目标组件；

第二发送模块，用于响应所述加载适配器请求，向所述客户端发送第二文件路径，以使所述客户端访问所述第二文件路径，得到目标适配器。

本申请实施例提供一种计算机设备，包括存储器和处理器，所述存储器存储有可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述方法中的步骤。

本申请实施例提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述方法中的步骤。

本申请实施例中，客户端在初始化后，通过调用从组件服务端获得更新后的目标组件类；然后调用解析引擎，根据所述目标组件类，进行实例化渲染，得到目标页面。本申请实施例提供的技术方案中，相对于相关技术新增了组件服务端，用于实现对组件进行管理和更新；这样，在更新组件时候，用户无需额外的操作，就能在初始化的时候完成组件的更新。

附图说明

在附图(其不一定是按比例绘制的)中，相似的附图标记可在不同的视图中描述相似的部件。具有不同字母后缀的相似附图标记可表示相似部件的不同示例。附图以示例而非限制的方式大体示出了本文中所讨论的各个实施例。

图1为相关技术中动态组件配置生成页面的示意图。

图2为本申请实施例可视化组件配置方法的实现流程示意图。

图3是本申请实施例一种基于动态加载技术的可视化组件配置***的组成结构示意图。

图4为本申请实施例可视化组件配置装置的组成结构示意图。

图5为本申请实施例可视化组件配置装置的组成结构示意图。

图6为本申请实施例中计算机设备的一种硬件实体示意图。

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对发明的具体技术方案做进一步详细描述。以下实施例用于说明本申请，但不用来限制本申请的范围。

在后续的描述中，使用用于表示元件的诸如“模块”或“单元”的后缀仅为了有利于本申请的说明，其本身没有特定的意义。因此，“模块”或“单元”可以混合地使用。

目前在动态组件配置领域的相关技术，例如，动态表单的配置，是通过拖拽的方式将组件拖拽至配置界面，更改布局属性、组件对象属性改变组件的外观和布局，然后将相关属性作为数据保存持久化；展示的时候界面通过读取相关组件配置数据(其中包括组件标识、组件样式属性)结合解析引擎动态生成符合预期的界面。在此过程中通过配置界面实现在线使用视图控件的新增、修改、发布，从而提升工作效率与业务支撑的灵活度，减少研发人员的人力与时间投入减少成本。

相关技术中动态组件配置生成页面的方式如图1，客户端侧的界面包括配置界面10和展示界面20，配置界面10上包括配置引擎11和组件文件(组件或组件集合)12，其中组件文件12包括公共组件13；展示界面20上包括解析引擎21和组件文件22，其中组件文件22包括公共组件23。

在利用配置引擎11在配置界面10配置组件完成时，会将组件配置数据保存起来，在实现的过程中，可以将组件配置数据保存在数据服务端。在展示的时候，会读取保存的组件配置数据，解析引擎利用读取的组件配置数据对页面视图元素的标识进行渲染，得到目标展示页面。

图1提供的动态组件配置生成页面的方式，存在几个方面的问题：1)页面的配置引擎、解析引擎和组件内部的实现方式，在发布打包的时候已经静态化，这种方式对于大量项目使用公共组件尤其是开源组件时有重大弊端，当组件内部逻辑出现问题需要更新时，所有相关项目针对修复都要重新更新打包，然后重新发布或者手动更换相关组件文件，这种方式缺乏足够的灵活性。2)采用的是单一开发模式，无法兼容不同开发模式开发的组件(例如：基于Vue模式开发的配置界面无法兼容基于React模式开发的组件)，而鉴于目前web前端技术领域主流开发模式的多样化，这种方式缺乏足够的兼容性。3)页面视图的渲染机制在加载完成之后无法动态变更，导致需要更新时需要重新刷新客户端界面，缺乏足够的可用性。

实施例一

本实施例提出一种可视化组件配置方法，该方法应用于计算机设备，该方法所实现的功能可以通过计算机设备中的处理器调用程序代码来实现，当然程序代码可以保存在计算机存储介质中，可见，该计算机设备至少包括处理器和存储介质。

图2为本申请实施例可视化组件配置方法的实现流程示意图，如图2所示，该方法包括：

步骤S201，客户端在进行页面初始化时，确定所述页面上的视图元素的标识；

在一些实施例中，页面初始化是用户打开页面的时候，开始初始化，打开的页面可以认为是一个特定页面(即目标页面)，因此是可以确定出页面上的视图元素的标识。

在另一些实施例中，步骤S201包括：在进行页面初始化时，从配置服务端读取配置引擎生成并保存的页面配置数据，页面配置数据中包含页面中所包含的视图元素；根据读取的页面配置数据，确定页面中包含的视图元素的标识。

步骤S202，根据所述视图元素的标识确定与所述视图元素绑定的组件配置数据，其中所述组件配置数据包括组件标识和组件属性信息；

组件属性信息包括组件的布局属性和组件的样式属性。

步骤S203，根据所述组件标识，获取所述页面的目标组件类；所述目标组件类是从对组件进行更新的组件服务端获得的；

在一些实施例中，所述目标组件类是调用从组件服务端获得更新后的适配器，按照目标组件的开发模式对从所述组件服务端获得更新后的目标组件进行类封装而得到的；其中，组件服务端是本申请相对于相关技术中新增的，用于实现对组件进行管理和更新。由此可以看出，本申请实施例提供的技术方案，通过适配器按照目标组件的开发模式对更新后的目标组件进行类封装而得到目标组件类，然后调用解析引擎，根据所述组件属性信息和所述目标组件类，进行实例化渲染，得到目标页面；由此能够解决相关技术中单一开发模式，无法兼容不同开发模式开发的组件的问题，从而提高了兼容性。

适配器和目标组件可以是初始化的时候从组件服务端获取的，也可以是在初始化之后页面打开状态下从组件服务端获取的，也就是说，本申请实施例提供的技术方案能够实现动态替换组件，无论是初始化的时候，还是初始化之后页面打开状态下，都可以完成组件的更新。

这里，获取目标组件类可以是向组件服务端请求的，也可以是在本地查找的，需要说明的是，本地查找的是，在初始化的时候向组件服务端请求的组件文件，该组件文件中包括很多组件，当然包括目标页面的目标组件，目标组件类通过调用适配器，按照组件的开发模式对所述组件文件中的组件进行类封装而得到的。

组件的开发模式例如可以包括：Vue模式、React模式等开发模式。

步骤S204，调用解析引擎，根据所述组件属性信息和所述目标组件类，进行实例化渲染，得到目标页面。

一般来说，本申请实施例提供的方案可以适用于浏览器/服务器(C/S)的架构，也可以适用于客户端/服务器(C/S)的架构，这两种架构中浏览器和客户端在本申请实施例中将被统一称为客户端。

在相关技术中，浏览器/服务器架构中，当有组件需要升级时，需要用户手动刷新才能完成，如果不进行刷新，用户打开的页面就是有问题的。在客户端/服务器的架构中，如果有组件需要升级，则需要重装升级完成，即使目前最为常规的方式是覆盖式安装，那也是较为繁琐和费时的。

而本申请实施例提供的技术方案，通过调用从组件服务端获得更新后的目标组件类；然后调用解析引擎，根据所述目标组件类，进行实例化渲染，得到目标页面。由此可见，本申请实施例提供的技术方案中，相对于相关技术新增了组件服务端，用于实现对组件进行管理和更新；可见，相关技术用户需要多一步手动刷新或重装才能实现，而本申请实施例提供的技术方案，对于用户来说，无需多余步骤，完全无感知的。

本实施例提出一种可视化组件配置方法，该方法应用于计算机设备，该方法所实现的功能可以通过计算机设备中的处理器调用程序代码来实现，当然程序代码可以保存在计算机存储介质中，可见，该计算机设备至少包括处理器和存储介质。

本申请实施例提供的可视化组件配置方法，包括：

步骤S301，客户端在进行页面初始化时，确定所述页面上的视图元素的标识；

在步骤S301之前，组件服务端侧，适配器与组件有升级需求时，组件服务端接收上传的组件和适配器；所述适配器用于按照所述组件的开发模式对所述组件进行类封装，得到组件类，以使得客户端能够兼容不同开发模式的组件；这里，页面初始化时，客户端与组件服务端建立全双工连接。

步骤S302，客户端根据所述视图元素的标识确定与所述视图元素绑定的组件配置数据，其中所述组件配置数据包括组件标识和组件属性信息；

步骤S303，客户端向组件服务端请求与所述组件标识对应的目标组件和目标适配器；

在一些实施例中，所述向组件服务端请求与所述组件标识对应的目标组件和目标适配器，包括：向组件服务端发送均携带有所述组件标识的加载组件请求和加载适配器请求；接收所述组件服务端分别响应所述加载组件请求而返回的第一文件路径，和所述加载适配器请求而返回的第二文件路径；分别访问所述第一文件路径和所述第二文件路径，对应得到所述目标组件和所述目标适配器。

对应地，组件服务端接收所述客户端发送的加载组件请求和加载适配器请求；响应所述加载组件请求，组件服务端向所述客户端发送第一文件路径，以使所述客户端访问所述第一文件路径，得到目标组件；响应所述加载适配器请求，组件服务端向所述客户端发送第二文件路径，以使所述客户端访问所述第二文件路径，得到目标适配器。在另一实施例中，所述加载组件请求和加载适配器请求均携带有组件标识；所述第一文件路径为存储所述组件标识对应的组件的路径，所述第二文件路径为存储所述组件标识对应的适配器的路径。

在另一些实施例中，所述向组件服务端请求与所述组件标识对应的目标组件和目标适配器，包括：客户端在进行所述页面初始化时，读取所述页面的服务配置信息；根据所述页面的服务配置信息，向所述组件服务端发送均携带有所述组件标识的加载组件请求和加载适配器请求。其中，服务配置信息用于表明待请求的组件和适配器所存储的服务端信息，因此，可以根据服务配置信息向对应的组件服务端请求组件和适配器。

在一些实施例中，所述客户端在进行页面初始化时，读取所述页面的服务配置信息，包括：所述客户端在进行所述页面初始化时，与数据服务端建立连接，得到存储路径；通过访问所述存储路径，得到所述页面的服务配置信息；或者，所述客户端在进行所述页面初始化时，从本地读取所述页面的服务配置信息。

在另一些实施例中，所述向组件服务端请求与所述组件标识对应的目标组件和目标适配器，包括：客户端在进行所述页面初始化时，读取所述页面的服务配置信息；根据所述页面的服务配置信息，向组件服务端发送均携带有所述组件标识的加载组件请求和加载适配器请求；接收所述组件服务端分别响应所述加载组件请求而返回的第一文件路径，和所述加载适配器请求而返回的第二文件路径；分别访问所述第一文件路径和所述第二文件路径，对应得到所述目标组件和所述目标适配器。

步骤S304，客户端调用所述目标适配器，按照所述目标组件的开发模式对所述目标组件进行类封装，得到目标组件类；

这里，上述步骤S303和步骤S305实际上提供的了一种实现步骤“根据所述组件标识，获取所述页面的目标组件类”的方式。

步骤S305，客户端调用解析引擎，根据所述组件属性信息和所述目标组件类，进行实例化渲染，得到目标页面。

本申请实施例提供了一种通过动态替换适配器实现组件兼容性升级的过程，包括：客户端初始化并与组件服务端建立连接；客户端向组件服务端发送用于获取组件与适配器的请求；组件服务端返回组件与适配器，客户端进行读取；客户端根据解析引擎与适配器解析组件并渲染成视图元素。有适配器与组件有升级需求时，组件服务端接收上传的组件与适配器；客户端通过无感知替换适配器文件实现兼容性升级；客户端通过无感知替换组件并结合适配器进行视图渲染机制无感知更新。

本实施例提出一种可视化组件配置方法，该方法应用于计算机设备，该方法所实现的功能可以通过计算机设备中的处理器调用程序代码来实现，当然程序代码可以保存在计算机存储介质中，可见，该计算机设备至少包括处理器和存储介质。

本申请实施例提供的可视化组件配置方法，包括：

步骤S401，在适配器与组件有升级需求时，组件服务端接收上传的组件和适配器；所述适配器用于按照所述组件的开发模式对所述组件进行类封装，得到组件类，以使得客户端能够兼容不同开发模式的组件；

这里，组件服务端接收的可能是某些特定的组件，例如某个页面上的目标组件，也可能是很多组件。

步骤S402，客户端在进行页面初始化时，与组件服务端建立全双工通信连接；

步骤S403，客户端确定所述页面上的视图元素的标识；

步骤S404，客户端根据所述视图元素的标识确定与所述视图元素绑定的组件配置数据，其中所述组件配置数据包括组件标识和组件属性信息；

在一些实施例中，组件配置数据可以存储在数据服务端，客户端通过请求的方式从数据服务端获得组件配置数据。在另一些实施例中，还可以存储在本地。

步骤S405，组件服务端与客户端建立全双工连接，向已建立全双工通信连接的客户端发送更新通知，所述更新通知包括待更新组件的标识。

步骤S406，客户端接收所述组件服务端广播的更新通知，所述更新通知中包括待更新组件的组件标识；

步骤S407，客户端检测到所述待更新组件的组件标识与所述组件配置数据中的组件标识相同时，向所述组件服务端发送的更新请求，所述更新请求中携带有组件标识；

步骤S408，组件服务端接收所述客户端发送的加载组件请求和加载适配器请求；

这里，加载组件请求和加载适配器请求中如果携带有组件标识，组件服务端可以认为客户端请求与组件标识对应的特定组件(即目标组件)以及与组件标识对应的特定适配器(即目标适配器)。在另一实施例中，加载组件请求和加载适配器请求中如果未携带组件标识，组件服务端会将更新后的组件和/或更新后的适配器发送给客户端。

步骤S409，组件服务端响应所述加载组件请求，向所述客户端发送第一文件路径，以使所述客户端访问所述第一文件路径，得到目标组件；

步骤S410，组件服务端响应所述加载适配器请求，向所述客户端发送第二文件路径，以使所述客户端访问所述第二文件路径，得到目标适配器。

在一些实施例中，所述加载组件请求和加载适配器请求均携带有组件标识；所述第一文件路径为存储所述组件标识对应的组件的路径，所述第二文件路径为存储所述组件标识对应的适配器的路径。

步骤S411，客户端接收所述组件服务端响应所述更新请求而返回的待更新组件的文件路径和开发模式；

步骤S412，客户端访问所述待更新组件的文件路径，得到更新后的目标组件。

这里，步骤S406至步骤S412提供了一种实现“所述根据所述组件标识向组件服务端，至少请求更新后的目标组件”的方式。

步骤S413，客户端调用所述目标组件对应的目标适配器，按照所述更新后的目标组件的开发模式对所述更新后的目标组件进行类封装，得到目标组件类；

这里，步骤S413提供了一种实现步骤“根据所述组件标识，获取所述页面的目标组件类”的方式。

步骤S414，客户端调用解析引擎，根据所述组件属性信息和所述目标组件类，进行实例化渲染，得到目标页面。

在其他的实施例中，所述方法还包括：客户端根据删除所述组件标识对应的被更新的组件的组件实例，保存更新后的目标组件。

本实施例提出一种可视化组件配置方法，该方法应用于计算机设备，该方法所实现的功能可以通过计算机设备中的处理器调用程序代码来实现，当然程序代码可以保存在计算机存储介质中，可见，该计算机设备至少包括处理器和存储介质。

本实施例提供的一种可视化组件配置方法，包括：

步骤S501，适配器与组件有升级需求时，组件服务端接收上传的组件集合和适配器；所述适配器用于按照所述组件集合中的组件的开发模式对所述组件进行类封装，得到组件类，以使得客户端能够兼容不同开发模式的组件；

步骤S502，客户端在进行页面初始化时，读取所述服务配置信息；

步骤S503，客户端根据所述服务配置信息向组件服务端，请求所述组件集合和适配器；

步骤S504，组件服务端向客户端返回组件集合和适配器；

步骤S505，客户端调用所述适配器，按照所述组件集合中每一组件的开发模式对对应组件进行类封装，得到所述组件集合的组件类。

步骤S506，客户端确定所述页面上的视图元素的标识；

步骤S507，客户端根据所述视图元素的标识确定与所述视图元素绑定的组件配置数据，其中所述组件配置数据包括组件标识和组件属性信息；

步骤S508，客户端根据所述组件标识，从加载的组件集合中的组件类中确定所述目标组件类；

这里，提供了一种实现“根据所述组件标识，获取所述页面的目标组件类”的方式。

步骤S509，客户端调用解析引擎，根据所述组件属性信息和所述目标组件类，进行实例化渲染，得到目标页面。

本申请实施例中，通过设计一种组件服务模型将组件内部逻辑从客户端分离，并且与客户端通过全双工通信连接建立广播机制，在观察到服务端组件更新时主动通知所有客户端更新相关的组件文件，同时建立适配机制实现客户端对基于不同开发模式的组件的兼容。

图3是本申请实施例一种基于动态加载技术的可视化组件配置***的组成结构示意图，如图3所示，该***包括：服务端和客户端，其中服务端包括数据服务端30和组件服务端40，客户端包括配置客户端(可以理解为配置界面50)和展示客户端(可以理解为展示界面60)，其中：配置客户端50和展示客户端60均包括组件文件和适配器文件，配置客户端还包括配置引擎，展示客户端还包括解析引擎。需要说明的是，客户端可以为计算机设备，例如手机、个人电脑等具有信息处理能力的设备；组件服务端和数据服务端是逻辑上的划分，可以位于同一硬件实体上。在实现时，服务端也可以为计算机设备，例如个人电脑、服务器等具有信息处理能力的设备。

1)配置客户端

配置客户端，用于配置与保存预展示界面所需的视图元素的标识、视图元素所属的组件的组件标识和组件属性信息。其中，组件属性信息包括组件的布局属性和组件的样式属性；

客户端界面初始化读取服务配置信息，并根据该服务配置信息向指定组件服务端分别发起加载组件文件请求和加载适配器文件请求。在加载完成之后通过配置引擎和适配器内部机制能够有效正确地识别基于不同开发模式的视图组件的渲染逻辑，从而实现从组件文件到页面视图元素展示的转化过程。另外，使用拖拽方式进行页面视图元素的可视化配置，修改元素的布局属性和样式属性，修改完成之后保存为页面配置数据并与数据服务端进行交互实现持久化保存。

2)展示客户端

配置客户端用于解析与渲染预展示界面的视图元素。

客户端界面初始化方式与配置客户端中描述一致，在向组件服务端读取加载完组件文件与适配器文件之后，向数据服务端读取配置客户端中经过保存的页面配置数据，然后以与功能1中相同的解析方式通过解析引擎读取适配器的内部实现机制，对不同类型的组件进行解析渲染出视图元素。

3)组件服务端

该服务端主要提供组件文件加载服务与增删改查等管理功能。

该服务端首先通过界面可视化操作的方式提供对组件文件的管理和分类功能，具有新增、删除、修改、查询以及导入和导出等管理功能，对所有客户端使用的组件进行统一化管理，提高组件可维护性。另外针对不同客户端自身具备的权限等级进行权限分类，允许配置客户端和展示客户端读取与其权限等级相对应的组件。

此外通过配置客户端、展示客户端与组件服务端建立全双工通信连接实现广播通知机制，当组件服务端组件与适配器维护版本更新时，通知已建立连接的客户端进行更新请求替换组件文件。

第一部分：

通过动态替换适配器实现组件兼容性升级的过程如下：

步骤1、客户端初始化读取服务配置信息并根据该服务配置信息向组件服务端建立连接；服务配置信息中包括用于获取组件文件和适配器的组件服务端的地址；

步骤2、客户端向组件服务端发送用于获取组件与适配器的请求；

步骤3、组件服务端返回组件文件与适配器文件，客户端进行读取；

步骤4、客户端根据解析引擎与适配器文件解析组件文件并渲染成视图元素；

步骤5、有适配器与组件升级需求时，组件服务端上传组件文件与适配器文件更新；

步骤6、客户端通过无感知替换适配器文件实现兼容性升级；

步骤7、客户端通过无感知替换组件并结合适配器进行视图渲染机制无感知更新。

需要说明的是，组件的文件类型可以为js等可以被展示端有效识别的文件类型。

第二部分：

通过广播机制实现视图渲染文件无感知替换的过程如下：

步骤11、客户端初始化并与组件服务端建立全双工通信连接；

步骤12、用户在组件服务端提供的页面上传待更新的组件文件；

步骤13、组件服务端获取更新完成的组件文件；

步骤14、组件服务端检测到组件文件更新后触发通知动作；

步骤15、组件服务端检测已建立全双工通信连接的客户端并发送更新通知，通知内容包含待更新组件的标识；

步骤16、客户端收到更新通知后向组件服务端发起更新请求；

步骤17、组件服务端返回最新的组件文件的路径与组件文件的类型；

步骤18、客户端收到组件文件路径进行文件的加载读取；

步骤19、客户端删除原有组件标签并销毁已有组件实例；

步骤20、客户端记录步骤19中销毁组件实例绑定的视图元素标识；

步骤21、客户端根据更新后的组件类对视图元素标识生成实例，并根据步骤10中记录的视图元素标识建立组件实例-视图绑定关系；

步骤22、视图数据进行更新时根据最新的组件渲染机制进行渲染，至此实现无感知的替换。

第三部分：

适配不同开发模式的过程如下(以模式A开发的组件类型A为例)：

步骤31、客户端初始化并与组件服务端建立连接；

步骤32、客户端向组件服务端请求适配器文件并加载读取；

步骤33、客户端发出获取组件文件的请求；

步骤34、组件服务端返回允许加载组件的文件路径信息以及类型(A类型)信息；

步骤35、客户端根据组件路径信息加载相应的组件文件；

步骤36、客户端根据组件的类型结合适配文件中的匹配规范选择与类型相对应的封装方式进行类封装；

这里，类封装是把相同类型的组件打包，这样更新的话就一起更新了。类封装之后包括组件暴露出来的组件样式属性和数据属性，以及符合A类型规范的视图渲染方式；

步骤37、客户端与数据服务端建立连接，客户端发出获取视图元素信息的请求；

这里，视图元素信息包括视图元素的标识；加载页面的时候，是知道要加载的视图元素的标识的。

步骤38、数据服务端返回页面上相应视图元素绑定的组件标识与组件属性信息；

数据服务端存的是组件配置数据，即包括组件标识和组件属性信息。

步骤39、客户端获取到视图元素信息后，根据所属组件标识找到步骤34中封装的类进行实例化，并结合步骤36中的组件属性信息在客户端页面上生成所需的视图元素并实现预期的展示效果。

本申请实施例提供的技术方案中，通过构建一种组件服务模型实现客户端界面与视图组件的文件管理分离以及打包发布的操作分离，并且构建了一种适配器模型达到兼容基于不同开发模式的视图组件，另外建立一种广播通知模型达到实时无感知替换所有客户端的视图组件与适配器文件。

本申请实施例提供的技术方案，解决了动态组件配置领域已有技术中的三个问题：1)针对客户端页面所需视图组件进行更新时，所有对该组件有引入关系的项目都需要重新打包发布才能生效，缺乏灵活性；2)客户端界面与视图组件单一的开发模式无法兼容多种开发模式的组件，缺乏兼容性；3)视图渲染机制存在漏洞或者有更新需求时，需要重新刷新客户端界面才能获取最新的组件文件，针对演示、安保等重要场景是不能接受的，缺乏可用性。本申请实施例除了解决上述三个问题以外，在组件服务中可以通过配置自动化打包方式，将相同类型组件打包至同一个组件文件中，减少客户端与服务端的请求次数达到减少开销提升性能的效果。

基于前述的实施例，本申请实施例提供一种可视化组件配置装置，该装置包括所包括的各单元、以及各单元所包括的各模块，可以通过计算机设备中的处理器来实现；当然也可通过具体的逻辑电路实现；在实施的过程中，处理器可以为中央处理器(CPU)、微处理器(MPU)、数字信号处理器(DSP)或现场可编程门阵列(FPGA)等。

图4为本申请实施例可视化组件配置装置的组成结构示意图，如图4所示，所述装置400包括：

第一确定模块401，用于在进行页面初始化时，确定所述页面上的视图元素的标识；

第二确定模块402，用于根据所述视图元素的标识确定与所述视图元素绑定的组件配置数据，其中所述组件配置数据包括组件标识和组件属性信息；

获取模块403，用于根据所述组件标识，获取所述页面的目标组件类；所述目标组件类是从对组件进行更新的组件服务端获得的；

渲染模块404，用于根据所述组件属性信息和所述目标组件类，进行实例化渲染，得到目标页面。

在一些实施例中，所述获取模块，包括：请求单元，用于向组件服务端请求与所述组件标识对应的目标组件和目标适配器；封装单元，用于调用所述目标适配器，按照所述目标组件的开发模式对所述目标组件进行类封装，得到目标组件类。

在一些实施例中，所述请求单元，包括：

读取子单元，用于进行所述页面初始化时，读取所述页面的服务配置信息；

请求子单元，用于根据所述页面的服务配置信息，向所述组件服务端发送均携带有所述组件标识的加载组件请求和加载适配器请求，以获得与所述组件标识对应的目标组件和目标适配器。

所述读取子单元，用于：所述客户端在进行所述页面初始化时，与数据服务端建立连接，得到存储路径；通过访问所述存储路径，得到所述页面的服务配置信息；或者，所述客户端在进行所述页面初始化时，从本地读取所述页面的服务配置信息。

在一些实施例中，所述装置还包括：

建立模块，用于与组件服务端建立全双工通信连接；

第一接收模块，用于接收所述组件服务端广播的更新通知，所述更新通知中包括待更新组件的组件标识；

对应地，所述获取模块，用于检测到所述待更新组件的组件标识与所述组件配置数据中的组件标识相同时，根据所述组件标识向组件服务端，至少请求更新后的目标组件。

在一些实施例中，所述获取模块，用于：所述根据所述组件标识向组件服务端，至少请求更新后的目标组件，包括：向所述组件服务端发送的更新请求，所述更新请求中携带有组件标识；接收所述组件服务端响应所述更新请求而返回的待更新组件的文件路径和开发模式；访问所述待更新组件的文件路径，得到更新后的目标组件。

在一些实施例中，所述装置还包括：处理模块，用于根据删除所述组件标识对应的被更新的组件的组件实例，保存更新后的目标组件。

在一些实施例中，所述获取模块，用于：根据所述组件标识，从加载的组件集合中的组件类中确定所述目标组件类。

在一些实施例中，所述装置还包括：读取模块，用于在进行页面初始化时，读取所述服务配置信息；请求模块，用于根据所述服务配置信息向组件服务端，请求所述组件集合和适配器；封装模块，用于调用所述适配器，按照所述组件集合中每一组件的开发模式对对应组件进行类封装，得到所述组件集合的组件类。

基于前述的实施例，本申请实施例提供一种可视化组件配置装置，该装置包括所包括的各单元、以及各单元所包括的各模块，可以通过计算机设备(客户端侧可以理解为终端，组件服务端或数据服务端可以理解为服务器)中的处理器来实现；当然也可通过具体的逻辑电路实现；在实施的过程中，处理器可以为中央处理器(CPU)、微处理器(MPU)、数字信号处理器(DSP)或现场可编程门阵列(FPGA)等。

图5为本申请实施例可视化组件配置装置的组成结构示意图，如图5所示，所述装置500包括：

第二接收模块501，用于适配器与组件有升级需求时，组件服务端接收上传的组件和适配器；所述适配器用于按照所述组件的开发模式对所述组件进行类封装，得到组件类，以使得客户端能够兼容不同开发模式的组件；

建立模块502，用于与客户端建立全双工连接；

第三接收模块503，用于接收所述客户端发送的加载组件请求和加载适配器请求；

第一发送模块504，用于响应所述加载组件请求，向所述客户端发送第一文件路径，以使所述客户端访问所述第一文件路径，得到目标组件；

第二发送模块505，用于响应所述加载适配器请求，向所述客户端发送第二文件路径，以使所述客户端访问所述第二文件路径，得到目标适配器。

在一些实施例中，所述加载组件请求和加载适配器请求均携带有组件标识；所述第一文件路径为存储所述组件标识对应的组件的路径，所述第二文件路径为存储所述组件标识对应的适配器的路径。

在一些实施例中，所述装置还包括：第三发送模块，用于向已建立全双工通信连接的客户端发送更新通知，所述更新通知包括待更新组件的标识。

以上装置实施例的描述，与上述方法实施例的描述是类似的，具有同方法实施例相似的有益效果。对于本申请装置实施例中未披露的技术细节，请参照本申请方法实施例的描述而理解。

需要说明的是，本申请实施例中，如果以软件功能模块的形式实现上述的可视化组件配置方法，并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请实施例的技术方案本质上或者说对相关技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机、服务器、手机等)执行本申请各个实施例所述方法的全部或部分。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read OnlyMemory，ROM)、磁碟或者光盘等各种可以存储程序代码的介质。这样，本申请实施例不限制于任何特定的硬件和软件结合。

对应地，本申请实施例提供一种计算机设备，包括存储器和处理器，所述存储器存储有可在处理器上运行的计算机程序，所述处理器执行所述程序时实现客户端或服务端侧方法中的步骤。

对应地，本申请实施例提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现客户端或服务端侧的方法中的步骤。

这里需要指出的是：以上存储介质和设备实施例的描述，与上述方法实施例的描述是类似的，具有同方法实施例相似的有益效果。对于本申请存储介质和设备实施例中未披露的技术细节，请参照本申请方法实施例的描述而理解。

需要说明的是，图6为本申请实施例中计算机设备的一种硬件实体示意图，如图6所示，该计算机设备600的硬件实体包括：处理器601、通信接口602和存储器603，其中

处理器601通常控制计算机设备600的总体操作。

通信接口602可以使计算机设备通过网络与其他终端或服务器通信。

存储器603配置为存储由处理器601可执行的指令和应用，还可以缓存待处理器601以及计算机设备600中各模块待处理或已经处理的数据，可以通过闪存(FLASH)或随机访问存储器(Random Access Memory，RAM)实现。

应理解，说明书通篇中提到的“一个实施例”或“一实施例”意味着与实施例有关的特定特征、结构或特性包括在本申请的至少一个实施例中。因此，在整个说明书各处出现的“在一个实施例中”或“在一实施例中”未必一定指相同的实施例。此外，这些特定的特征、结构或特性可以任意适合的方式结合在一个或多个实施例中。应理解，在本申请的各种实施例中，上述各过程的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本申请实施例的实施过程构成任何限定。上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。

在本申请所提供的几个实施例中，应该理解到，所揭露的设备和方法，可以通过其它的方式实现。以上所描述的设备实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，如：多个单元或组件可以结合，或可以集成到另一个***，或一些特征可以忽略，或不执行。另外，所显示或讨论的各组成部分相互之间的耦合、或直接耦合、或通信连接可以是通过一些接口，设备或单元的间接耦合或通信连接，可以是电性的、机械的或其它形式的。

上述作为分离部件说明的单元可以是、或也可以不是物理上分开的，作为单元显示的部件可以是、或也可以不是物理单元；既可以位于一个地方，也可以分布到多个网络单元上；可以根据实际的需要选择其中的部分或全部单元来实现本实施例方案的目的。另外，在本申请各实施例中的各功能单元可以全部集成在一个处理单元中，也可以是各单元分别单独作为一个单元，也可以两个或两个以上单元集成在一个单元中；上述集成的单元既可以采用硬件的形式实现，也可以采用硬件加软件功能单元的形式实现。

本领域普通技术人员可以理解：实现上述方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成，前述的程序可以存储于计算机可读取存储介质中，该程序在执行时，执行包括上述方法实施例的步骤；而前述的存储介质包括：移动存储设备、只读存储器(Read Only Memory，ROM)、磁碟或者光盘等各种可以存储程序代码的介质。

或者，本申请上述集成的单元如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请实施例的技术方案本质上或者说对相关技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机、服务器、或者网络设备等)执行本申请各个实施例所述方法的全部或部分。而前述的存储介质包括：移动存储设备、ROM、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述，仅为本申请的实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以所述权利要求的保护范围为准。

Claims (14)

1.一种可视化组件配置方法，其特征在于，包括：

客户端在进行页面初始化时，确定所述页面上的视图元素的标识；

根据所述视图元素的标识确定与所述视图元素绑定的组件配置数据，其中，所述组件配置数据包括组件标识和组件属性信息；

与组件服务端建立全双工通信连接，接收所述组件服务端广播的更新通知，所述更新通知中包括待更新组件的组件标识；

根据所述组件标识，获取所述页面的目标组件类；所述目标组件类是从对组件进行更新的组件服务端获得的；

调用解析引擎，根据所述组件属性信息和所述目标组件类，进行实例化渲染，得到目标页面；

其中，所述根据所述组件标识，获取所述页面的目标组件类，包括：检测到所述待更新组件的组件标识与所述组件配置数据中的组件标识相同时，根据所述组件标识向组件服务端，至少请求更新后的目标组件；

调用所述目标组件对应的目标适配器，按照所述更新后的目标组件的开发模式对所述更新后的目标组件进行类封装，得到目标组件类。

2.根据权利要求1所述的方法，其特征在于，所述根据所述组件标识，获取所述页面的目标组件类，包括：

向组件服务端请求与所述组件标识对应的目标组件和目标适配器；

调用所述目标适配器，按照所述目标组件的开发模式对所述目标组件进行类封装，得到目标组件类。

3.根据权利要求2所述的方法，其特征在于，所述向组件服务端请求与所述组件标识对应的目标组件和目标适配器，包括：

客户端在进行所述页面初始化时，读取所述页面的服务配置信息；

根据所述页面的服务配置信息，向所述组件服务端发送均携带有所述组件标识的加载组件请求和加载适配器请求。

4.根据权利要求3所述的方法，其特征在于，所述客户端在进行所述页面初始化时，读取所述页面的服务配置信息，包括：

所述客户端在进行所述页面初始化时，与数据服务端建立连接，得到存储路径；通过访问所述存储路径，得到所述页面的服务配置信息；

或者，

所述客户端在进行所述页面初始化时，从本地读取所述页面的服务配置信息。

5.根据权利要求1所述的方法，其特征在于，所述方法还包括：

根据删除所述组件标识对应的被更新的组件的组件实例，保存更新后的目标组件。

6.根据权利要求1所述的方法，其特征在于，所述根据所述组件标识，获取所述页面的目标组件类，包括：

根据所述组件标识，从加载的组件集合中的组件类中确定所述目标组件类。

7.根据权利要求6所述的方法，其特征在于，所述方法还包括：

客户端在进行所述页面初始化时，读取服务配置信息；

根据所述服务配置信息向所述组件服务端请求所述组件集合和适配器；

调用所述适配器，按照所述组件集合中每一组件的开发模式对对应组件进行类封装，得到所述组件集合的组件类。

8.一种可视化组件配置方法，其特征在于，包括：

在适配器与组件有升级需求时，组件服务端接收上传的组件和适配器；所述适配器用于按照所述组件的开发模式对所述组件进行类封装，得到组件类，以使得客户端能够兼容不同开发模式的组件；

与客户端建立全双工连接；

接收所述客户端发送的加载组件请求和加载适配器请求；

响应所述加载组件请求，向所述客户端发送第一文件路径，以使所述客户端访问所述第一文件路径，得到目标组件；

响应所述加载适配器请求，向所述客户端发送第二文件路径，以使所述客户端访问所述第二文件路径，得到目标适配器。

9.根据权利要求8所述的方法，其特征在于，所述加载组件请求和加载适配器请求均携带有组件标识；所述第一文件路径为存储所述组件标识对应的组件的路径，所述第二文件路径为存储所述组件标识对应的适配器的路径。

10.根据权利要求8或9所述的方法，其特征在于，所述方法还包括：

向已建立全双工通信连接的客户端发送更新通知，所述更新通知包括待更新组件的标识。

11.一种可视化组件配置装置，其特征在于，包括：

第一确定模块，用于在进行页面初始化时，确定所述页面上的视图元素的标识；

第二确定模块，用于根据所述视图元素的标识确定与所述视图元素绑定的组件配置数据，其中所述组件配置数据包括组件标识和组件属性信息；

建立模块，用于与组件服务端建立全双工通信连接；

第一接收模块，用于接收所述组件服务端广播的更新通知，所述更新通知中包括待更新组件的组件标识；

获取模块，用于根据所述组件标识，获取所述页面的目标组件类；所述目标组件类是从对组件进行更新的组件服务端获得的；

渲染模块，用于根据所述组件属性信息和所述目标组件类，进行实例化渲染，得到目标页面；

其中，所述获取模块，具体用于：检测到所述待更新组件的组件标识与所述组件配置数据中的组件标识相同时，根据所述组件标识向组件服务端，至少请求更新后的目标组件；调用所述目标组件对应的目标适配器，按照所述更新后的目标组件的开发模式对所述更新后的目标组件进行类封装，得到目标组件类。

12.一种可视化组件配置装置，其特征在于，包括：

第二接收模块，用于适配器与组件有升级需求时，接收上传的组件和适配器；所述适配器用于按照所述组件的开发模式对所述组件进行类封装，得到组件类，以使得客户端能够兼容不同开发模式的组件；

建立模块，用于与客户端建立全双工连接；

第三接收模块，用于接收所述客户端发送的加载组件请求和加载适配器请求；

第一发送模块，用于响应所述加载组件请求，向所述客户端发送第一文件路径，以使所述客户端访问所述第一文件路径，得到目标组件；

第二发送模块，用于响应所述加载适配器请求，向所述客户端发送第二文件路径，以使所述客户端访问所述第二文件路径，得到目标适配器。

13.一种计算机设备，包括存储器和处理器，所述存储器存储有可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现权利要求1至7任一项所述方法中的步骤，或8至10任一项所述方法中的步骤。

14.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该计算机程序被处理器执行时实现权利要求1至7任一项所述方法中的步骤，或8至10任一项所述方法中的步骤。