CN115756449B - 一种页面复用方法、装置、存储介质及电子设备 - Google Patents

Abstract

本说明书公开了一种页面复用方法、装置、存储介质及电子设备，本说明书实施例在获取到待开发的客户端中需要配置的多个页面的页面框架信息之后，可以确定多个页面对应的组件关系树。将组件关系树与预先构建的参考关系树进行比对，以从参考关系树中确定出由各目标组件构成的目标树结构。在参考关系树中各目标组件之间的依赖关系与在组件关系树中相匹配。最后，查询已开发的客户端所使用的目标组件的组件代码，以对组件代码进行复用。在此方法中，可以将待开发的多个页面对应的组件关系树与已开发出的客户端所包含的各页面对应的参考关系树进行比对，来确定出可以复用的组件代码，从而一次性查找出可复用的多个参考页面，提高了页面开发效率。

Description

一种页面复用方法、装置、存储介质及电子设备

技术领域

本说明书涉及计算机技术领域，尤其涉及一种页面复用方法、装置、存储介质及电子设备。

背景技术

在前端工程中，随着业务量的增多，需要开发大量的前端页面。为了减少开发前端页面的开发周期，在开发新的前端页面时，复用之前的前端页面。

然而，在前端页面开发中，现有复用页面的方法降低了页面的复用效率和页面开发效率。

发明内容

本说明书实施例提供一种页面复用方法、装置、存储介质及电子设备，以部分解决上述现有技术存在的问题。

本说明书实施例采用下述技术方案：

本说明书提供的一种页面复用方法，包括：

获取待开发的客户端中需要配置的多个页面的页面框架信息，所述页面框架信息中包含有所述多个页面需要使用的组件信息；

基于所述页面框架信息，确定所述多个页面对应的组件关系树，所述组件关系树中包含有每个页面对应的分支树，针对每个页面，该页面对应的分支树用于表示该页面所包含的各组件之间的依赖关系；

将所述组件关系树与预先构建出的参考关系树进行比对，以从所述参考关系树中确定出目标树结构，所述目标树结构中包含的目标组件之间的依赖关系，与所述目标组件在所述组件关系树中的依赖关系相匹配，所述参考关系树是基于已开发出的客户端所包含的各页面进行构建的；

查询出所述已开发出的客户端所使用的所述目标组件的组件代码，并对所述组件代码进行复用，以在所述待开发的客户端中进行页面配置。

可选地，在将所述组件关系树与预先构建出的参考关系树进行比对之前，所述方法还包括：

确定已开发出的客户端所包含的各页面，作为各参考页面；

通过静态分析，确定出所述各参考页面中所有组件之间的依赖关系；

基于所述依赖关系，确定所述各参考页面中每个组件对应的组件信息；

以所述各参考页面中每个组件为节点，构建参考关系树，其中，针对所述参考关系树中的每个节点，该节点存储有该节点对应的组件的组件信息，所述参考关系树中包含有所述各参考页面对应的分支树，针对所述各参考页面中的每个参考页面，该参考页面对应的分支树用于表示该参考页面所包含的各组件之间的依赖关系。

可选地，基于所述依赖关系，确定所述各参考页面中每个组件对应的组件信息，具体包括：

针对所述各参考页面中每个组件，基于所述各参考页面中所有组件之间的依赖关系，从所述各参考页面对应的页面代码中确定出该组件对应的组件模板；

将该组件的组件模板转换成字符串；

通过预设的正则表达式，对所述字符串进行匹配，确定出所述组件模板包含的多个标签结构；

基于所述多个标签结构，生成抽象语法树AST；

根据所述AST，确定出该组件对应的组件信息。

可选地，基于所述页面框架信息，确定所述多个页面对应的组件关系树，具体包括：

以所述页面框架信息中的各组件为节点，构建包含所述多个页面各自对应的分支树的组件关系树，其中，针对所述组件关系树中的每个节点，该节点存储有该节点对应的组件的组件信息。

可选地，将所述组件关系树与预先构建出的参考关系树进行比对，以从所述参考关系树中确定出目标树结构，具体包括：

基于深度优先遍历方式，将所述组件关系树中的每个组件与预先构建出的参考关系树中的每个组件进行比对，以从所述参考关系树中确定出目标树结构。

可选地，将所述组件关系树中的每个组件与预先构建出的参考关系树中的每个组件进行比对，以从所述参考关系树中确定出目标树结构，具体包括：

针对所述组件关系树中的每个组件，判断该组件是否为基础组件；

若该组件不是基础组件，判断该组件在所述组件关系树中是否存在子组件；

若该组件在所述组件关系树中不存在子组件，判断预先构建的参考关系树中是否存在该组件；

若所述参考关系树中存在该组件，在所述参考关系树中对该组件进行标记，并将标记出的组件确定为目标组件，以在参考关系树中确定出由各目标组件构成的目标树结构；

若所述参考关系树中不存在该组件，判断所述组件关系树中该组件的下一组件是否为基础组件。

可选地，所述方法还包括：

若该组件为基础组件，判断预先构建的参考关系树中是否存在该组件；

若所述参考关系树中存在该组件，在所述参考关系树中对该组件进行标记，并将标记出的组件确定为目标组件，以在参考关系树中确定出由各目标组件构成的目标树结构；

