CN107608672A - 一种ui模块管理器、ui模块管理方法和*** - Google Patents

Abstract

本发明实施例提供了一种UI模块管理器、UI模块管理方法和***，至少用于实现提供一种UI模块管理器，以达到便于复用UI模块，并减少开发人员在不同工作栈间切换的技术效果。所述UI模块管理器包括：初始化单元，用于创建待组装的UI模块的样例代码目录，所述样例代码目录包括所述UI模块的信息描述文件，所述信息描述文件包括UI模块的标识信息；组装单元，用于读取所述信息描述文件，根据所述信息描述文件中的文件入口组装所述UI模块；编译单元，用于编译所述UI模块，并将编译结果输出到所述信息描述文件中；发布单元，用于将编译完成的所述UI模块发送到模块库；安装单元，用于安装所述需要安装的UI模块。

Description

一种UI模块管理器、UI模块管理方法和***

技术领域

本发明涉及计算机技术领域，尤其涉及一种UI模块管理器、UI模块管理方法和***。

背景技术

一个网页页面通常由HTML(超文本标记语言，HyperText Markup Language)代码、CSS(层叠样式表，Cascading Style Sheets)代码和JS(爪哇脚本，JavaScript)代码三个部分组成。为了便于开发，往往将一个网页划分为多个JS模块，每个JS模块均由HTML代码、CSS代码和JS代码三个部分组成。开发人员以JS代码作为单个模块的入口，HTML代码片段和CSS代码片段则作为该JS模块的一个或多个UI(用户界面，User Interface)模块被所引入。

然而，在现有技术中，一个UI模块只能被一个JS模块所引用，难以被复用。并且，开发人员开发JS模块的过程中，不得不地在JS代码工作栈和UI模块工作栈之间切换，导致开发效率低。

发明内容

本发明实施例提供了一种UI模块管理器、UI模块管理方法和***，至少用于实现提供一种UI模块管理器，以达到便于复用UI模块，并减少开发人员在不同工作栈间切换的技术效果。

第一方面，本发明提供了一种UI模块管理器，包括：

初始化单元，用于创建待组装的UI模块的样例代码目录，所述样例代码目录包括所述UI模块的信息描述文件，所述信息描述文件包括UI模块的标识信息；

组装单元，用于读取所述信息描述文件，根据所述信息描述文件中的文件入口组装所述UI模块；

编译单元，用于编译所述UI模块，并将编译结果输出到所述信息描述文件中；

发布单元，用于将编译完成的所述UI模块发送到模块库；

安装单元，用于根据需要安装的UI模块的标识信息，在所述模块库中搜索并获取所述需要安装的UI模块，并安装所述需要安装的UI模块。

可选的，所述信息描述文件包括超文本标记语言HTML文件入口，所述HTML文件用于描述所述UI模块所需要的HTML片段、所述HTML片段的引用路径、层叠样式表CSS片段和所述CSS片段的引用路径，所述组装单元用于根据所述HTML入口文件描述的所述HTML片段、所述HTML片段的引用路径、所述CSS片段和所述CSS片段的引用路径组装所述UI模块的HTML代码和所述CSS代码。

可选的，所述HTML代码包括模板代码，所述模板代码用于描述所述UI模块所引用的其他UI模块和/或所述其他UI模块的文件。

可选的，所述信息描述文件包括输出目录，所述编译单元用于将编译结果输出到所述输出目录下。

可选的，所述发布单元用于将编译完成的所述UI模块以及所述UI模块所引用的所述其他UI模块和/或所述其他UI模块的文件打包发送到所述模块库。

可选的，所述初始化单元用于生成所述UI模块的所述信息描述文件、代码文件和引用文件。

第二方面，本发明提供了一种UI模块管理方法，包括：

创建待组装的UI模块的样例代码目录，所述样例代码目录包括所述UI模块的信息描述文件，所述信息描述文件包括所述UI模块的标识信息；

读取所述信息描述文件，根据所述信息描述文件中的入口文件组装所述UI模块；

编译所述UI模块，并将编译结果输出到所述信息描述文件中；

将编译完成的所述UI模块发送到模块库；

根据需要安装的UI模块的标识信息，在所述模块库中搜索并获取所述需要安装的UI模块，并安装所述需要安装的UI模块。

