[发明专利]一种组件重用方法、装置、电子设备和存储介质

说明书

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

技术领域

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

背景技术

在当前日新月异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实例与所述预设实例相同时，所述外部组件加载器引用所述预设实例，生成外部组件。