若所述参考关系树中不存在该组件，判断所述组件关系树中该组件的下一组件是否为基础组件。

可选地，所述方法还包括：

若该组件在所述组件关系树中存在子组件，判断在所述组件关系树中该组件的子组件是否为基础组件，直到确定出不存在子组件的组件为止。

可选地，在所述参考关系树中对该组件进行标记之后，所述方法还包括：

判断在所述组件关系树中的该组件是否存在子组件；

若在所述组件关系树中的该组件存在子组件，判断在所述参考关系树中的该组件是否存在子组件；

若在所述参考关系树中的该组件不存在子组件，取消标记。

可选地，所述方法还包括：

若在所述组件关系树中的该组件不存在子组件，判断所述组件关系树中该组件的下一组件是否为基础组件。

可选地，所述方法还包括：

若在所述参考关系树中的该组件存在子组件，判断所述组件关系树中该组件的子组件是否为基础组件。

可选地，所述组件信息中至少包括：组件名、组件路径、组件依赖数据、事件、子组件、父组件。

可选地，所述组件关系树的存储结构是基于双向链表的存储结构。

可选地，所述组件代码至少包括：组件样式代码和组件逻辑代码；

对所述组件代码进行复用，具体包括：

在所述参考关系树中，确定所述目标树结构中包含的目标组件的数量，作为第一数量；

确定包含所述目标树结构的表示完整页面的分支树，作为目标分支树；

确定出所述目标分支树所包含的组件的数量，作为第二数量；

确定第一数量与所述第二数量之间的比值；

若所述比值大于预设阈值，则对所述组件代码中的所述组件样式代码和所述组件逻辑代码进行复用；

若所述比值不大于预设阈值，则对所述组件代码中的所述组件样式代码进行复用。

本说明书提供的一种页面复用装置，包括：

获取模块，用于获取待开发的客户端中需要配置的多个页面的页面框架信息，所述页面框架信息中包含有所述多个页面需要使用的组件信息；

确定模块，用于基于所述页面框架信息，确定所述多个页面对应的组件关系树，所述组件关系树中包含有每个页面对应的分支树，针对每个页面，该页面对应的分支树用于表示该页面所包含的各组件之间的依赖关系；

比对模块，用于将所述组件关系树与预先构建出的参考关系树进行比对，以从所述参考关系树中确定出目标树结构，所述目标树结构中包含的目标组件之间的依赖关系，与所述目标组件在所述组件关系树中的依赖关系相匹配，所述参考关系树是基于已开发出的客户端所包含的各页面进行构建的；

页面复用模块，用于查询出所述已开发出的客户端所使用的所述目标组件的组件代码，以对所述组件代码进行复用，在所述待开发的客户端中进行页面配置。

本说明书提供的一种计算机可读存储介质，所述存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述的页面复用方法。

本说明书提供的一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述的页面复用方法。

本说明书实施例采用的上述至少一个技术方案能够达到以下有益效果：

本说明书实施例中在获取到待开发的客户端中需要配置的多个页面的页面框架信息之后，可以确定多个页面对应的组件关系树。将组件关系树与预先构建的参考关系树进行比对，以从参考关系树中确定出由各目标组件构成的目标树结构。在参考关系树中各目标组件之间的依赖关系与在组件关系树中相匹配。最后，查询已开发的客户端所使用的目标组件的组件代码，以对组件代码进行复用。在此方法中，可以将待开发的多个页面对应的组件关系树与已开发出的客户端所包含的各页面对应的参考关系树进行比对，来确定出可以复用的组件代码，从而一次性查找出可复用的多个参考页面，并一次性复用多个参考页面，提高了页面复用效率和页面开发效率。

附图说明

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

图1为本说明书实施例提供的页面复用方法的流程示意图；

图2为本说明书实施例提供的组件关系树的示意图；

图3为本说明书实施例提供的参考关系树的示意图；

图4为本说明书实施例提供的组件关系树中每个组件节点的存储结构的示意图；

图5为本说明书实施例提供的深度优先遍历的逻辑示意图；

图6为本说明书实施例提供的在组件关系树和参考关系树中标记出目标组件的示意图；

图7为本说明书实施例提供的页面复用装置结构示意图；

图8为本说明书实施例提供的电子设备的结构示意图。

具体实施方式

本说明书中的页面复用方法旨在将一个待开发的前端页面工程与已经开发出的前端页面工程进行比对，以查询出待开发的前端页面工程能够从已经开发出的前端页面工程中复用的页面代码。

为使本说明书的目的、技术方案和优点更加清楚，下面将结合本说明书具体实施例及相应的附图对本说明书技术方案进行清楚、完整地描述。显然，所描述的实施例仅是本说明书一部分实施例，而不是全部的实施例。基于本说明书中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本说明书保护的范围。

以下结合附图，详细说明本说明书各实施例提供的技术方案。

图1为本说明书实施例提供的页面复用方法的流程示意图，包括：

S100：获取待开发的客户端中需要配置的多个页面的页面框架信息，所述页面框架信息中包含有所述多个页面需要使用的组件信息。