可选的，所述信息描述文件包括HTML文件入口，所述HTML文件用于描述所述UI模块所需要的HTML片段、所述HTML片段的引用路径、层叠样式表CSS片段和所述CSS片段的引用路径，所述根据所述信息描述文件中的入口文件组装所述UI模块，包括：

根据所述HTML入口文件描述的所述HTML片段、所述HTML片段的引用路径、所述CSS片段和所述CSS片段的引用路径组装所述UI模块的HTML代码和所述CSS代码。

可选的，所述HTML代码包括模板代码，所述模板代码用于描述所述UI模块所引用的其他UI模块和/或所述其他UI模块的文件。

可选的，所述信息描述文件包括输出目录，所述将编译结果输出到所述信息描述文件中，包括：

将编译结果输出到所述输出目录下。

可选的，所述将编译完成的所述UI模块发送到模块库，包括：

将编译完成的所述UI模块以及所述UI模块所引用的所述其他UI模块和/或所述其他UI模块的文件打包发送到所述模块库。

可选的，所述创建待组装的UI模块的样例代码目录，包括：

生成所述UI模块的所述信息描述文件、代码文件和引用文件。

第三方面，本发明提供了一种UI模块管理***，包括：

服务器以及接入所述服务器的多个客户端；

每个所述客户端上运行有如第一方面所述的UI模块管理器；

所述服务器上运行有模块库。

第四方面，本发明提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现第二方面所述方法的步骤。

第五方面，本发明提供了一种客户端，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现第二方面所述方法的步骤。

本申请实施例中的上述一个或多个技术方案，至少具有如下一种或多种技术效果：

在本发明实施例的技术方案中，UI模块管理器的组装单元组装UI模块，初始化单元初始化UI模块，编译单元编译UI模块，然后发布模块将UI模块发布到模块库中，安装单元再从模块库中搜索并安装需要的UI模块，所以一方面，由于客户端的UI模块可以从模块库中获取并安装的，那么同一个UI模块就可以就安装到不同客户端的JS模块，故而提高了UI模块的复用，另一方面，由于开发人员可以直接从模块库获取所需的一个或多个UI模块，所以开发人员就不需要在UI模块工作栈中编写UI模块，进而也就不需要在JS代码工作栈和UI模块工作栈之间切换，故而提高了开发效率。

附图说明

图1为本发明实施例中UI模块管理器的架构示意图；

图2为本发明实施例中UI模块管理方法的流程图；

图3为本发明实施例中UI模块管理***的架构示意图；

图4为本发明实施例中客户端的结构示意图。

具体实施方式

本发明实施例提供了一种UI模块管理器、UI模块管理方法和***，至少用于实现提供一种UI模块管理器，以达到便于复用UI模块，并减少开发人员在不同工作栈间切换的技术效果。

为了解决上述技术问题，本发明提供的技术方案总体思路如下：

在本发明实施例的技术方案中，UI模块管理器的组装单元组装UI模块，初始化单元初始化UI模块，编译单元编译UI模块，然后发布模块将UI模块发布到模块库中，安装单元再从模块库中搜索并安装需要的UI模块，所以一方面，由于客户端的UI模块可以从模块库中获取并安装的，那么同一个UI模块就可以就安装到不同客户端的JS模块，故而提高了UI模块的复用，另一方面，由于开发人员可以直接从模块库获取所需的一个或多个UI模块，所以开发人员就不需要在UI模块工作栈中编写UI模块，进而也就不需要在JS代码工作栈和UI模块工作栈之间切换，故而提高了开发效率。

下面通过附图以及具体实施例对本发明技术方案做详细的说明，应当理解本申请实施例以及实施例中的具体特征是对本申请技术方案的详细的说明，而不是对本申请技术方案的限定，在不冲突的情况下，本申请实施例以及实施例中的技术特征可以相互组合。

本文中术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中字符“/”，一般表示前后关联对象是一种“或”的关系。

本发明第一方面提供了一种UI模块管理器，请参考图1，为本发明实施例中UI模块管理器架构示意图。具体来讲，本发明实施例中的UI模块管理器包括初始化单元、组装单元、编译单元、发布单元和安装单元。

本发明实施例中的UI模块管理器安装并运行在各个客户端中，客户端具体为开发人员开发JS模块的设备，可以为一体机、笔记本电脑或台式机等，本发明不做具体限制。利用本发明实施例中的UI模块管理器，开发人员可以直接获取已有的UI模块，也可以生成供自己或其他开发人员使用的UI模块，还可以对已有的UI模块进行维护。

