CN115509515A - 一种组件重用方法、装置、电子设备和存储介质 - Google Patents

Abstract

本发明实施例提供了一种组件重用方法、装置、电子设备和存储介质。应用于vue框架，所述vue框架设置有外部组件加载器和数据托管服务；所述数据托管服务存储有通用组件和对应通用组件数据，所述通用组件基于已有vue组件编译生成；所述组件重用方法包括：所述外部组件加载器获取重用数据；所述外部组件加载器发送所述重用数据至所述数据托管服务；所述数据托管服务查询与所述重用数据匹配的目标通用组件数据；所述外部组件加载器依据所述目标通用组件数据，加载目标通用组件生成外部组件，以进行页面渲染。本发明实施例通过将vue框架中通用的组件与所在项目分离，将组件单独提取进行维护，解决了跨项目的通用组件的重用，降低了维护成本。

Description

一种组件重用方法、装置、电子设备和存储介质

技术领域

本发明涉及前端开发技术领域，特别是涉及一种组件重用方法、一种组件重用装置、一种电子设备和一种存储介质。

背景技术

在当前日新月异WEB(World Wide Web，全球广域网)开发领域，使用vue框架开发前端项目已成为目前大量前端开发者的选择。在vue生态中拥有大量的第三方UI(UserInterface，用户界面)组件库，前端开发人员可以通过使用这些第三方UI组件库快速对项目进行开发；第三方UI组件库的出现为前端开发人员提供了很大的便利。然后随着大量使用第三方UI组件库，同时也出现了一批新的问题。如UI组件必须跟随项目进行编译或者引入CDN(Content Delivery Network，内容分发网络)链接全局，注入所有组件；导致前端代码体积臃肿，且外部组件的使用流程变得复杂。或者由于自定义组件和业务的通用组件在多个项目之间相互拷贝，项目修改维护复杂容易出错，维护对项目进行修改时，将导致组件多项目多版本问题，增大了出bug(故障)几率，也更难以维护。

发明内容

鉴于上述问题，提出了本发明实施例以便提供一种克服上述问题或者至少部分地解决上述问题的一种组件重用方法、一种组件重用装置、一种电子设备和一种存储介质。

为了解决上述问题，在本发明的第一个方面，本发明实施例公开了一种组件重用方法，应用于vue框架，所述vue框架设置有外部组件加载器和数据托管服务；所述数据托管服务存储有通用组件和对应通用组件数据，所述通用组件基于已有vue组件编译生成；所述方法包括：

所述外部组件加载器获取重用数据；

所述外部组件加载器发送所述重用数据至所述数据托管服务；

所述数据托管服务查询与所述重用数据匹配的目标通用组件数据；

所述外部组件加载器依据所述目标通用组件数据，加载目标通用组件生成外部组件，以进行页面渲染。

可选地，所述目标通用组件数据包括通用组件名称和通用组件哈希值；所述外部组件加载器依据所述目标通用组件数据，加载目标通用组件生成外部组件的步骤包括：

将所述通用组件名称注册为vue实例；

基于所述通用组件哈希值定位所述目标通用组件；

加载所述目标通用组件至所述vue实例，生成外部组件。

可选地，所述目标通用组件包括定义结构对象；所述加载所述目标通用组件至所述vue实例，生成外部组件的步骤包括：

加载所述定义结构对象；

将所述定义结构对象对所述vue实例的属性进行定义，生成外部组件。

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

所述外部组件加载器判断所述vue实例是否与预设实例相同；

当所述vue实例与所述预设实例不相同，所述外部组件加载器执行所述加载所述目标通用组件至所述vue实例，生成外部组件的步骤；

当所述vue实例与所述预设实例相同时，所述外部组件加载器引用所述预设实例，生成外部组件。

可选地，所述vue框架还设置有组件编译器，所述方法还包括：

所述组件编译器获取历史项目数据；

所述组件编译器在所述历史项目数据中抽离业务通用组件，生成所述已有vue组件；

所述组件编译器对所述已有vue组件进行编译，生成所述通用组件和所述通用组件数据。

可选地，所述已有vue组件包括根目录数据；所述对所述已有vue组件进行编译，生成所述通用组件和所述通用组件数据的步骤包括：

依据根目录数据生成配置文件，所述配置文件包括通用组件名称；

