CN110347471B - 层级式显示组件系统、显示组件调用方法和装置 - Google Patents

Abstract

本发明提供了一种层级式显示组件系统、显示组件调用方法和装置，其中，该系统包括：局部显示组件，用于所在模块的多个功能组件共用；全局显示组件，用于多个模块共用。通过上述方案达到了减少代码冗余，避免功能显示错误的技术效果。

Description

层级式显示组件系统、显示组件调用方法和装置

技术领域

本发明涉及应用开发技术领域，具体而言，涉及一种层级式显示组件系统、显示组件调用方法和装置。

背景技术

目前，在利用Angular开发移动APP时，为了达到组件的高解耦度，一般是将功能组件中的显示组件单独封装，以及对该显示组件进行单独的样式设置。

然而，对于显示组件在多个功能组件中重复使用的情况没有进行代码优化，这样就会出现代码冗余的问题，且会影响开发人员对代码逻辑的清晰理解，也容易导致功能显示出错。

针对上述问题，目前尚未提出有效的解决方案。

发明内容

本发明实施例提供了一种层级式显示组件系统、显示组件调用方法和装置，以达到减少代码冗余，避免功能显示错误的效果。

一方面，提供了一种层级式显示组件系统，包括：

局部显示组件，用于所在模块的多个功能组件共用；

全局显示组件，用于多个模块共用。

在一个实施方式中，所述全局显示组件位于全局模块中，其中，全局模块中的所有组件都是可全局共用的，全局模块可被应用的其它模块调用。

在一个实施方式中，所述局部显示组件存储在所在模块的共用组件文件夹中，并在所在模块的共用组件文件夹中被声明为共用组件。

在一个实施方式中，应用于移动应用的页面开发中。

另一方面，提供了一种显示组件调用方法，包括：

确定待开发应用当前模块中不同页面是否具有相同的部分展示页面；

在确定存在相同的部分展示页面的情况下，将该相同的部分展示页面提取为局部显示组件；

确定待开发应用中是否存在多个模块同时使用的显示组件；

在确定存在多个模块同时使用的显示组件的情况下，将该同时使用的显示组件作为全局显示组件；

在开发过程中，所述当前模块中的所有功能组件共用所述局部显示页面，所述多个模块共用所述全局显示组件。

在一个实施方式中，在确定存在相同的部分展示页面的情况下，将该相同的部分展示页面提取为局部显示组件之后，还包括：

将所述局部显示组件存储在所述当前模块的共用组件文件夹中；

将所述共用组件文件中的所述局部显示组件声明为共用组件。

在一个实施方式中，在将所述共用组件文件中的所述局部显示组件声明为共用组件之后，还包括：

确定是否存在与所述局部显示组件对应部分存在差异的功能组件；

在确定存在与所述局部显示组件对应部分存在差异的功能组件的情况下，在该功能组件的样式文件夹中添加差异说明。

在一个实施方式中，在确定存在多个模块同时使用的显示组件的情况下，将该同时使用的显示组件作为全局显示组件之后，还包括：

将所述全局显示组件存储至全局模块中，其中，所述全局模块可被应用的其它模块调用。

又一方面，提供了一种显示组件调用装置，包括：

第一确定模块，用于确定待开发应用当前模块中不同页面是否具有相同的部分展示页面；

提取模块，用于在确定存在相同的部分展示页面的情况下，将该相同的部分展示页面提取为局部显示组件；

第二确定模块，用于确定待开发应用中是否存在多个模块同时使用的显示组件；

生成模块，用于在确定存在多个模块同时使用的显示组件的情况下，将该同时使用的显示组件作为全局显示组件；

开发模块，用于在开发过程中，所述当前模块中的所有功能组件共用所述局部显示页面，所述多个模块共用所述全局显示组件。

又一方面，提供了一种网络设备，包括：存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述方法的步骤。

又一方面，提供了一种非易失性计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述方法的步骤。

在上述实施例中，提供了一种层级式显示组件系统，包括：局部显示组件，用于所在模块的多个功能组件共用；全局显示组件，用于多个模块共用。即，针对共用显示组件的使用情况，将共用显示组件分为局部显示组件和全局显示组件，从而可以简化代码，以有利于开发人员逻辑性地组织代码，以保证代码功能的正常实现，通过上述方案达到了减少代码冗余，避免功能显示错误的技术效果。