下面以生成UI模块为例来对UI模块管理器其中几个单元进行介绍。当要生成一个新的UI模块时，首先，UI模块管理器运行初始化单元hulu initmodule_name，其中，本发明实施例中以hulu作为UI模块管理器的名称，在具体实现过程中则可以其他名称命名。初始化单元对待组装的UI模块进行初始化，进而创建出UI模块的样例代码目录。具体地，该样例代码目录包括UI模块的信息描述文件hulu.json，用于存放具体代码的代码文件，存放引用资源的引用文件等。

其中，信息描述文件hulu.json为描述UI模块标识信息和属性的文件，UI模块的标识信息包括但不限于UI模块的名字name、UI模块的版本号version、UI模块的作者author和UI模块的简要描述description等，UI模块的属性包括但不限于文件入口entries、UI模块的配置信息config(例如CSS文件是否分割等)以及output输出目录等，本发明所属领域的普通技术人员可以根据实际进行设置，本发明不做具体限制。代码文件包括用于存放UI模块的HTML代码的HTML文件和用于存放CSS代码的CSS文件。引用文件用于存放UI模块所应用的资源文件，例如图片文件等。

UI模块初始化完成后，组装单元检索待组装的UI模块的信息，如果检索到UI模块中包括信息描述文件hulu.json，则认为该UI模块是UI模块管理器具有管理权限的UI模块。反之，如果UI模块管理器未检索到UI模块的信息描述文件hulu.json，则UI模块管理器无法管理该UI模块。

接下来，组装单元如果检索到UI模块具有信息描述文件hulu.json，则读取信息描述文件，根据信息描述文件中的文件入口组装该UI模块。具体来讲，本发明实施例中的UI模块的组装方式在HTML文件中描述，具体地，HTML文件描述了UI模块所需要的HTML片段和该HTML片段的引用路径，以及该UI模块所需要的CSS片段和该CSS片段的引用路径。另外，在本发明实施例中，信息描述文件包括的文件入口entries具体包括HTML文件入口，因此，组装模块读取信息描述文件hulu.json中的HTML文件入口，进而从该文件入口读取到HTML文件，进而根据HTML文件中HTML片段的引用路径获取所需的HTML片段，以及根据CSS片段的引用路径获取所需的CSS片段。然后，组装单元将HTML片段代码添加到HTML文件中，以及将CSS文件添加到CSS文件中，进而完成UI模块的组装。

组装完成后，接下来，编译单元对UI模块中的代码进行编译，并将编译结果输出到信息描述文件中。具体来讲，为了增强UI模块的复用，HTML文件中的HTML代码，除了包括能够被浏览器直接解释的HTML代码，还包括模板代码。具体来讲，开发人员利用模板代码描述一个UI模块所引用其他UI模块和/或其他UI模块的文件，具体地，该模板语言包括注释语句、引用语句、资源引用语句、挂载语句和宏语句。其中，引用语句用于描述一个UI模块引用其他UI模块；资源引用语句用于描述一个UI模块引用其他UI模块的文件，例如其他UI模块的CSS文件和图片文件等；挂载语句用于引入CSS或CSS文件将被编译后合并成的文件；宏语句，用于引用静态变量或代码片段。

编译单元读取HTML文件中的模板语句，进而将模板语言编译为浏览器可以解释的HTML语言。另外，对于HTML文件中的HTML语言，则按照编译HTML语言的方式进行编译，这里就不再详细介绍了。信息描述文件hulu.json中还包括输出目录output，编译完成后，编译单元将编译结果输出到信息描述文件hulu.json中的输出目录output中，以便浏览器能够基于输出目录output读取并解释安装后的UI模块。

最后，由发布单元将编译完成的UI模块发送到远程模块库中。具体来讲，模块库安装并运行在服务器中，每个客户端则通过有线或无线网络接入服务器。客户端中的发布单元将编译完成的UI模块以及UI模块所引用的其他UI模块和/或其他UI模块的文件打包发送到模块库，进而模块库将UI模块存储在模块库中。由此，就实现了生成新UI模块。

下面对以获取已有的UI模块为例来对UI模块管理器另外几个单元进行介绍。