编译所述已有vue组件生成通用组件哈希值和源代码；

确定为所述源代码为所述通用组件，确定所述通用组件哈希值和通用组件名称为通用组件数据。

可选地，所述vue框架还设置有初始化服务，所述方法还包括：

所述初始化服务获取外部组件加载器安装文件；

所述初始化服务将所述外部组件加载器安装文件注册到所述vue框架中。

在本发明的第二个方面，本发明实施例还公开了一种组件重用装置，应用于vue框架，所述vue框架设置有外部组件加载器和数据托管服务；所述数据托管服务存储有通用组件和对应通用组件数据，所述通用组件基于已有vue组件编译生成；所述装置包括：

第一获取模块，用于所述外部组件加载器获取重用数据；

发送模块，用于所述外部组件加载器发送所述重用数据至所述数据托管服务；

查询模块，用于所述数据托管服务查询与所述重用数据匹配的目标通用组件数据；

加载模块，用于所述外部组件加载器依据所述目标通用组件数据，加载目标通用组件生成外部组件，以进行页面渲染。

在本发明的第三个方面，本发明实施例还公开了一种电子设备，包括处理器、存储器及存储在所述存储器上并能够在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现如上所述的组件重用方法的步骤。

在本发明的第四个方面，本发明实施例还公开了一种计算机可读存储介质，所述计算机可读存储介质上存储计算机程序，所述计算机程序被处理器执行时实现如上所述的组件重用方法的步骤。

本发明实施例包括以下优点：

在本发明实施例中通过外部组件加载器获取重用数据；所述外部组件加载器发送所述重用数据至数据托管服务；所述数据托管服务查询与所述重用数据匹配的目标通用组件数据；所述外部组件加载器依据所述目标通用组件数据，加载目标通用组件生成外部组件，以进行页面渲染。通过将vue框架中通用组件与所在项目分离并单独提取存储在数据托管服务中，可以通过在数据托管服务中对通用组件进行维护管理，降低打包维护成本；解决了跨项目的通用组件的重用；通过外部组件加载器来对通用组件进行的加载注册，简化通用组件作为外部组件的使用流程，降低了开发难度。

附图说明

图1是本发明的一种组件重用方法实施例的步骤流程图；

图2是本发明的另一种组件重用方法实施例的步骤流程图；

图3是本发明的一种组件重用方法实施例的外部组件加载器工作示意图；

图4是本发明的又一种组件重用方法实施例的步骤流程图；

图5是本发明的一种组件重用方法实施例的vue框架安装示例图；

图6是本发明的一种组件重用方法示例的流程示意图；

图7是本发明的一种组件重用方法示例的目标通用组件加载示意图；

图8是本发明的一种组件重用装置实施例的结构框图。

具体实施方式

为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本发明作进一步详细的说明。

本发明实施例的核心构思之一在于，将基于vue框架开发的前端项目中相同逻辑代码即通用组件进行抽离，通过一个统一组件编译管理平台配合外部组件加载器配套使用，可以将所有通用性的组件集成到统一平台，进行单利维护管理。并提供外部组件加载器供前端项目统一引入使用，通过外部组件加载器引入加载通过组件，简化使用外部组件的逻辑，外部组件加载器会在页面渲染时，动态加载外部的通用组件，将其渲染到页面中。

参照图1，示出了本发明的一种组件重用方法实施例的步骤流程图，该组件重用方法应用于vue框架，所述vue框架设置有外部组件加载器和数据托管服务；所述数据托管服务存储有通用组件和对应通用组件数据，所述通用组件基于已有vue组件编译生成。

需要说明的是，对于vue框架的具体版本随着使用环境以及vue版本的更新所确定，如vue1.0，vue2.0，vue3.0等。本领域技术人员可以在应用时，根据vue当前的更新版本和使用环境确定vue框架的实际版本，本发明实施例在此不作具体限定。

在vue框架中，设置有外部组件加载器和数据托管服务；其中，外部组件加载器用于引入通用组件等外部组件。数据托管服务用于存储通用组件和对应通用组件数据，并为外部组件加载器提供查询服务，可以查询满足要求的通用组件和对应通用组件数据，并确定为目标通用组件和，目标通用组件数据。对于通用组件而言，其是通过已有vue组件编译生成，即通用组件是在当前项目开发前已经使用过的vue组件，这些已有vue组件包括但不限于通用的UI组件，相同逻辑的业务通用组件。具体的已有vue组件类型，本领域技术人员可以根据需求确定，本发明实施例对此不作具体限定。