在本说明书中，可以根据业务需求，需要开发满足业务需求的客户端软件。针对前端来说，前端开发人员需要为待开发的客户端配置(或开发)多个页面，作为客户端的前端页面工程。

具体的，获取待开发的客户端中需要配置的多个页面的页面框架信息。其中，页面框架信息中包含有多个页面需要使用的组件信息。每个页面需要使用的组件信息至少包括：组件名、组件路径、组件依赖数据、事件、子组件、父组件等。组件路径可以是指访问组件的路径，组件依赖数据可以是组件内部所使用或从其他组件传递的依赖数据。事件可以是指组件处于不同状态下所触发的事件，比如：点击事件、输入事件等。针对按钮组件，当点击了按钮组件，可能会发生页面跳转。针对输入框组件，当触发了输入框组件，可能会弹出输入键盘。

比如：若客户端的前端页面工程需要配置的多个页面有：用于文本查询和通过图表展示各文本的第一页面以及用于查看查询结果和编辑文本的第二页面。针对第一页面，第一页面的页面框架中包含的组件有：输入框、按钮、图表、文本查询组件，其中，输入框、按钮、图表属于基础组件，文本查询组件属于非基础组件，非基础组件可以是指由多个基础组件构成的自命名组件。针对第二页面，第二页面的页面框架中包含的组件有：按钮、表单、对话框、普通对话框、编辑对话框、表格、分页、结果组件，其中，按钮、表单、对话框、表格、分页为基础组件，普通对话框、编辑对话框、结果组件为非基础组件。其中，对话框是由按钮和表单构成的，普通对话框是由对话框构成的，编辑对话框是由普通对话框构成的，表格是由编辑对话框和按钮构成的，结果组件是由表格和分页构成的。

S102：基于所述页面框架信息，确定所述多个页面对应的组件关系树，所述组件关系树中包含有每个页面对应的分支树，针对每个页面，该页面对应的分支树用于表示该页面所包含的各组件之间的依赖关系。

在本说明书实施例中，在获取到页面框架信息之后，可以根据页面框架信息，确定出多个页面对应的组件关系树。其中，组件关系树可以是指由多个页面所需包含的所有组件构建而成的。另外，组件关系树可以是多叉树。

具体的，可以基于页面框架信息中多个页面需要使用的组件信息，确定出多个页面所需包含的各组件以及各组件之间的依赖关系。然后，以各组件为节点，以各组件之间的依赖关系为边，构建包含多个页面的页面框架的组件关系树。其中，针对组件关系树中的每个节点，该节点存储有该节点对应的组件的组件信息。另外，组件关系树中包含有每个页面对应的分支树，针对每个页面，该页面对应的分支树用于表示该页面所包含的各组件之间的依赖关系。如图2所示。

在图2中，组件关系树中的左边部分的分支树为查询文本的页面，右边部分的分支树为展示和编辑查询结果的页面。

S104：将所述组件关系树与预先构建出的参考关系树进行比对，以从所述参考关系树中确定出目标树结构，所述目标树结构中包含的目标组件之间的依赖关系，与所述目标组件在所述组件关系树中的依赖关系相匹配，所述参考关系树是基于已开发出的客户端所包含的各页面进行构建的。

在本说明书实施例中，可以将组件关系树与预先构建的参考关系树进行比对，以从参考关系树中确定出目标树结构，并将目标树结构中包含的组件作为目标组件。其中，目标树结构中包含的目标组件之间的依赖关系，与目标组件在组件关系树中的依赖关系相匹配。另外，参考关系树是基于已开发出的客户端所包含的各页面进行构建的。

在本说明书实施例中，在将组件关系树与参考关系树进行比对之前，需要先构建参考关系树。

具体的，确定已开发出的客户端所包含的各页面，作为各参考页面。然后，通过静态分析，确定出各参考页面中所有组件之间的依赖关系。之后，基于各参考页面中所有组件之间的依赖关系，确定各参考页面中每个组件对应的组件信息。最后，以各参考页面中每个组件为节点，构建参考关系树。其中，针对参考关系树中的每个节点，该节点存储有该节点对应的组件的组件信息。另外，参考关系树中包含有各参考页面对应的分支树，针对每个参考页面，该参考页面对应的分支树用于表示该参考页面所包含的各组件之间的依赖关系。

为了提高构建参考关系树的效率，可以从已开发出的客户端中选择出的至少部分参考页面。然后，以至少部分参考页面中的组件为节点，构建参考关系树。其中，参考关系树中包含有至少部分参考页面对应的分支树，针对至少部分参考页面中的每个参考页面，该参考页面对应的分支树用于表示该参考页面所包含的各组件之间的依赖关系。

在确定各参考页面中每个组件对应的组件信息时，针对各参考页面中每个组件，基于各参考页面中所有组件之间的依赖关系，从各参考页面对应的页面代码中确定出该组件对应的组件模板。其中，然后，将该组件的组件模板转换成字符串。通过预设的正则表达式，对字符串进行匹配，确定出该组件的组件模板包含的多个标签结构。之后，基于多个标签结构，生成抽象语法树AST，并根据AST，确定出该组件对应的组件信息。其中，页面代码可以是指由html超文本标记语言编写的代码。组件模板可以是指表示组件多个属性的结构的模板代码。标签结构可以是指组件模板中包含的表示多个属性的结构的代码。