附图说明

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

图1是根据本发明实施例的层级式显示组件系统的架构图；

图2是根据本发明实施例的显示组件调用方法的方法流程图；

图3是根据现有的显示组件系统示意图；

图4是根据本发明实施例的局部显示组件设计示意图；

图5是根据本发明实施例的全局显示组件设计示意图；

图6是根据本发明实施例的显示组件调用装置的结构框图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚明白，下面结合实施方式和附图，对本发明做进一步详细说明。在此，本发明的示意性实施方式及其说明用于解释本发明，但并不作为对本发明的限定。

针对现有的共用显示组件所导致的耦合性低，重复编辑共用显示组件以及对应的样式，会使得开发逻辑不清楚、功能实现易出错的问题，对将显示组件转化为共用显示组件时重用率过低的问题进行改进设计，通过显示组件重用以及所被引用的层级情况将该显示组件定义为共用显示组件，并运用层级将共用显示组件分为局部显示组件和全局显示组件。

基于此，在本例中，提出的一种层级式显示组件的设计方法，通过将显示组件的共用层级细分为局部显示组件和全局显示组件，从而可以简化代码，以有利于开发人员逻辑性地组织代码，以保证代码功能的正常实现。如图1所示，提供了一种层级式显示组件系统，可以包括：

1)局部显示组件101，用于所在模块的多个功能组件共用；

2)全局显示组件102，用于多个模块共用。

其中，上述的全局显示组件可以是位于全局模块中，其中，全局模块中的所有组件都是可全局共用的，全局模块可被应用的其它模块调用。即，当一个或多个显示组件在多个模块下的功能组件中使用时，可以将这部分显示组件提取为全局显示组件，放到共用显示组件模块(即，全局模块)中并导出。然后，在需要引用全局显示组件时，在需要引用全局显示组件的模块文件中导入全局显示组件所在模块即可。之后，这些全局显示组件可以通过所在模块被任何模块中的功能组件使用，而全局显示组件的样式被保存在全局样式中。即，站在更高层级模块间共用显示组件，可以将模块间的共用组件合并到一个全局模块中，该模块中全是全局显示组件，以方便其他模块引用。

上述的局部显示组件可以是存储在所在模块的共用组件文件夹中，并在所在模块的共用组件文件夹中被声明为共用组件。即，单个模块下，在功能组件中，可以将页面分成很多部分，也就是对页面中的组件进行细分，细分组件所达到的效果就是当多个页面相互跳转时，不同页面中会出现相同的部分展示页面，此时就可以将这部分共用的展示页面提取为共用显示组件，放到该模块的共用组件文件夹下，然后，在该模块文件中进行声明，对组件的声明可以分为共用组件声明和其他组件声明。在声明之后，该模块下的所有功能组件都可以共用共用组件下的所有显示组件。

为了减少共用样式的重写率，对于某些功能组件中的显示组件样式与共用显示组件样式部分不同的，可以在各自组件下的样式文件中添加少量特有的样式，从而减少共用样式的重写率。

上述的层级式显示组件系统可以应用在移动应用的页面开发中，具体的，可以但不限于应用在基于Angular的移动APP开发中。

在本例中还提供了一种显示组件调用方法，如图2所示，可以包括如下步骤：

步骤201：确定待开发应用当前模块中不同页面是否具有相同的部分展示页面；

步骤202：在确定存在相同的部分展示页面的情况下，将该相同的部分展示页面提取为局部显示组件；

步骤203：确定待开发应用中是否存在多个模块同时使用的显示组件；

步骤204：在确定存在多个模块同时使用的显示组件的情况下，将该同时使用的显示组件作为全局显示组件；

步骤205：在开发过程中，所述当前模块中的所有功能组件共用所述局部显示页面，所述多个模块共用所述全局显示组件。

在上例中，针对共用显示组件的使用情况，将共用显示组件分为局部显示组件和全局显示组件，从而可以简化代码，以有利于开发人员逻辑性地组织代码，以保证代码功能的正常实现。