所述方法具体可以包括如下步骤：

步骤101，所述外部组件加载器获取重用数据；

在项目开发时，项目开发人员可以根据需求选定需要重用的通用组件，可以在外部组件加载器对应的运行位置上，输入需要重用的通用组件对于的重用数据。外部组件加载器获取该重用数据。其中，在该重用数据中至少包括一个通用组件的标识数据。当重用数据包括两个或以上的通用组件的标识数据时，重用数据中具有通用组件之间的输入顺序，如重用数据包括通用组件A、通用组件B和通用组件C的标识数据时，重用数据具有对应的输入顺序为BCA，即输入顺序依次为通用组件B、通用组件C和通用组件A。

步骤102，所述外部组件加载器发送所述重用数据至所述数据托管服务；

外部组件加载器获取到重用数据后，由于重用数据并不存在通用组件的实质数据，只有标识数据，对于使用通用组件则需要有实质的通用组件和对应的数据。因此，外部组件加载器可以将重用数据发送至数据托管服务，由数据托管服务确定具体的通用组件。

需要说明的是，当重用数据包括两个或以上的通用组件的标识数据时，则按照重用数据中通用组件的输入顺序进行发送。

步骤103，所述数据托管服务查询与所述重用数据匹配的目标通用组件数据；

数据托管服务可以接收外部组件加载器发送的重用数据，根据重用数据在其存储的通用组件数据中进行匹配，查询与重用数据匹配的通用组件数据，当查询到与重用数据匹配的通用组件数据时，确定该通用组件数据为目标通用组件数据。数据托管服务在确定目标通用组件数据后，可以将目标通用组件数据反馈至外部组件加载器。

具体地，通用组件数据中可以包括通用组件的标识，在查询过程中，可以根据重用数据中的标识数据，与通用组件的标识进行逐一匹配，当重用数据中的标识数据与通用组件的标识对应时，确定重用数据与该通用组件数据匹配。

此外，当重用数据包括两个或以上的通用组件的标识数据时，数据托管服务可以按照重用数据中通用组件的输入顺序进行查询和反馈。

步骤104，所述外部组件加载器依据所述目标通用组件数据，加载目标通用组件生成外部组件，以进行页面渲染。

外部组件加载器会接收到数据托管服务反馈的目标通用组件数据。此时，外部组件加载器可以依据接收到的目标通用组件数据，获取到实质的目标通用组件，将目标通用组件进行加载，生成引入开发项目的外部组件。外部组件作为项目中的组件，以在对开发项目进行渲染时，对该外部组件进行页面渲染，生成实质的页面内容。

在本发明实施例中通过外部组件加载器获取重用数据；所述外部组件加载器发送所述重用数据至数据托管服务；所述数据托管服务查询与所述重用数据匹配的目标通用组件数据；所述外部组件加载器依据所述目标通用组件数据，加载目标通用组件生成外部组件，以进行页面渲染。通过将vue框架中通用组件与所在项目分离并单独提取存储在数据托管服务中，可以通过在数据托管服务中对通用组件进行维护管理，降低打包维护成本；解决了跨项目的通用组件的重用；通过外部组件加载器来对通用组件进行的加载注册，简化通用组件作为外部组件的使用流程，降低了开发难度。

参照图2，示出了本发明的另一种组件重用方法实施例的步骤流程图，应用于vue框架，所述vue框架设置有组件编译器、外部组件加载器和数据托管服务；所述数据托管服务存储有通用组件和对应通用组件数据，所述通用组件基于已有vue组件编译生成；其中，组件编译器用于对已有vue组件进行编译，以生成统一的格式。

所述组件重用方法具体可以包括如下步骤：

步骤201，所述组件编译器获取历史项目数据；

在本发明实施例中，可以从指定数据库中获取过往开发的历史项目数据。该指定数据库为第三方数据库，存储于外部存储地址中。其中，该外部存储地址可以物理存储空间地址，也可以是云存储空间地址；本发明实施例对此不作具体限定。

步骤202，所述组件编译器在所述历史项目数据中抽离业务通用组件，生成所述已有vue组件；