在确定出该组件的组件模板包含的多个标签结构时，可以通过预设的正则表达式，识别出字符串包含的正反标签内的代码，其中，正反标签是成对出现的，一个正反标签对应组件的一个属性。另外，一个正反标签内可能内嵌有子正反标签，一个子正反标签对应一个子属性。

比如：<head><meta charset＝“utf-8”/><title>这是标题</title></head>，一对正反标签为<head></head>，这对正反标签内的代码定义了浏览器解析网页是所使用的字符集和标题名称，另一对正反标签<title></title>内的代码定义了标题名称。

在生成抽象语法树AST时，可以以多个标签结构为节点，生成抽象语法树AST。

针对每个组件，在该组件对应的生成抽象语法树之后，可以根据抽象语法树，确定出该组件对应的组件信息，并将该组件的组件信息作为参考关系树中该组件对应的节点的特征。

在确定出每个组件对应组件信息之后，可以以多个参考页面对应的组件为节点，以组件对应的组件信息为特征，构建参考关系树。如图3所示。

在图3中，以任务管理页面为例，基于任务管理页面中的各组件，构建参考关系树。在参考关系树中，任务管理页面由输入框、按钮、任务对话框、表格、分页等组件构成，输入框由按钮构成，任务对话框由普通对话框、对话框、两个按钮和表单构成。

在构建完参考关系树之后，可以将组件关系树与参考关系树进行比对。

具体的，可以通过深度优先遍历的方式，将组件关系树中的每个组件与预先构建的参考关系树进行比对，以从参考关系树中确定出目标树结构。

为了在深度优先遍历时便于找到某个组件的子组件和父组件，组件关系树可以采用双向链表的存储结构。如图4所示。在图4中，以文本查询的页面为例，文本查询节点为页面的主组件，输入框节点、按钮节点和图表节点为文本查询的子组件，另一个按钮为输入框节点的子组件。

在对组件关系树与参考关系树进行比对时，针对组件关系树中的每个组件，判断该组件是否为基础组件。

若该组件不是基础组件，判断该组件在组件关系树中是否存在子组件。

若该组件在组件关系树中不存在子组件，判断预先构建的参考关系树中是否存在该组件。若在参考关系树中存在该组件，在参考关系树中对该组件进行标记，并在组件关系树中对该组件进行标记，在对该组件进行标记之后，将标记出的组件确定为目标组件。若在参考关系树中不存在该组件，继续判断组件关系树中该组件的下一组件是否为基础组件，并继续判断下一组件是否存在于参考关系树中，直到遍历完组件关系树。

其中，在判断预先构建的参考关系树中是否存在该组件时，可以将组件关系树中的该组件与参考关系树中的所有组件进行匹配，若匹配成功，则确定参考关系树中存在该组件。具体的，针对参考关系树中的每个组件，可以确定组件关系树中的该组件对应的组件信息与参考关系树中的该组件的组件信息进行相似度，若相似度大于阈值，则确定组件关系树中的该组件与参考关系树中的该组件相匹配。

若该组件在组件关系树中存在子组件，判断在组件关系树中该组件的子组件是否为基础组件，直到确定不存在子组件的组件为止。

若该组件为基础组件，判断预先构建的参考关系树中是否存在该组件。若参考关系树中存在该组件，在参考关系树中对该组件进行标记，并在组件关系树中对该组件进行标记，在对该组件进行标记之后，将标记出的组件确定为目标组件。若在参考关系树中不存在该组件，判断组件关系树中该组件的下一组件是否为基础组件，并继续判断下一组件是否存在于参考关系树中，直到遍历完组件关系树。

在任意一个页面中，页面中普遍存在一些基础组件，因此，在组件关系树和参考关系树进行对比时，同层节点完全相同的情况是非常普遍的。但是，同层节点的相似并不意味整个页面的相似，任意两个页面的相似应该是组件关系树和参考关系树中的任意两个分支树相似，所以，当比对到只有一层节点相似时，为了提高比对精度，可以忽略比对到只有一层节点相似的组件。

具体的，在参考关系树中将该组件标记出来之后，判断在组件关系树中的该组件是否存在子组件。若在组件关系树中的该组件存在子组件，判断在参考关系树中的该组件是否存在子组件。若在参考关系树中的该组件不存在子组件，取消标记。若在参考关系树中的该组件存在子组件，判断组件关系树中该组件的子组件是否为基础组件，直到遍历完组件关系树。

若在组件关系树中的该组件不存在子组件，判断组件关系树中该组件的下一组件是否为基础组件，直到遍历完组件关系树。

在采用深度优先遍历方式对组件关系树遍历完之后，可以从参考关系树中确定出由标记的组件(即，各目标组件)所构成的树结构，作为目标树结构。由于在组件关系树中也标记出了各目标组件，因此，也可以从组件关系树中确定出由标记的组件(即，各目标组件)所构成的树结构，作为目标树结构。其中，目标树结构可以是多个，待开发的客户端需要配置的每个页面对应一个目标树结构。

需要说明的是，该组件的下一组件可能是该组件的子组件，也可能是该组件同层的其他组件。