为了实现对局部显示组件的有效识别，以方便调用，在确定存在相同的部分展示页面的情况下，将该相同的部分展示页面提取为局部显示组件之后，可以将所述局部显示组件存储在所述当前模块的共用组件文件夹中；将所述共用组件文件中的所述局部显示组件声明为共用组件。即，设置一个共用组件文件夹，将提取的局部显示组件都存储在该共用组件文件夹中，从而可以方便模块中的功能组件调用。

考虑到在实际实现的时候会有一些功能组件在显示层面有自己独有的样式，对于这种情况可以但不设置差异说明，以便这些特殊的功能组件可以按照自身需求进行显示，而不是简单调用局部显示组件。为此，在将所述共用组件文件中的所述局部显示组件声明为共用组件之后，可以确定是否存在与所述局部显示组件对应部分存在差异的功能组件；在确定存在与所述局部显示组件对应部分存在差异的功能组件的情况下，在该功能组件的样式文件夹中添加差异说明。

在一个实施方式中，在确定存在多个模块同时使用的显示组件的情况下，将该同时使用的显示组件作为全局显示组件之后，可以将所述全局显示组件存储至全局模块中，其中，所述全局模块可被应用的其它模块调用。即，可以设置全局模块，用于存储全局显示组件，以便于其它模块直接调用，从而实现更高层级的复用。

下面结合一个具体实施例对上述方法进行说明，然而，值得注意的是，该具体实施例仅是为了更好地说明本申请，并不构成对本申请的不当限定。

如图3所示为现有的应用开发过程中的共用显示组件的架构方法，该方式会导致耦合性低，重复编辑共用显示组件以及对应的样式，会使得开发逻辑不清楚、功能实现易出错的问题。为此，在本例中，提出的一种层级式显示组件的设计方法，通过将显示组件的共用层级细分为局部显示组件和全局显示组件，从而可以简化代码，以有利于开发人员逻辑性地组织代码，以保证代码功能的正常实现。

具体的，在本例中，针对共用显示组件的使用情况，将共用显示组件分为局部显示组件和全局显示组件。对于如图4所示的局部显示组件而言，是针对单个模块的，模块中多个功能组件多次使用同一显示组件时，可以将该显示组件作为局部显示组件来设计，以方便各个功能组件随意调用；对于如图5所示的全局显示组件，是站在更高层级模块间共用显示组件，可以将模块间的共用组件合并到一个全局模块中，该模块中全是全局显示组件，以方便其他模块引用。

即，对将显示组件转化为共用显示组件时重用率过低的问题进行改进设计，通过显示组件重用以及所被引用的层级情况将该该显示组件定义为共用显示组件，并运用层级将共用显示组件分为局部显示组件和全局显示组件。

Angular应用于移动APP开发中，应用是由很多模块组成的，而模块中包含功能组件，每个页面即是一个功能组件，而只用于展示的组件为显示组件，一个功能组件可以包含多个显示组件和多个功能组件。

单个模块下，因为在功能组件中，可以将页面分成很多部分，也就是对页面中的组件进行细分，细分组件所达到的效果就是当多个页面相互跳转时，不同页面中会出现相同的部分展示页面，此时就可以将这部分共用的展示页面提取为共用显示组件，放到该模块的共用组件文件夹下，然后，在该模块文件中进行声明，对组件的声明可以分为共用组件声明和其他组件声明。在声明之后，该模块下的所有功能组件都可以共用共用组件下的所有显示组件，对于某些功能组件中的显示组件样式与共用显示组件样式部分不同的，可以在各自组件下的样式文件中添加少量特有的样式，减少了共用样式的重写率。

多个模块下，当一个或多个显示组件在多个模块下的功能组件中使用时，可以将这部分显示组件提取为全局显示组件，放到共用显示组件模块中并导出。然后，在需要引用全局显示组件时，在需要引用全局显示组件的模块文件中导入全局显示组件所在模块即可。之后，这些全局显示组件可以通过所在模块被任何模块中的功能组件使用，而全局显示组件的样式被保存在全局样式中，针对特别组件需要的特别样式可以单独设置，这样也可以减少代码量。

通过上述方式可以满足Angular在移动APP页面开发应用场合的特性，即显示组件会多次使用，并可以解决现有的Angular应用开发中对显示组件设计的问题，可以满足共用显示组件的高耦合度，代码逻辑更加清晰，功能实现更加明确。