将历史项目数据中，查找出在每个项目中都具有相同逻辑的业务通用组件，将抽离出来的业务通用组件，生成已有vue组件。其中，业务通用组件可以包括通用性UI组件和通用性业务组件。本领域技术人员还可以确定其他在vue框架中具有通用性的组件，对此不作限定。

步骤203，所述组件编译器对所述已有vue组件进行编译，生成所述通用组件和所述通用组件数据。

在本发明实施例中，采用组件编译器对已有vue组件进行编译，生成统一格式的通用组件和该通用组件对应的通用组件数据，并在得到的通用组件和该通用组件对应的通用组件数据存储在数据托管服务中。以使得业务通用组件与项目脱离，将组件通过统一编译平台编译，并将其存储到数据托管服务，降低打包维护成本。

具体地，所述已有vue组件包括根目录数据；所述对所述已有vue组件进行编译，生成所述通用组件和所述通用组件数据的步骤可以包括如下子步骤：

子步骤S2031，依据根目录数据生成配置文件，所述配置文件包括通用组件名称；

在实际应用中，每一个已有vue组件包括一个根目录数据，根目录数据记载该已有vue组件在原项目中的目录树。

在对已有vue组件进行编译时，可以先按照根目录数据的各节点内容，创建配置文件，配置文件中至少包括组件名称。具体地，可以在配置文件中设置有name(名称)字段，将组件名称写入name字段。

在本发明的一示例中，配置文件可以为package.json文件，该package.json文件提供name(组件名称),version(组件版本),main(组件编译入口)字段；且组件内如果依赖第三方库，还提供dependencies(依赖关系)字段。在不同的字段中记载对应的内容。

此外，在生成配置文件后，还可以将如package.json文件等配置文件以及该组件相关文件进行压缩，以便于进行编译。

子步骤S2032，编译所述已有vue组件生成通用组件哈希值和源代码；

在本发明实施例中，还可以对已有vue组件进行编译，基于编译结果生成该已有vue组件对应的通用组件哈希值和源代码。

具体的，可以采用vite(前端构建工具)或webpack(代码编译工具)等打包工具进行特定化配置，将已有vue组件进行编译生成编译后组件的源代码和哈希值。

子步骤S2033，确定为所述源代码为所述通用组件，确定所述通用组件哈希值和通用组件名称为通用组件数据。

在得到配置文件、通用组件哈希值和源代码后，可以确定源代码为通用组件，以及确定通用组件哈希值和通用组件名称为通用组件数据。以便于将通用组件和通用组件数据存储于数据托管服务中，并且可以基于通用组件哈希值和通用组件名称查询和定位通用组件。

步骤204，所述外部组件加载器获取重用数据；

在开发新项目或更新已有项目过程中，需要对通用组件进行引用时，外部组件加载器通过获取开发人员输入的重用数据。其中，重用数据中至少包括需要重用的通用组件对应的组件名称。

步骤205，所述外部组件加载器发送所述重用数据至所述数据托管服务；

在本发明实施例中，外部组件记载器将获取到的重用数据发送至数据托管服务，以通过数据托管服务查询重用数据对应的通用组件数据和通用组件。

步骤206，所述数据托管服务查询与所述重用数据匹配的目标通用组件数据；

数据托管服务基于重用数据，在其存储的通用组件数据中逐一进行匹配查询，与重用数据匹配的通用组件数据，匹配的通用组件数据确定为目标通用组件数据。

具体地，重用数据包括组件名称，可以匹配通用组件数据中的组件名称是否一致，当重用数据中的组件名称和通用组件数据中的组件名称一致时，可以确定该通用组件数据为目标通用组件数据。

步骤207，所述外部组件加载器依据所述目标通用组件数据，加载目标通用组件生成外部组件，以进行页面渲染。

在确定目标通用组件数据后，外部组件加载器根据目标通用组件数据中的通用组件哈希值，确定目标通用组件的位置，将目标通用组件动态加载到外部组件加载器中，生成外部组件。以便于进行页面渲染生成对应的页面。

具体地，所述外部组件加载器依据所述目标通用组件数据，加载目标通用组件生成外部组件的步骤可以包括如下子步骤：

子步骤S2071，将所述通用组件名称注册为vue实例；