在具体实现过程中，当开发人员需要获取并安装UI模块时，向模块库发送需要安装的UI模块的标识信息，例如UI模块的名称、版本号或作者等一个或多个，本发明不做具体限制。进而，服务器按照需要安装的UI模块的标识信息，在模块库中搜索对应的UI模块。当服务器搜索到对应的UI模块，则将该UI模块的副本下发给客户端。在本发明实施例中，服务器向客户端下发UI模块的副本，是为了保证服务器始终存储有该UI模块，进而在其他客户端也需要安装该UI模块时，依然可以向其他客户端提供该UI模块，进而实现UI模块的复用。另外，服务器具体是将模块库中存储的编译完成的UI模块以及UI模块所引用的其他UI模块和/或其他UI模块的副本文件打包发送到客户端。

接下来，客户端接收到UI模块的副本后，UI模块管理器的安装单元则将接收到的UI模块安装在客户端。然后，开发人员再编写安装完成的UI模块的JS代码。由此，就实现了获取并安装已有的UI模块。

由于客户端可以从模块库直接获取UI模块的副本，因此，即使是同一个UI模块也可以被复用在多个JS模块中，所以，提高了UI模块的复用。

另外，如果需要对已有的UI模块进行维护时，开发人员可以直接在服务器的模块库中统一对需要维护的UI模块进行维护，例如修改模块库中一个或多个UI模块的版本号。或者，开发人员也可以利用UI模块管理器从模块库下载UI模块的副本，并基于该副本进行维护，例如修改版本号或修改引用资源等，然后，再将修改完成的UI模块重新编译并发送到模块库覆盖原有UI模块，进而实现维护UI模块。

基于与前述实施例中UI模块管理器同样的发明构思，本发明第二方面还提供一种UI模块管理方法，如图2所示，包括：

S101：创建待组装的UI模块的样例代码目录，所述样例代码目录包括所述UI模块的信息描述文件，所述信息描述文件包括所述UI模块的标识信息；

S102：读取所述信息描述文件，根据所述信息描述文件中的入口文件组装所述UI模块；

S103：编译所述UI模块，并将编译结果输出到所述信息描述文件中；

S104：将编译完成的所述UI模块发送到模块库；

S105：根据需要安装的UI模块的标识信息，在所述模块库中搜索并获取所述需要安装的UI模块，并安装所述需要安装的UI模块。

进一步，所述信息描述文件包括HTML文件入口，所述HTML文件用于描述所述UI模块所需要的HTML片段、所述HTML片段的引用路径、层叠样式表CSS片段和所述CSS片段的引用路径，S102中根据所述信息描述文件中的入口文件组装所述UI模块包括：根据所述HTML入口文件描述的所述HTML片段、所述HTML片段的引用路径、所述CSS片段和所述CSS片段的引用路径组装所述UI模块的HTML代码和所述CSS代码。

进一步，所述HTML代码包括模板代码，所述模板代码用于描述所述UI模块所引用的其他UI模块和/或所述其他UI模块的文件。

进一步，所述信息描述文件包括输出目录，S103中并将编译结果输出到所述信息描述文件中包括：将编译结果输出到所述输出目录下。

进一步，S104包括：将编译完成的所述UI模块以及所述UI模块所引用的所述其他UI模块和/或所述其他UI模块的文件打包发送到所述模块库。

进一步，S101包括：生成所述UI模块的所述信息描述文件、代码文件和引用文件。

前述图1实施例中的UI模块管理器的各种变化方式和具体实例同样适用于本实施例的UI模块管理方法，通过前述对UI模块管理器的详细描述，本领域技术人员可以清楚的知道本实施例中UI模块管理方法的实施方法，所以为了说明书的简洁，在此不再详述。

基于与前述实施例中UI模块管理器同样的发明构思，本发明第三方面还提供一种UI模块管理***，如图3所示，包括：

服务器以及接入服务器的多个客户端；

每个客户端上运行有前述实施例所述的UI模块管理器；

服务器上运行有前述实施例所述的模块库。

前述图1实施例中的UI模块管理器的各种变化方式和具体实例同样适用于本实施例的UI模块管理***，通过前述对UI模块管理器的详细描述，本领域技术人员可以清楚的知道本实施例中UI模块管理***的实施方法，所以为了说明书的简洁，在此不再详述。

基于与前述实施例中UI模块管理方法同样的发明构思，本发明还提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现前文所述UI模块管理方法的任一方法的步骤。

基于与前述实施例中UI模块管理方法同样的发明构思，本发明还提供一种一种客户端，如图4所示，包括存储器404、处理器402及存储在存储器404上并可在处理器上运行的计算机程序，所述处理器402执行所述程序时实现前文所述UI模块管理方法的任一方法的步骤。