基于同一发明构思，本发明实施例中还提供了一种显示组件调用装置，如下面的实施例所述。由于显示组件调用装置解决问题的原理与显示组件调用方法相似，因此显示组件调用装置的实施可以参见显示组件调用方法的实施，重复之处不再赘述。以下所使用的，术语“单元”或者“模块”可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的装置较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。图6是本发明实施例的显示组件调用装置的一种结构框图，如图6所示，可以包括：第一确定模块601、提取模块602、第二确定模块603、生成模块604和开发模块605，下面对该结构进行说明。

第一确定模块601，用于确定待开发应用当前模块中不同页面是否具有相同的部分展示页面；

提取模块602，用于在确定存在相同的部分展示页面的情况下，将该相同的部分展示页面提取为局部显示组件；

第二确定模块603，用于确定待开发应用中是否存在多个模块同时使用的显示组件；

生成模块604，用于在确定存在多个模块同时使用的显示组件的情况下，将该同时使用的显示组件作为全局显示组件；

开发模块605，用于在开发过程中，所述当前模块中的所有功能组件共用所述局部显示页面，所述多个模块共用所述全局显示组件。

在一个实施方式中，上述提取模块602还可以在确定存在相同的部分展示页面的情况下，将该相同的部分展示页面提取为局部显示组件之后，将所述局部显示组件存储在所述当前模块的共用组件文件夹中；将所述共用组件文件中的所述局部显示组件声明为共用组件。

在一个实施方式中，上述提取模块602还可以在将所述共用组件文件中的所述局部显示组件声明为共用组件之后，确定是否存在与所述局部显示组件对应部分存在差异的功能组件；在确定存在与所述局部显示组件对应部分存在差异的功能组件的情况下，在该功能组件的样式文件夹中添加差异说明。

在一个实施方式中，上述生成模块604还可以在确定存在多个模块同时使用的显示组件的情况下，将该同时使用的显示组件作为全局显示组件之后，将所述全局显示组件存储至全局模块中，其中，所述全局模块可被应用的其它模块调用。

在另外一个实施例中，还提供了一种软件，该软件用于执行上述实施例及优选实施方式中描述的技术方案。

在另外一个实施例中，还提供了一种存储介质，该存储介质中存储有上述软件，该存储介质包括但不限于：光盘、软盘、硬盘、可擦写存储器等。

从以上的描述中，可以看出，本发明实施例实现了如下技术效果：提供了一种层级式显示组件系统，包括：局部显示组件，用于所在模块的多个功能组件共用；全局显示组件，用于多个模块共用。即，针对共用显示组件的使用情况，将共用显示组件分为局部显示组件和全局显示组件，从而可以简化代码，以有利于开发人员逻辑性地组织代码，以保证代码功能的正常实现，通过上述方案达到了减少代码冗余，避免功能显示错误的技术效果。

尽管本申请内容中提到不同的具体实施例，但是，本申请并不局限于必须是行业标准或实施例所描述的情况等，某些行业标准或者使用自定义方式或实施例描述的实施基础上略加修改后的实施方案也可以实现上述实施例相同、等同或相近、或变形后可预料的实施效果。应用这些修改或变形后的数据获取、处理、输出、判断方式等的实施例，仍然可以属于本申请的可选实施方案范围之内。

虽然本申请提供了如实施例或流程图所述的方法操作步骤，但基于常规或者无创造性的手段可以包括更多或者更少的操作步骤。实施例中列举的步骤顺序仅仅为众多步骤执行顺序中的一种方式，不代表唯一的执行顺序。在实际中的装置或客户端产品执行时，可以按照实施例或者附图所示的方法顺序执行或者并行执行(例如并行处理器或者多线程处理的环境，甚至为分布式数据处理环境)。术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、产品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、产品或者设备所固有的要素。在没有更多限制的情况下，并不排除在包括所述要素的过程、方法、产品或者设备中还存在另外的相同或等同要素。

上述实施例阐明的装置或模块等，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。为了描述的方便，描述以上装置时以功能分为各种模块分别描述。当然，在实施本申请时可以把各模块的功能在同一个或多个软件和/或硬件中实现，也可以将实现同一功能的模块由多个子模块的组合实现等。以上所描述的装置实施例仅仅是示意性的，例如，所述模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个模块或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。