基于上述对组件关系树的深度优先遍历，本说明书实施例中提供深度优先遍历的逻辑示意图，如图5所示。

基于上述对组件关系树和参考关系树的对比，本说明书实施例中提供在组件关系树和参考关系树中标记出目标组件的示意图，如图6所示。在图6中，针对组件关系树和参考关系树，用灰色斜线覆盖的组件为目标组件。

另外，在采用深度优先遍历方式对组件关系树遍历完之后，在确定出目标树结构时，除了将从参考关系树中标记出的组件所构成的树结构作为目标树结构之外，还可以根据参考关系树中标记出的组件，从参考关系树中确定出包含标记出的组件的最小分支树，作为目标树结构，并将目标树结构中的每个组件作为目标组件。比如：图6中包括任务对话框组件在内的分支树，图6中包括编辑对话框组件在内的分支树。

S106：查询出所述已开发出的客户端所使用的所述目标组件的组件代码，并对所述组件代码进行复用，以在所述待开发的客户端中进行页面配置。

在本说明书实施例中，在参考关系树中确定出目标树结构之后，可以根据目标树结构中包含的各目标组件，查询出已开发出的客户端所使用的各目标组件的组件代码。然后，对查询出的各目标组件的组件代码进行复用，以在待开发的客户端中进行页面配置。其中，组件代码至少包括组件执行业务时的逻辑代码以及组件的样式代码。逻辑代码可以是指组件执行不同业务时触发事件的代码，比如异步请求、事件处理等。样式代码可以表示组件的形状、大小、颜色等。

在对查询出的各目标组件的组件代码进行复用时，可以从页面复用的角度出发，若目标结构树在目标结构树所在的表示完整参考页面的分支树中占比比较小，说明待开发或需要配置的页面与已开发的参考页面的相似性小，则参考页面和待开发的页面中组件的逻辑代码可能不同，但是，参考页面和待开发的页面中组件的样式是相似的，所以可以复用参考页面中组件的样式代码。若目标结构树在目标结构树所在的表示完整参考页面的分支树中占比比较大，说明待开发或需要配置的页面与已开发的参考页面的相似性大，则参考页面和待开发的页面执行业务的逻辑是相似的，所以可以直接复用参考页面中组件的样式代码和逻辑代码。

具体的，在参考关系树中，确定目标树结构中包含的目标组件的数量，作为第一数量。在参考关系树中，确定包含目标树结构的表示完整页面的分支树，作为目标分支树。然后，确定出目标分支树所包含的组件的数量，作为第二数量。之后，确定第一数量与第二数量之间的比值。

若比值大于预设阈值，则对组件代码中的组件样式代码和组件逻辑代码进行复用；若比值不大于预设阈值，则对组件代码中的组件样式代码进行复用。

在对待开发的页面进行配置时，可以通过调用import命令，将每个目标树结构中的各目标组件的组件代码注入到页面框架中，以配置对应的页面，得到多个页面。

需要说明的是，本申请中所有获取信号、信息或数据的动作都是在遵照所在地国家相应的数据保护法规政策的前提下，并获得由相应装置所有者给予授权的情况下进行的。

通过上述图1所示的方法可见，本说明书在获取到待开发的客户端中需要配置的多个页面的页面框架信息之后，可以确定多个页面对应的组件关系树。将组件关系树与预先构建的参考关系树进行比对，以从参考关系树中确定出由各目标组件构成的目标树结构。在参考关系树中各目标组件之间的依赖关系与在组件关系树中相匹配。最后，查询已开发的客户端所使用的目标组件的组件代码，以对组件代码进行复用。在此方法中，可以将待开发的多个页面对应的组件关系树与已开发出的客户端所包含的各页面对应的参考关系树进行比对，来确定出可以复用的组件代码，从而一次性查找出可复用的多个参考页面，并一次性复用多个参考页面，提高了页面复用效率和页面开发效率。

以上为本说明书实施例提供的页面复用方法，基于同样的思路，本说明书还提供了相应的装置、存储介质和电子设备。

图7为本说明书实施例提供的一种页面复用装置的结构示意图，所述装置包括：

获取模块701，用于获取待开发的客户端中需要配置的多个页面的页面框架信息，所述页面框架信息中包含有所述多个页面需要使用的组件信息；

确定模块702，用于基于所述页面框架信息，确定所述多个页面对应的组件关系树，所述组件关系树中包含有每个页面对应的分支树，针对每个页面，该页面对应的分支树用于表示该页面所包含的各组件之间的依赖关系；

比对模块703，用于将所述组件关系树与预先构建出的参考关系树进行比对，以从所述参考关系树中确定出目标树结构，所述目标树结构中包含的目标组件之间的依赖关系，与所述目标组件在所述组件关系树中的依赖关系相匹配，所述参考关系树是基于已开发出的客户端所包含的各页面进行构建的；

页面复用模块704，用于查询出所述已开发出的客户端所使用的所述目标组件的组件代码，以对所述组件代码进行复用，在所述待开发的客户端中进行页面配置。