在外部组件加载器对加载目标通用组件时，首先可以将通用组件名称注册到vue框架中，即将通用组件名称注册为vue实例，此时vue实例仅有实例名，而无具体内容。

子步骤S2072，基于所述通用组件哈希值定位所述目标通用组件；

在注册vue实例的同时，可以将通用组件哈希值作为外参数，调用数据托管服务api(Application Programming Interface，应用程序编程接口)，获取到目标通用组件的真实存储地址，即定位目标通用组件。对于基于哈希值进行定位的方式，本领域技术人员可以根据需求进行选择，本发明实施例不作具体限定。

子步骤S2073，加载所述目标通用组件至所述vue实例，生成外部组件。

从定位到的目标通用组件对应的真实存储地址后，从该存储地址上将目标通用组件加载至vue实例中，以对vue实例的具体内容进行填充，令vue实例具有实质的数据内容，生成外部组件。

进一步地，所述目标通用组件包括定义结构对象；所述加载所述目标通用组件至所述vue实例，生成外部组件的步骤可以包括如下子步骤：

子步骤S20731，加载所述定义结构对象；

定义结构对象即为目标通用组件对应的dom(Document Object Model，文档对象模块)树。对于加载目标通用组件时，首先可以加载目标通用组件的定义结构对象，以获取目标通用组件的结构定义。

子步骤S20732，将所述定义结构对象对所述vue实例的属性进行定义，生成外部组件。

在得到目标通用组件的定义结构对象后，可以按照定义结构对象与vue实例的属性进行对应，将定义结构对象赋值给vue实例的属性，对vue实例的属性进行定义，生成外部组件。

此外，由于重用组件在一次项目开发中，可能会重用多次，为了可以进一步提高运行效率，可以在加载目标通用组件前，确定在本次开发的项目中是否在先已经重用了该目标通用组件。

在本发明的一可选实施例中，所述组件重用方法还包括：

步骤S1，所述外部组件加载器判断所述vue实例是否与预设实例相同；

预设实例可以为在本次开发项目中已经重用的目标通用组件对应的vue实例。预设实例可以为一个集合，即存在多个以重用的目标通用组件对应的vue实例。

外部组件加载器可以对注册的vue实例与预设实例进行比对，确定vue实例是否与预设实例相同。当预设实例包括多个时，则是将vue实例对预设实例中的每一个实例进行逐一比对。

步骤S2，当所述vue实例与所述预设实例不相同，所述外部组件加载器执行所述加载所述目标通用组件至所述vue实例，生成外部组件的步骤；

当本次注册的vue实例与预设实例并不相同，即本次重用的目标通用组件为首次重用，因此，可以外部组件加载器执行加载目标通用组件至vue实例，生成外部组件的步骤，以对vue实例进行描述。

步骤S3，当所述vue实例与所述预设实例相同时，所述外部组件加载器引用所述预设实例，生成外部组件。

当本次注册的vue实例与预设实例相同时，即本次重用的目标通用组件在先已经重用，因此，外部组件加载器可以将在先生成的vue实例即预设实例引用为本次的vue实例，生成外部组件；而无需重新加载目标通用组件。

参照图3，示出了本发明的一种组件重用方法实施例的外部组件加载器工作示意图；

外部组件加载器使用当前的vue组件内部的component组件，前端通过使用外部组件加载器进行占位，传递外部组件名称和hash值作为外部组件参数注册vue实例，判断是否将本次注册的vue实例引入。当不引入时，直接采用当前的组件即预设实例作为外部组件。当确定引入时，以通用组件名称和通用组件哈希值作为参数调用数据托管服务api，获取到真实的目标通用组件的存储地址，并将目标通用组件加载下来，运行获取vue组件的定义结构对象，并将其赋值给加载器内部使用的component(组成)的is属性，并绑定外部组件自身支持的属性值，该component检测到is属性改变，会将is绑定的真实组件渲染替换自身，即可实现外部组件的生成。

在本发明实施例中，通过获取历史项目数据；在所述历史项目数据中抽离业务通用组件，生成所述已有vue组件；对所述已有vue组件进行编译，生成所述通用组件和所述通用组件数据。将公司业务相同逻辑抽离，在统一流程降低打包维护成本；并且可以减少前端代码体积，提高打包速度，所述外部组件加载器获取重用数据；所述外部组件加载器发送所述重用数据至所述数据托管服务；所述数据托管服务查询与所述重用数据匹配的目标通用组件数据；所述外部组件加载器依据所述目标通用组件数据，加载目标通用组件生成外部组件，以进行页面渲染；实现通过外部组件加载器来包装外部组件的加载注册流程，简化外部组件的使用流程。并且还可按需加载外部组件，解决首屏加载慢问题。