其中，在图4中，总线架构(用总线400来代表)，总线400可以包括任意数量的互联的总线和桥，总线400将包括由处理器402代表的一个或多个处理器和存储器404代表的存储器的各种电路链接在一起。总线400还可以将诸如***设备、稳压器和功率管理电路等之类的各种其他电路链接在一起，这些都是本领域所公知的，因此，本文不再对其进行进一步描述。总线接口406在总线400和接收器401和发送器403之间提供接口。接收器401和发送器403可以是同一个元件，即收发机，提供用于在传输介质上与各种其他装置通信的单元。

处理器402负责管理总线400和通常的处理，而存储器404可以被用于存储处理器402在执行操作时所使用的数据。

本申请实施例中的上述一个或多个技术方案，至少具有如下一种或多种技术效果：

在本发明实施例的技术方案中，UI模块管理器的组装单元组装UI模块，初始化单元初始化UI模块，编译单元编译UI模块，然后发布模块将UI模块发布到模块库中，安装单元再从模块库中搜索并安装需要的UI模块，所以一方面，由于客户端的UI模块是从模块库中获取并安装的，那么同一个UI模块就可以就安装到不同客户端，故而提高了UI模块的复用，另一方面，由于开发人员可以直接从模块库获取所需的一个或多个UI模块，所以开发人员就不需要在UI模块工作栈中编写UI模块，进而也就不需要在JS代码工作栈和UI模块工作栈之间切换，故而提高了开发效率。

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

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

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

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

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims (10)

1.一种用户界面UI模块管理器，其特征在于，所述UI模块管理器包括：

初始化单元，用于创建待组装的UI模块的样例代码目录，所述样例代码目录包括所述UI模块的信息描述文件，所述信息描述文件包括UI模块的标识信息；

组装单元，用于读取所述信息描述文件，根据所述信息描述文件中的文件入口组装所述UI模块；

编译单元，用于编译所述UI模块，并将编译结果输出到所述信息描述文件中；

发布单元，用于将编译完成的所述UI模块发送到模块库；

安装单元，用于根据需要安装的UI模块的标识信息，在所述模块库中搜索并获取所述需要安装的UI模块，并安装所述需要安装的UI模块。

2.如权利要求1所述的UI管理器，其特征在于，所述信息描述文件包括超文本标记语言HTML文件入口，所述HTML文件用于描述所述UI模块所需要的HTML片段、所述HTML片段的引用路径、层叠样式表CSS片段和所述CSS片段的引用路径，所述组装单元用于根据所述HTML入口文件描述的所述HTML片段、所述HTML片段的引用路径、所述CSS片段和所述CSS片段的引用路径组装所述UI模块的HTML代码和所述CSS代码。

3.如权利要求2所述的UI管理器，其特征在于，所述HTML代码包括模板代码，所述模板代码用于描述所述UI模块所引用的其他UI模块和/或所述其他UI模块的文件。

4.如权利要求3所述的UI管理器，其特征在于，所述信息描述文件包括输出目录，所述编译单元用于将编译结果输出到所述输出目录下。

5.如权利要求4所述的UI管理器，其特征在于，所述发布单元用于将编译完成的所述UI模块以及所述UI模块所引用的所述其他UI模块和/或所述其他UI模块的文件打包发送到所述模块库。

6.如权利要求5所述的UI管理器，其特征在于，所述初始化单元用于生成所述UI模块的所述信息描述文件、代码文件和引用文件。

7.一种UI模块管理方法，其特征在于，包括：

创建待组装的UI模块的样例代码目录，所述样例代码目录包括所述UI模块的信息描述文件，所述信息描述文件包括所述UI模块的标识信息；

读取所述信息描述文件，根据所述信息描述文件中的入口文件组装所述UI模块；

编译所述UI模块，并将编译结果输出到所述信息描述文件中；

将编译完成的所述UI模块发送到模块库；

根据需要安装的UI模块的标识信息，在所述模块库中搜索并获取所述需要安装的UI模块，并安装所述需要安装的UI模块。

8.一种UI模块管理***，其特征在于，包括：

服务器以及接入所述服务器的多个客户端；

每个所述客户端上运行有如权利要求1-6任一项所述的UI模块管理器；

所述服务器上运行有模块库。

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

10.一种客户端，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现权利要求7所述方法的步骤。