可选地，在将所述组件关系树与预先构建出的参考关系树进行比对之前，所述确定模块702，还用于确定已开发出的客户端所包含的各页面，作为各参考页面；通过静态分析，确定出所述各参考页面中所有组件之间的依赖关系；基于所述依赖关系，确定所述各参考页面中每个组件对应的组件信息；以所述各参考页面中每个组件为节点，构建参考关系树，其中，针对所述参考关系树中的每个节点，该节点存储有该节点对应的组件的组件信息，所述参考关系树中包含有所述各参考页面对应的分支树，针对所述各参考页面中的每个参考页面，该参考页面对应的分支树用于表示该参考页面所包含的各组件之间的依赖关系。

可选地，所述确定模块702，还用于针对所述各参考页面中每个组件，基于所述各参考页面中所有组件之间的依赖关系，从所述各参考页面对应的页面代码中确定出该组件对应的组件模板；将该组件的组件模板转换成字符串；通过预设的正则表达式，对所述字符串进行匹配，确定出所述组件模板包含的多个标签结构；基于所述多个标签结构，生成抽象语法树AST；根据所述AST，确定出该组件对应的组件信息。

可选地，所述确定模块702具体用于，以所述页面框架信息中的各组件为节点，构建包含所述多个页面各自对应的分支树的组件关系树，其中，针对所述组件关系树中的每个节点，该节点存储有该节点对应的组件的组件信息。

可选地，所述比对模块703具体用于，基于深度优先遍历方式，将所述组件关系树中的每个组件与预先构建出的参考关系树中的每个组件进行比对，以从所述参考关系树中确定出目标树结构。

可选地，所述比对模块703具体用于，针对所述组件关系树中的每个组件，判断该组件是否为基础组件；若该组件不是基础组件，判断该组件在所述组件关系树中是否存在子组件；若该组件在所述组件关系树中不存在子组件，判断预先构建的参考关系树中是否存在该组件；若所述参考关系树中存在该组件，在所述参考关系树中对该组件进行标记，并将标记出的组件确定为目标组件，以在参考关系树中确定出由各目标组件构成的目标树结构；若所述参考关系树中不存在该组件，判断所述组件关系树中该组件的下一组件是否为基础组件。

可选地，所述比对模块703还用于，若该组件为基础组件，判断预先构建的参考关系树中是否存在该组件；若所述参考关系树中存在该组件，在所述参考关系树中对该组件进行标记，并将标记出的组件确定为目标组件，以在参考关系树中确定出由各目标组件构成的目标树结构；若所述参考关系树中不存在该组件，判断所述组件关系树中该组件的下一组件是否为基础组件。

可选地，所述比对模块703还用于，若该组件在所述组件关系树中存在子组件，判断在所述组件关系树中该组件的子组件是否为基础组件，直到确定出不存在子组件的组件为止。

可选地，所述比对模块703还用于，判断在所述组件关系树中的该组件是否存在子组件；若在所述组件关系树中的该组件存在子组件，判断在所述参考关系树中的该组件是否存在子组件；若在所述参考关系树中的该组件不存在子组件，取消标记。

可选地，所述比对模块703还用于，若在所述组件关系树中的该组件不存在子组件，判断所述组件关系树中该组件的下一组件是否为基础组件。

可选地，所述比对模块703还用于，若在所述参考关系树中的该组件存在子组件，判断所述组件关系树中该组件的子组件是否为基础组件。

可选地，所述组件信息中至少包括：组件名、组件特性，所述组件特性至少包括：组件路径、组件依赖数据、事件、子组件、父组件。

可选地，所述组件关系树的存储结构是基于双向链表的存储结构。

可选地，所述组件代码至少包括：组件样式代码和组件逻辑代码。

可选地，所述页面复用模块704具体用于，在参考关系树中，确定所述目标树结构中包含的目标组件的数量，作为第一数量；确定包含所述目标树结构的表示完整页面的分支树，作为目标分支树；确定出所述目标分支树所包含的组件的数量，作为第二数量；确定所述第一数量与所述第二数量之间的比值；若所述比值大于预设阈值，则对所述组件代码中的所述组件样式代码和所述组件逻辑代码进行复用；若所述比值不大于预设阈值，则对所述组件代码中的所述组件样式代码进行复用。

本说明书还提供了一种计算机可读存储介质，所述存储介质存储有计算机程序，所述计算机程序被处理器执行时可用于执行上述图1提供的页面复用方法。

基于图1所示的页面复用方法，本说明书实施例还提供了图8所示的电子设备的结构示意图。如图8，在硬件层面，该电子设备包括处理器、内部总线、网络接口、内存以及非易失性存储器，当然还可能包括其他业务所需要的硬件。处理器从非易失性存储器中读取对应的计算机程序到内存中然后运行，以实现上述图1所述的页面复用方法。

当然，除了软件实现方式之外，本说明书并不排除其他实现方式，比如逻辑器件抑或软硬件结合的方式等等，也就是说以下处理流程的执行主体并不限定于各个逻辑单元，也可以是硬件或逻辑器件。