参照图4，示出了本发明的又一种组件重用方法实施例的步骤流程图，应用于vue框架，所述vue框架设置有初始化服务、外部组件加载器和数据托管服务；所述数据托管服务存储有通用组件和对应通用组件数据，所述通用组件基于已有vue组件编译生成；其中，初始化服务用于对vue框架进行初始化。

所述组件重用方法具体可以包括如下步骤：

步骤401，所述初始化服务获取外部组件加载器安装文件；

在新建开发项目时，可以首先采用所述初始化服务获取外部组件加载器安装文件，该外部组件加载器安装文件为对应vue框架版本的外部组件加载器的安装文件。

步骤402，所述初始化服务将所述外部组件加载器安装文件注册到所述vue框架中。

所述初始化服务将获取到的外部组件加载器安装文件注册到本次开发项目的vue框架中，即将外部组件加载器安装到vue框架中。

步骤403，所述外部组件加载器获取重用数据；

在安装好外部组件加载器后，开始对项目进行开发，外部组件加载器获取需要重用的组件对应的重用数据。

步骤404，所述外部组件加载器发送所述重用数据至所述数据托管服务；

外部组件加载器将获取到的重用数据发送至数据托管服务中，以通过数据托管服务查询出重用的组件。

步骤405，所述数据托管服务查询与所述重用数据匹配的目标通用组件数据；

数据托管服务通过重用数据查询确定与重用数据匹配的目标通用组件数据，并将目标通用组件数据反馈给外部组件加载器，以实现对通用组件的查询。

步骤406，所述外部组件加载器依据所述目标通用组件数据，加载目标通用组件生成外部组件，以进行页面渲染。

最后，外部组件加载器依据目标通用组件数据，定位到目标通用组件。对目标通用组件进行加载，生成外部组件，以进行页面渲染，生成对应的页面内容。

为了对外部组件加载器安装过程和使用过程进行说明，可以参照图5，示出了本发明的一种组件重用方法实施例的vue框架安装示例图；

步骤501，安装外部组件加载器

在实际应用中，安装对应vue框架的版本的外部组件加载器依赖。

步骤502，项目中引入外部组件加载器

将外部组件加载器注册到vue框架中，并锁定所有项目中使用到的组件及版本号，同时外部加载器组件自身接收version属性，强制渲染制定版本组件。

步骤503，在项目中使用外部组件

在开发项目过程中，通过输入重用数据至外部组件加载器中，使用外部组件。

本发明实施例通过安装相对应的外部组件加载器版本。同时外部组件也必须加载对应vue版本的外部组件，使得通过外部组件加载器引用通用组件进行重用时，不会因版本问题而产生bug，提高开发的准确性，降低项目维护难度。

为了使本领域技术人员能够更好地理解本发明实施例，下面通过一个例子对本发明实施例加以说明：

参照图6，示出了本发明的一种组件重用方法示例的流程示意图

1、将项目中通用性ui组件及业务组件等vue组件(通用组件)抽离。并将vue组件根目录创建package.json文件，提供name字段、version字段和main字段。vue组件内如果依赖第三方库需定义在dependencies字段中，并将package.json文件和当前vue组件相关文件进行压缩，生成外部组件压缩包。

2、提供组件编译器，将外部组件压缩包对外部组件编译，生成编译后组件，并收集处理相关信息，包括：组件名称，版本，哈希值，源代码。

3、数据托管查询服务，将上一步中产生输出的组件文件，组件名称，版本，hash值，源文件压缩包作为通用组件数据进行存储到数据库中。同时通过文件服务器提供api接口支持按照组件名称，版本号，以及hash值进行查询的方法。

4、提供外部组件加载器给前端项目使用，该外部组件加载器加载器实现为vue组件，通过获取重用数据，并通过api接口在数据托管服务查询目标通用组件，将其注册到项目vue实例中，在页面中使用外部组件加载器绑定外部组件名称和hash值的方式使用外部组件。