本领域技术人员也知道，除了以纯计算机可读程序代码方式实现控制器以外，完全可以通过将方法步骤进行逻辑编程来使得控制器以逻辑门、开关、专用集成电路、可编程逻辑控制器和嵌入微控制器等的形式来实现相同功能。因此这种控制器可以被认为是一种硬件部件，而对其内部包括的用于实现各种功能的装置也可以视为硬件部件内的结构。或者甚至，可以将用于实现各种功能的装置视为既可以是实现方法的软件模块又可以是硬件部件内的结构。

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

通过以上的实施方式的描述可知，本领域的技术人员可以清楚地了解到本申请可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，移动终端，服务器，或者网络设备等)执行本申请各个实施例或者实施例的某些部分所述的方法。

本说明书中的各个实施例采用递进的方式描述，各个实施例之间相同或相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。本申请可用于众多通用或专用的计算机系统环境或配置中。例如：个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、多处理器系统、基于微处理器的系统、置顶盒、可编程的电子设备、网络PC、小型计算机、大型计算机、包括以上任何系统或设备的分布式计算环境等等。

虽然通过实施例描绘了本申请，本领域普通技术人员知道，本申请有许多变形和变化而不脱离本申请的精神，希望所附的实施方式包括这些变形和变化而不脱离本申请。

Claims (7)

1.一种层级式显示组件系统，其特征在于，包括：

局部显示组件，用于所在模块的多个功能组件共用；

全局显示组件，用于多个模块共用；

所述全局显示组件位于全局模块中，其中，全局模块中的所有组件都是可全局共用的，全局模块可被应用的其它模块调用；

所述局部显示组件存储在所在模块的共用组件文件夹中，并在所在模块的共用组件文件夹中被声明为共用组件；其中，在所述局部显示组件在所在模块的共用组件文件夹中被声明为共用组件之后，确定是否存在与所述局部显示组件对应部分存在差异的功能组件；

在确定存在与所述局部显示组件对应部分存在差异的功能组件的情况下，在该功能组件的样式文件夹中添加差异说明。

2.根据权利要求1所述的层级式显示组件系统，其特征在于，应用于移动应用的页面开发中。

3.一种显示组件调用方法，其特征在于，包括：

确定待开发应用当前模块中不同页面是否具有相同的部分展示页面；

在确定存在相同的部分展示页面的情况下，将该相同的部分展示页面提取为局部显示组件；

确定待开发应用中是否存在多个模块同时使用的显示组件；

在确定存在多个模块同时使用的显示组件的情况下，将该同时使用的显示组件作为全局显示组件；

在开发过程中，所述当前模块中的所有功能组件共用所述局部显示页面，所述多个模块共用所述全局显示组件；

在确定存在相同的部分展示页面的情况下，将该相同的部分展示页面提取为局部显示组件之后，还包括：

将所述局部显示组件存储在所述当前模块的共用组件文件夹中；

将所述共用组件文件中的所述局部显示组件声明为共用组件；之后，确定是否存在与所述局部显示组件对应部分存在差异的功能组件；

在确定存在与所述局部显示组件对应部分存在差异的功能组件的情况下，在该功能组件的样式文件夹中添加差异说明。

4.根据权利要求3所述的方法，其特征在于，在确定存在多个模块同时使用的显示组件的情况下，将该同时使用的显示组件作为全局显示组件之后，还包括：

将所述全局显示组件存储至全局模块中，其中，所述全局模块可被应用的其它模块调用。

5.一种显示组件调用装置，其特征在于，所述显示组件调用装置用于执行权利要求3或4所述的显示组件调用方法，所述装置包括：

第一确定模块，用于确定待开发应用当前模块中不同页面是否具有相同的部分展示页面；

提取模块，用于在确定存在相同的部分展示页面的情况下，将该相同的部分展示页面提取为局部显示组件；

第二确定模块，用于确定待开发应用中是否存在多个模块同时使用的显示组件；

生成模块，用于在确定存在多个模块同时使用的显示组件的情况下，将该同时使用的显示组件作为全局显示组件；

开发模块，用于在开发过程中，所述当前模块中的所有功能组件共用所述局部显示页面，所述多个模块共用所述全局显示组件。

6.一种网络设备，包括：存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求3至4中任一项所述方法的步骤。

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

Images