在20世纪90年代，对于一个技术的改进可以很明显地区分是硬件上的改进(例如，对二极管、晶体管、开关等电路结构的改进)还是软件上的改进(对于方法流程的改进)。然而，随着技术的发展，当今的很多方法流程的改进已经可以视为硬件电路结构的直接改进。设计人员几乎都通过将改进的方法流程编程到硬件电路中来得到相应的硬件电路结构。因此，不能说一个方法流程的改进就不能用硬件实体模块来实现。例如，可编程逻辑器件(Programmable Logic Device,PLD)(例如现场可编程门阵列(Field Programmable GateArray，FPGA))就是这样一种集成电路，其逻辑功能由用户对器件编程来确定。由设计人员自行编程来把一个数字系统“集成”在一片PLD上，而不需要请芯片制造厂商来设计和制作专用的集成电路芯片。而且，如今，取代手工地制作集成电路芯片，这种编程也多半改用“逻辑编译器(logic compiler)”软件来实现，它与程序开发撰写时所用的软件编译器相类似，而要编译之前的原始代码也得用特定的编程语言来撰写，此称之为硬件描述语言(Hardware Description Language，HDL)，而HDL也并非仅有一种，而是有许多种，如ABEL(Advanced Boolean Expression Language)、AHDL(Altera Hardware DescriptionLanguage)、Confluence、CUPL(Cornell University Programming Language)、HDCal、JHDL(Java Hardware Description Language)、Lava、Lola、MyHDL、PALASM、RHDL(RubyHardware Description Language)等，目前最普遍使用的是VHDL(Very-High-SpeedIntegrated Circuit Hardware Description Language)与Verilog。本领域技术人员也应该清楚，只需要将方法流程用上述几种硬件描述语言稍作逻辑编程并编程到集成电路中，就可以很容易得到实现该逻辑方法流程的硬件电路。

控制器可以按任何适当的方式实现，例如，控制器可以采取例如微处理器或处理器以及存储可由该(微)处理器执行的计算机可读程序代码(例如软件或固件)的计算机可读介质、逻辑门、开关、专用集成电路(Application Specific Integrated Circuit，ASIC)、可编程逻辑控制器和嵌入微控制器的形式，控制器的例子包括但不限于以下微控制器：ARC 625D、Atmel AT91SAM、Microchip PIC18F26K20以及Silicone Labs C8051F320，存储器控制器还可以被实现为存储器的控制逻辑的一部分。本领域技术人员也知道，除了以纯计算机可读程序代码方式实现控制器以外，完全可以通过将方法步骤进行逻辑编程来使得控制器以逻辑门、开关、专用集成电路、可编程逻辑控制器和嵌入微控制器等的形式来实现相同功能。因此这种控制器可以被认为是一种硬件部件，而对其内包括的用于实现各种功能的装置也可以视为硬件部件内的结构。或者甚至，可以将用于实现各种功能的装置视为既可以是实现方法的软件模块又可以是硬件部件内的结构。

上述实施例阐明的系统、装置、模块或单元，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。一种典型的实现设备为计算机。具体的，计算机例如可以为个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任何设备的组合。

为了描述的方便，描述以上装置时以功能分为各种单元分别描述。当然，在实施本说明书时可以把各单元的功能在同一个或多个软件和/或硬件中实现。

本领域内的技术人员应明白，本说明书的实施例可提供为方法、系统、或计算机程序产品。因此，本说明书可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本说明书可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本说明书是参照根据本说明书实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

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

本领域技术人员应明白，本说明书的实施例可提供为方法、系统或计算机程序产品。因此，本说明书可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本说明书可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本说明书可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本说明书，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上所述仅为本说明书的实施例而已，并不用于限制本说明书。对于本领域技术人员来说，本说明书可以有各种更改和变化。凡在本说明书的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本说明书的权利要求范围之内。

Claims (17)

1.一种页面复用方法，其特征在于，包括：

获取待开发的客户端中需要配置的多个页面的页面框架信息，所述页面框架信息中包含有所述多个页面需要使用的组件信息；

基于所述页面框架信息，确定所述多个页面对应的组件关系树，所述组件关系树中包含有每个页面对应的分支树，针对每个页面，该页面对应的分支树用于表示该页面所包含的各组件之间的依赖关系；

将所述组件关系树与预先构建出的参考关系树进行比对，以从所述参考关系树中确定出目标树结构，所述目标树结构中包含的目标组件之间的依赖关系，与所述目标组件在所述组件关系树中的依赖关系相匹配，所述参考关系树是基于已开发出的客户端所包含的各页面进行构建的；

查询出所述已开发出的客户端所使用的所述目标组件的组件代码，并对所述组件代码进行复用，以在所述待开发的客户端中进行页面配置。

2.如权利要求1所述的方法，其特征在于，在将所述组件关系树与预先构建出的参考关系树进行比对之前，所述方法还包括：

确定已开发出的客户端所包含的各页面，作为各参考页面；

通过静态分析，确定出所述各参考页面中所有组件之间的依赖关系；

基于所述依赖关系，确定所述各参考页面中每个组件对应的组件信息；

以所述各参考页面中每个组件为节点，构建参考关系树，其中，针对所述参考关系树中的每个节点，该节点存储有该节点对应的组件的组件信息，所述参考关系树中包含有所述各参考页面对应的分支树，针对所述各参考页面中的每个参考页面，该参考页面对应的分支树用于表示该参考页面所包含的各组件之间的依赖关系。