5、外部组件在页面渲染时，会判断外部组件是否加载，如果未加载将根据外部组件名称和hash值查询真实外部组件地址，下载并生成真实外部组件定义，将其在外部组件加载器内渲染成真实的外部组件。

具体地，可以参照图7，示出了本发明的一种组件重用方法示例的目标通用组件加载示意图；

1)初始化vue示例；

2)加载外部组件加载器；

3)页面引入页面加载器，绑定外部组件名称和哈希值；

4)通过外部组件名称判断外部组件是否加载；

5)当否时，引用在先vue示例，显示外部组件；

6)当是时，通过外部组件名称和哈希值查询确定外部组件地址，并下载；

7)执行外部组件生成vue组件对象；

8)显示vue组件对象的外部组件。

在本示例中，将业务通用组件与项目脱离，将组件通过统一编译平台编译，并将其存储到数据托管服务，降低打包维护成本；外部组件加载器内部通过原生component组件和ajax异步请求配合，来包裹外部组件的加载注册流程，简化外部组件的使用流程；外部组件加载器在组件被渲染到页面时进行动态加载外部组件并缓存，后期再次使用到相同组件，从缓存中读取，提高代码运行效率。

需要说明的是，对于方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本发明实施例并不受所描述的动作顺序的限制，因为依据本发明实施例，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作并不一定是本发明实施例所必须的。

参照图8，示出了本发明的一种组件重用装置实施例的结构框图，组件重用装置应用于vue框架，所述vue框架设置有外部组件加载器和数据托管服务；所述数据托管服务存储有通用组件和对应通用组件数据，所述通用组件基于已有vue组件编译生成；所述组件重用装置具体可以包括如下模块：

第一获取模块801，用于所述外部组件加载器获取重用数据；

发送模块802，用于所述外部组件加载器发送所述重用数据至所述数据托管服务；

查询模块803，用于所述数据托管服务查询与所述重用数据匹配的目标通用组件数据；

加载模块804，用于所述外部组件加载器依据所述目标通用组件数据，加载目标通用组件生成外部组件，以进行页面渲染。

在本发明的一可选实施例中，所述目标通用组件数据包括通用组件名称和通用组件哈希值；所述加载模块804包括：

注册子模块，用于将所述通用组件名称注册为vue实例；

定位子模块，用于基于所述通用组件哈希值定位所述目标通用组件；

记载子模块，用于加载所述目标通用组件至所述vue实例，生成外部组件。

在本发明的一可选实施例中，所述目标通用组件包括定义结构对象；所述记载子模块包括：

加载单元，用于加载所述定义结构对象；

定义单元，用于将所述定义结构对象对所述vue实例的属性进行定义，生成外部组件。

在本发明的一可选实施例中，所述装置还包括：

判断模块，用于所述外部组件加载器判断所述vue实例是否与预设实例相同；

第一执行模块，用于当所述vue实例与所述预设实例不相同，所述外部组件加载器执行所述加载所述目标通用组件至所述vue实例，生成外部组件的步骤；

第二执行模块，用于当所述vue实例与所述预设实例相同时，所述外部组件加载器引用所述预设实例，生成外部组件。

在本发明的一可选实施例中，所述vue框架还设置有组件编译器，所述装置还包括：

第二获取模块，用于所述组件编译器获取历史项目数据；

抽离模块，用于所述组件编译器在所述历史项目数据中抽离业务通用组件，生成所述已有vue组件；

编译模块，用于所述组件编译器对所述已有vue组件进行编译，生成所述通用组件和所述通用组件数据。

在本发明的一可选实施例中，所述已有vue组件包括根目录数据；所述编译模块包括：

配置子模块，用于依据根目录数据生成配置文件，所述配置文件包括通用组件名称；

编译子模块，用于编译所述已有vue组件生成通用组件哈希值和源代码；

确定子模块，用于确定为所述源代码为所述通用组件，确定所述通用组件哈希值和通用组件名称为通用组件数据。

在本发明的一可选实施例中，所述vue框架还设置有初始化服务，所述装置还包括：

第三获取模块，用于所述初始化服务获取外部组件加载器安装文件；

注册模块，用于所述初始化服务将所述外部组件加载器安装文件注册到所述vue框架中。

对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本发明实施例还提供了一种电子设备，包括：