3.如权利要求2所述的方法，其特征在于，基于所述依赖关系，确定所述各参考页面中每个组件对应的组件信息，具体包括：

针对所述各参考页面中每个组件，基于所述各参考页面中所有组件之间的依赖关系，从所述各参考页面对应的页面代码中确定出该组件对应的组件模板；

将该组件的组件模板转换成字符串；

通过预设的正则表达式，对所述字符串进行匹配，确定出所述组件模板包含的多个标签结构；

基于所述多个标签结构，生成抽象语法树AST；

根据所述AST，确定出该组件对应的组件信息。

4.如权利要求1所述的方法，其特征在于，基于所述页面框架信息，确定所述多个页面对应的组件关系树，具体包括：

以所述页面框架信息中的各组件为节点，构建包含所述多个页面各自对应的分支树的组件关系树，其中，针对所述组件关系树中的每个节点，该节点存储有该节点对应的组件的组件信息。

5.如权利要求1所述的方法，其特征在于，将所述组件关系树与预先构建出的参考关系树进行比对，以从所述参考关系树中确定出目标树结构，具体包括：

基于深度优先遍历方式，将所述组件关系树中的每个组件与预先构建出的参考关系树中的每个组件进行比对，以从所述参考关系树中确定出目标树结构。

6.如权利要求5所述的方法，其特征在于，将所述组件关系树中的每个组件与预先构建出的参考关系树中的每个组件进行比对，以从所述参考关系树中确定出目标树结构，具体包括：

针对所述组件关系树中的每个组件，判断该组件是否为基础组件；

若该组件不是基础组件，判断该组件在所述组件关系树中是否存在子组件；

若该组件在所述组件关系树中不存在子组件，判断预先构建的参考关系树中是否存在该组件；

若所述参考关系树中存在该组件，在所述参考关系树中对该组件进行标记，并将标记出的组件确定为目标组件，以在参考关系树中确定出由各目标组件构成的目标树结构；

若所述参考关系树中不存在该组件，判断所述组件关系树中该组件的下一组件是否为基础组件。

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

若该组件为基础组件，判断预先构建的参考关系树中是否存在该组件；

若所述参考关系树中存在该组件，在所述参考关系树中对该组件进行标记，并将标记出的组件确定为目标组件，以在参考关系树中确定出由各目标组件构成的目标树结构；

若所述参考关系树中不存在该组件，判断所述组件关系树中该组件的下一组件是否为基础组件。

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

若该组件在所述组件关系树中存在子组件，判断在所述组件关系树中该组件的子组件是否为基础组件，直到确定出不存在子组件的组件为止。

9.如权利要求6或7任一所述的方法，其特征在于，在所述参考关系树中对该组件进行标记之后，所述方法还包括：

判断在所述组件关系树中的该组件是否存在子组件；

若在所述组件关系树中的该组件存在子组件，判断在所述参考关系树中的该组件是否存在子组件；

若在所述参考关系树中的该组件不存在子组件，取消标记。

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

若在所述组件关系树中的该组件不存在子组件，判断所述组件关系树中该组件的下一组件是否为基础组件。

11.如权利要求9所述的方法，其特征在于，所述方法还包括：

若在所述参考关系树中的该组件存在子组件，判断所述组件关系树中该组件的子组件是否为基础组件。

12.如权利要求1所述的方法，其特征在于，所述组件信息中至少包括：组件名、组件路径、组件依赖数据、事件、子组件、父组件。

13.如权利要求1所述的方法，其特征在于，所述组件关系树的存储结构是基于双向链表的存储结构。

14.如权利要求1所述的方法，其特征在于，所述组件代码至少包括：组件样式代码和组件逻辑代码；

对所述组件代码进行复用，具体包括：

在所述参考关系树中，确定所述目标树结构中包含的目标组件的数量，作为第一数量；

确定包含所述目标树结构的表示完整页面的分支树，作为目标分支树；

确定出所述目标分支树所包含的组件的数量，作为第二数量；

确定所述第一数量与所述第二数量之间的比值；

若所述比值大于预设阈值，则对所述组件代码中的所述组件样式代码和所述组件逻辑代码进行复用；

若所述比值不大于预设阈值，则对所述组件代码中的所述组件样式代码进行复用。

15.一种页面复用装置，其特征在于，包括：

获取模块，用于获取待开发的客户端中需要配置的多个页面的页面框架信息，所述页面框架信息中包含有所述多个页面需要使用的组件信息；

确定模块，用于基于所述页面框架信息，确定所述多个页面对应的组件关系树，所述组件关系树中包含有每个页面对应的分支树，针对每个页面，该页面对应的分支树用于表示该页面所包含的各组件之间的依赖关系；

比对模块，用于将所述组件关系树与预先构建出的参考关系树进行比对，以从所述参考关系树中确定出目标树结构，所述目标树结构中包含的目标组件之间的依赖关系，与所述目标组件在所述组件关系树中的依赖关系相匹配，所述参考关系树是基于已开发出的客户端所包含的各页面进行构建的；

页面复用模块，用于查询出所述已开发出的客户端所使用的所述目标组件的组件代码，并对所述组件代码进行复用，以在所述待开发的客户端中进行页面配置。

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

17.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现上述权利要求1-14任一项所述的方法。

Images