处理器和存储介质，所述存储介质存储有所述处理器可执行的计算机程序，当电子设备运行时，所述处理器执行所述计算机程序，以执行如本发明实施例任一项所述的方法。具体实现方式和技术效果与方法实施例部分类似，这里不再赘述。

本发明实施例还提供了一种计算机可读存储介质，所述存储介质上存储有计算机程序，所述计算机程序被处理器运行时执行如本发明实施例任一项所述的方法。具体实现方式和技术效果与方法实施例部分类似，这里不再赘述。

本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。

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

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

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

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

尽管已描述了本发明实施例的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明实施例范围的所有变更和修改。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者终端设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者终端设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者终端设备中还存在另外的相同要素。

以上对本发明所提供的一种组件重用方法、装置、电子设备和存储介质进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims (10)

1.一种组件重用方法，其特征在于，应用于vue框架，所述vue框架设置有外部组件加载器和数据托管服务；所述数据托管服务存储有通用组件和对应通用组件数据，所述通用组件基于已有vue组件编译生成；所述方法包括：

所述外部组件加载器获取重用数据；

所述外部组件加载器发送所述重用数据至所述数据托管服务；

所述数据托管服务查询与所述重用数据匹配的目标通用组件数据；

所述外部组件加载器依据所述目标通用组件数据，加载目标通用组件生成外部组件，以进行页面渲染。

2.根据权利要求1所述的方法，其特征在于，所述目标通用组件数据包括通用组件名称和通用组件哈希值；所述外部组件加载器依据所述目标通用组件数据，加载目标通用组件生成外部组件的步骤包括：

将所述通用组件名称注册为vue实例；

基于所述通用组件哈希值定位所述目标通用组件；

加载所述目标通用组件至所述vue实例，生成外部组件。

3.根据权利要求2所述的方法，其特征在于，所述目标通用组件包括定义结构对象；所述加载所述目标通用组件至所述vue实例，生成外部组件的步骤包括：

加载所述定义结构对象；

将所述定义结构对象对所述vue实例的属性进行定义，生成外部组件。

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

所述外部组件加载器判断所述vue实例是否与预设实例相同；

当所述vue实例与所述预设实例不相同，所述外部组件加载器执行所述加载所述目标通用组件至所述vue实例，生成外部组件的步骤；

当所述vue实例与所述预设实例相同时，所述外部组件加载器引用所述预设实例，生成外部组件。

5.根据权利要求1至4任一项所述的方法，其特征在于，所述vue框架还设置有组件编译器，所述方法还包括：

所述组件编译器获取历史项目数据；

所述组件编译器在所述历史项目数据中抽离业务通用组件，生成所述已有vue组件；

所述组件编译器对所述已有vue组件进行编译，生成所述通用组件和所述通用组件数据。

6.根据权利要求5所述的方法，其特征在于，所述已有vue组件包括根目录数据；所述对所述已有vue组件进行编译，生成所述通用组件和所述通用组件数据的步骤包括：

依据根目录数据生成配置文件，所述配置文件包括通用组件名称；

编译所述已有vue组件生成通用组件哈希值和源代码；

确定为所述源代码为所述通用组件，确定所述通用组件哈希值和通用组件名称为通用组件数据。

7.根据权利要求1至4任一项所述的方法，其特征在于，所述vue框架还设置有初始化服务，所述方法还包括：

所述初始化服务获取外部组件加载器安装文件；

所述初始化服务将所述外部组件加载器安装文件注册到所述vue框架中。

8.一种组件重用装置，其特征在于，应用于vue框架，所述vue框架设置有外部组件加载器和数据托管服务；所述数据托管服务存储有通用组件和对应通用组件数据，所述通用组件基于已有vue组件编译生成；所述装置包括：

第一获取模块，用于所述外部组件加载器获取重用数据；

发送模块，用于所述外部组件加载器发送所述重用数据至所述数据托管服务；

查询模块，用于所述数据托管服务查询与所述重用数据匹配的目标通用组件数据；

加载模块，用于所述外部组件加载器依据所述目标通用组件数据，加载目标通用组件生成外部组件，以进行页面渲染。

9.一种电子设备，其特征在于，包括处理器、存储器及存储在所述存储器上并能够在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现如权利要求1至7中任一项所述的组件重用方法的步骤。

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

Images