CN115390897B - 微前端管理的方法、装置、电子设备及存储介质 - Google Patents
微前端管理的方法、装置、电子设备及存储介质 Download PDFInfo
- Publication number
- CN115390897B CN115390897B CN202211004730.XA CN202211004730A CN115390897B CN 115390897 B CN115390897 B CN 115390897B CN 202211004730 A CN202211004730 A CN 202211004730A CN 115390897 B CN115390897 B CN 115390897B
- Authority
- CN
- China
- Prior art keywords
- application
- sub
- micro front
- main
- applications
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
- G06F8/71—Version control; Configuration management
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44505—Configuring for program initiating, e.g. using registry, configuration files
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/46—Multiprogramming arrangements
- G06F9/54—Interprogram communication
- G06F9/547—Remote procedure calls [RPC]; Web services
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Computer Security & Cryptography (AREA)
- Stored Programmes (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
本发明涉及一种微前端管理的方法、装置、电子设备及存储介质。微前端管理的方法,包括步骤:S1、创建一用来共享数据的核心数据结构;S2、初始化主应用,创建一个应用关系映射表,应用关系映射表用于生成主应用和子应用的关系,设置挂载子应用的DOM节点anchor,然后把主应用放到保存模块中,用来保存主应用的信息;S3、获取应用配置,微前端版本控制中心获取应用配置,并把获取到的配置保存到应用关系映射表中;S4、加载子应用,把子应用插入到S2步骤中设置的anchor节点对应的DOM元素中。本发明通过设置微前端管理技术方案,提供了方便的微前端程序运行时共享代码的机制,可以集中管理微前端项目,发布、灰度、回滚,便于程序开发、能够提高开发效率。
Description
技术领域
本发明涉及计算机技术领域,具体而言,涉及一种微前端管理的方法、装置、电子设备及存储介质。
背景技术
微前端架构是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将网页(Web)应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。这些前端应用可以独立运行、独立开发、独立部署。降低维护成本,方便跨团队合作,方便技术升级。
随着项目的迭代,代码会越来越多,共同开发的人员也会越来越多,项目的维护和升级会变得困难,项目的发布节奏也会变得越来越混乱,现有的庞大的代码库不能分而治之、独立开发、发布,且在微前端运行时不能实现代码共享,开发耗时长,提高了代码开发的成本。
发明内容
本发明要解决的技术问题是实现微前端运行时代码共享。
为解决上述技术问题,根据本发明的一个方面,提供一种微前端管理的方法,包括如下步骤:S1、创建一用来共享数据的核心数据结构,将核心数据结构挂载在window对象上,以便所有地方都可以访问到,核心数据结构包括用于保存当前主应用信息的保存模块、用于运行时代码共享的共享模块和用于应用间通信的通信模块;S2、初始化主应用,创建一个应用关系映射表,应用关系映射表用于生成主应用和子应用的关系,在同一个页面中多次切换不同子应用的时候不需要重复从微前端配置中心获取子应用信息,接着,设置挂载子应用的DOM(Document Object Model,文档对象模型)节点anchor,然后把主应用放到保存模块中,用来保存主应用的信息;S3、获取应用配置,微前端版本控制中心获取应用配置,并把获取到的配置保存到应用关系映射表中;S4、加载子应用,把子应用插入到S2步骤中设置的anchor节点对应的DOM元素中,判断是否切换则子应用,如果切换子应用则进入下一步。
根据本发明的实施例,微前端管理的还可包括:S5、切换子应用,根据页面的路由和每个子应用的前缀规则,找到要切换的子应用,先执行当前子应用的卸载方法,把该子应用从页面上删除,然后回收资源,再执行步骤S4加载新的子应用。
根据本发明的实施例,步骤S1中,共享模块可通过Map实现;通信模块通过rxjs实现。
根据本发明的实施例,步骤S1中,核心数据结构中的保存模块、共享模块和通信模块同一时间可只存在一个模块。
根据本发明的实施例,步骤S2和步骤S3之间,可将共享模块创建为全局共享的状态,其中,创建方式采用rxjs的observable来实现,或者采用Proxy或者用具有响应式特性的库来实现。
根据本发明的实施例,步骤S4中,加载子应用后,可设置子应用的不同生命周期的钩子函数,不同生命周期的钩子函数包括子应用创建后、挂载后、接收主应用传递的状态、应用卸载前、卸载后和销毁后。
根据本发明的实施例,步骤S4中,还可包括子应用注册事件,子应用监听通信总线,观测步骤S3中共享模块创建的全局共享的状态。
根据本发明的实施例,步骤S4中,发布新的子应用,将代码构建完成后,可生成一个完整的静态资源引用表,静态资源引用表保存为json文件,把本次代码构建后的信息写入数据库,信息包括:子应用的路由规则、子应用的版本号、子应用的名称、子应用引用的资源文件中的一个或多个,资源文件包括js、css、字体、图片中的一个或多个。
根据本发明的实施例,微前端管理的方法还可包括:S6版本回滚,将最新一次发布的应用配置标记为作废,以完成版本回滚。
优选地,版本回滚将上一次发布的应用信息重新写入到最新的静态资源引用表中。
根据本发明的实施例,微前端管理的还可包括:步骤S3中,应用配置中增加是否灰度的字段,在需要灰度的情况,在请求子应用信息的时候带上参数,能够拿到灰度的版本,以降低发布风险。
根据本发明的实施例,在步骤S1前,可提供一个独立的web页面,可视化管理应用,用于直观地维护多个微前端架构的项目发布新版本。
根据本发明的第二个方面,提供一种微前端管理的装置,包括:一主应用和多个子应用,主应用用于负责实时加载运行时的子应用,并注入相关依赖;通信总线,主应用和子应用之间维护着通信总线,通信总线用于主应用和子应用之间的通信,主应用和子应用通过通信总线互相发送消息;可观测对象,可观测对象接收主应用发布的可观测对象信息,子应用通过订阅可观测对象来获取主应用单向发布的可观测对象信息。主应用和子应用分别具有路由,主应用的路由采用BrowserHistory模式,子应用的路由采用HashHistory模式。其中,微前端管理的装置通过如下步骤管理微前端:创建一用来共享数据的核心数据结构,将核心数据结构挂载在window对象上,以便所有地方都可以访问到,核心数据结构包括用于保存当前主应用信息的保存模块、用于运行时代码共享的共享模块和用于应用间通信的通信模块;初始化主应用,创建一个应用关系映射表,应用关系映射表用于生成主应用和子应用的关系,在同一个页面中多次切换不同子应用的时候不需要重复从微前端配置中心获取子应用信息,接着,设置挂载子应用的DOM节点anchor,然后把主应用放到保存模块中,用来保存主应用的信息;获取应用配置,微前端版本控制中心获取应用配置,并把获取到的配置保存到应用关系映射表中;加载子应用,把子应用插入到初始化主应用步骤中设置的anchor节点对应的DOM元素中,判断是否切换则子应用,如果切换子应用则进入切换子应用步骤;切换子应用,根据页面的路由和每个子应用的前缀规则,找到要切换的子应用,先执行当前子应用的卸载方法,把该子应用从页面上删除,然后回收资源,再执行加载子应用步骤加载新的子应用。
根据本发明的实施例,微前端管理的装置还可包括:
共享模块,共享模块用于在主应用和多个子应用之间共享代码,主应用和多个子应用在运行的时候能够向共享模块中添加代码,或者从共享模块中获取代码执行相应的功能。
根据本发明的实施例,主应用可具有加载子应用、挂载子应用、卸载子应用、回收资源、状态管理和事件管理的功能。加载子应用用于是依次执行子应用的生命周期函数,最后再把子应用插入到页面上主应用指定的对应DOM节点上;挂载子应用用于判断子应用是否之前没加载过,会加载子应用的资源,如果之前已经加载过了,会直接把子应用渲染到页面上;卸载子应用用于执行清理工作,把子应用从页面的DOM节点中删除;回收资源用于避免子应用多次切换造成内存泄漏;状态管理,为在应用之间共享的状态,用于修改、获取或监听状态变化;事件管理,为在应用之间通信的机制,包括注册事件、订阅事件、取消订阅、发布事件、事件广播中的一个或多个。
根据本发明的实施例,子应用可具有事件管理,订阅事件,注册事件,发布事件,取消订阅和接收广播的功能,同时具有状态管理功能,用于监听主应用的状态变化,以及具有子应用的生命周期中每个阶段的钩子函数,便于将子应用恢复到所需生命周期。
根据本发明的第三个方面,提供一种电子设备,包括:存储器、处理器及存储在存储器上并可在处理器上运行的微前端管理程序,微前端管理程序被处理器执行时实现上述的微前端管理方法的步骤。
根据本发明的第四个方面,提供一种计算机存储介质,其中,计算机存储介质上存储有微前端管理程序,微前端管理程序被处理器执行时实现如上述的微前端管理方法的步骤。
与现有技术相比,本发明的实施例所提供的技术方案至少可实现如下有益效果:
1)本发明通过设置微前端管理技术方案,提供了很方便的微前端程序运行时共享代码的机制,这对于代码的复用有很大的帮助。
2)本发明通过设置微前端管理通过通信总线管理,提供统一的版本管理和发布中心,可以集中管理所有的微前端项目,发布、灰度、回滚,这些操作便于程序开发、能够提高开发效率。
3)本发明提供了一种拆分代码库的方法,通过把不同的业务或者功能划分到不同的子应用中,将每个子应用拆分为独立的工程项目,来达到拆分代码库的目的,这样就可以独立维护每个子应用,做到技术上的升级不影响其他功能,同时发布节奏也可以做到每个子应用独立,互不干扰。
4)本发明提供了一种管理微前端应用版本的方法,应用的信息都保存在微前端版本本控制中心,包括主应用和子应用的对应关系,用于确定当前主应用下有哪些子应用,在主应用启动的时候会根据这个配置来拿到相关的子应用的信息。
5)本发明提供的子应用本身的信息,包括子应用的名称,入口路由前缀,引用的静态资源信息(js文件,css文件,图片字体资源等),加载子应用时可以根据这些信息还原一个完整的DOM元素,将这个DOM元素插入到页面中,子应用即可以正常运行。
附图说明
为了更清楚地说明本发明实施例的技术方案,下面将对实施例的附图作简单地介绍,显而易见地,下面描述中的附图仅仅涉及本发明的一些实施例,而非对本发明的限制。
图1是示出依据本发明实施例的微前端管理的方法的初始化流程图;
图2是示出依据本发明实施例的微前端管理的方法的应用切换流程图;
图3是示出依据本发明实施例的微前端管理的方法的应用发布流程图;
图4是示出依据本发明实施例的微前端管理的装置的通信示意图;
图5是示出依据本发明实施例的微前端管理的装置的共享代码示意图。
具体实施方式
为使本发明实施例的目的、技术方案和优点更加清楚,下面将结合本发明实施例的附图,对本发明实施例的技术方案进行清楚、完整地描述。显然,所描述的实施例是本发明的一部分实施例,而不是全部的实施例。基于所描述的本发明的实施例,本领域普通技术人员在无需创造性劳动的前提下所获得的所有其它实施例,都属于本发明保护的范围。
除非另作定义,此处使用的技术术语或者科学术语应当为本发明所属领域内具有一般技能的人士所理解的通常意义。本发明专利申请说明书以及权利要求书中使用的“第一”、“第二”以及类似的词语并不表示任何顺序、数量或者重要性,而只是用来区分不同的组成部分。同样,“一个”或者“一”等类似词语也不表示数量限制,而是表示存在至少一个。
如图1至图3所示,微前端管理的方法,包括如下步骤:
S0、提供一个独立的web页面,可视化管理应用,用于直观地维护多个微前端架构的项目发布新版本。
S1、创建一用来共享数据的核心数据结构,将核心数据结构挂载在window对象上,以便所有地方都可以访问到,核心数据结构包括用于保存当前主应用信息的保存模块、用于运行时代码共享的共享模块和用于应用间通信的通信模块。共享模块通过Map实现;通信模块通过rxjs实现。核心数据结构中的保存模块、共享模块和通信模块同一时间只存在一个模块。为了防止这部分内容被随意修改,所以可以在创建的时候将其设置为只读属性。
S2、初始化主应用,创建一个应用关系映射表,应用关系映射表用于生成主应用和子应用的关系,在同一个页面中多次切换不同子应用的时候不需要重复从微前端配置中心获取子应用信息,接着,设置挂载子应用的DOM节点anchor,然后把主应用放到保存模块中,用来保存主应用的信息。将共享模块创建为全局共享的状态,其中,创建方式采用rxjs的observable来实现,或者采用Proxy或者用具有响应式特性的库来实现。
S3、获取应用配置,微前端版本控制中心获取应用配置,并把获取到的配置保存到应用关系映射表中。可选地,应用配置中增加是否灰度的字段,在需要灰度的情况,在请求子应用信息的时候带上参数,能够拿到灰度的版本,以降低发布风险。
S4、加载子应用,把子应用插入到S2步骤中设置的anchor节点对应的DOM元素中。设置子应用的不同生命周期的钩子函数,不同生命周期的钩子函数包括子应用创建后、挂载后、接收主应用传递的状态、应用卸载前、卸载后和销毁后。子应用注册事件,子应用监听通信总线,观测步骤S3中共享模块创建的全局共享的状态。发布新的子应用,将代码构建完成后,生成一个完整的静态资源引用表,静态资源引用表保存为json文件,把本次代码构建后的信息写入数据库,信息包括:子应用的路由规则、子应用的版本号、子应用的名称、子应用引用的资源文件中的一个或多个,资源文件包括js、css、字体、图片中的一个或多个。判断是否切换则子应用,如果切换子应用则进入下一步。
S5、切换子应用,根据页面的路由和每个子应用的前缀规则,找到要切换的子应用,先执行当前子应用的卸载方法,把该子应用从页面上删除,然后回收资源,再执行步骤S4加载新的子应用。
S6版本回滚,将最新一次发布的应用配置标记为作废,以完成版本回滚。版本回滚将上一次发布的应用信息重新写入到最新的静态资源引用表中。
本发明提供了一种拆分代码库的方法,通过把不同的业务或者功能划分到不同的子应用中,将每个子应用拆分为独立的工程项目,来达到拆分代码库的目的,这样就可以独立维护每个子应用,做到技术上的升级不影响其他功能,同时发布节奏也可以做到每个子应用独立,互不干扰。
本发明通过设置微前端管理技术方案,提供了很方便的微前端程序运行时共享代码的机制,这对于代码的复用有很大的帮助。
本发明提供了一种管理微前端应用版本的方法,应用的信息都保存在微前端版本控制中心,包括主应用和子应用的对应关系,用于确定当前主应用下有哪些子应用,在主应用启动的时候会根据这个配置来拿到相关的子应用的信息。
本发明提供的子应用本身的信息,包括子应用的名称,入口路由前缀,引用的静态资源信息(js文件,css文件,图片字体资源等),加载子应用时可以根据这些信息还原一个完整的DOM元素,将这个DOM元素插入到页面中,子应用即可以正常运行。
如图4、图5所示,微前端管理的装置包括:一主应用、多个子应用通信总线和可观测对象。
主应用用于负责实时加载运行时的子应用,并注入相关依赖。
主应用和子应用之间维护着通信总线,通信总线用于主应用和子应用之间的通信,主应用和子应用通过通信总线互相发送消息。
可观测对象接收主应用发布的可观测对象信息,子应用通过订阅可观测对象来获取主应用单向发布的可观测对象信息。主应用和子应用分别具有路由,主应用的路由采用BrowserHistory模式,子应用的路由采用HashHistory模式。
其中,微前端管理的装置通过如下步骤管理微前端:创建一用来共享数据的核心数据结构,将核心数据结构挂载在window对象上,以便所有地方都可以访问到,核心数据结构包括用于保存当前主应用信息的保存模块、用于运行时代码共享的共享模块和用于应用间通信的通信模块;初始化主应用,创建一个应用关系映射表,应用关系映射表用于生成主应用和子应用的关系,在同一个页面中多次切换不同子应用的时候不需要重复从微前端配置中心获取子应用信息,接着,设置挂载子应用的DOM节点anchor,然后把主应用放到保存模块中,用来保存主应用的信息;获取应用配置,微前端版本控制中心获取应用配置,并把获取到的配置保存到应用关系映射表中;加载子应用,把子应用插入到初始化主应用步骤中设置的anchor节点对应的DOM元素中,判断是否切换则子应用,如果切换子应用则进入切换子应用步骤;切换子应用,根据页面的路由和每个子应用的前缀规则,找到要切换的子应用,先执行当前子应用的卸载方法,把该子应用从页面上删除,然后回收资源,再执行加载子应用步骤加载新的子应用。
本发明通过设置微前端管理通过通信总线管理,提供统一的版本管理和发布中心,可以集中管理所有的微前端项目,发布、灰度、回滚,这些操作便于程序开发、能够提高开发效率。
根据本发明的一个或一些实施例,微前端管理的装置还包括:共享模块,共享模块用于在主应用和多个子应用之间共享代码,主应用和多个子应用在运行的时候可以向共享模块中添加代码,或者从共享模块中获取代码执行相应的功能。
根据本发明的一个或一些实施例,主应用具有加载子应用、挂载子应用、卸载子应用、回收资源、状态管理和事件管理的功能。加载子应用用于是依次执行子应用的生命周期函数,最后再把子应用插入到页面上主应用指定的对应DOM节点上;挂载子应用用于判断子应用是否之前没加载过,会加载子应用的资源,如果之前已经加载过了,会直接把子应用渲染到页面上;卸载子应用用于执行清理工作,把子应用从页面的DOM节点中删除;回收资源用于避免子应用多次切换造成内存泄漏;状态管理,为在应用之间共享的状态,用于修改、获取、监听状态变化;事件管理,为在应用之间通信的机制,包括注册事件、订阅事件、取消订阅、发布事件、事件广播。
根据本发明的一个或一些实施例,子应用具有事件管理,订阅事件,注册事件,发布事件,取消订阅和接收广播的功能,同时具有状态管理功能,用于监听主应用的状态变化,以及具有子应用的生命周期中每个阶段的钩子函数,便于将子应用恢复到所需生命周期。
根据本发明的又一方面,提供一种微前端管理的设备,包括:存储器、处理器及存储在存储器上并可在处理器上运行的微前端管理程序,微前端管理程序被处理器执行时实现上述的微前端管理方法的步骤。
根据本发明还提供一种计算机存储介质。
计算机存储介质上存储有微前端管理程序,微前端管理程序被处理器执行时实现上述的微前端管理方法的步骤。
其中,在所述处理器上运行的微前端管理程序被执行时所实现的方法可参照本发明微前端管理方法各个实施例,此处不再赘述。
本发明还提供一种计算机程序产品。
本发明计算机程序产品包括微前端管理程序,所述微前端管理程序被处理器执行时实现如上所述的微前端管理方法的步骤。
其中,在所述处理器上运行的微前端管理程序被执行时所实现的方法可参照本发明微前端管理方法各个实施例,此处不再赘述。
通过以上的实施方式的描述,本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现,当然也可以通过硬件,但很多情况下前者是更佳的实施方式。基于这样的理解,本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来,该计算机软件产品存储在如上所述的一个存储介质(如ROM/RAM、磁碟、光盘)中,包括若干指令用以使得一台终端设备(可以是手机,计算机,服务器,空调器,或者网络设备等)执行本发明各个实施例所述的方法。
以上所述仅是本发明的示范性实施方式,而非用于限制本发明的保护范围,本发明的保护范围由所附的权利要求确定。
Claims (18)
1.一种微前端管理的方法,包括如下步骤:
S1、创建一用来共享数据的核心数据结构,将所述核心数据结构挂载在window对象上,以便所有地方都可以访问到,所述核心数据结构包括用于保存当前主应用信息的保存模块、用于运行时代码共享的共享模块和用于应用间通信的通信模块;
S2、初始化主应用,创建一个应用关系映射表,所述应用关系映射表用于生成主应用和子应用的关系,在同一个页面中多次切换不同子应用的时候不需要重复从微前端配置中心获取子应用信息,接着,设置挂载子应用的DOM节点anchor,然后把主应用放到所述保存模块中,用来保存主应用的信息;
S3、获取应用配置,微前端版本控制中心获取应用配置,并把获取到的配置保存到所述应用关系映射表中;
S4、加载子应用,把子应用插入到S2步骤中设置的anchor节点对应的DOM元素中,判断是否切换则子应用,如果切换子应用则进入下一步。
2.如权利要求1所述的方法,还包括:
S5、切换子应用,根据页面的路由和每个子应用的前缀规则,找到要切换的子应用,先执行当前子应用的卸载方法,把该子应用从页面上删除,然后回收资源,再执行步骤S4加载新的子应用。
3.如权利要求1所述的方法,步骤S1中,所述共享模块通过Map实现;所述通信模块通过rxjs实现。
4.如权利要求1所述的方法,步骤S1中,所述核心数据结构中的保存模块、共享模块和通信模块同一时间只存在一个模块。
5.如权利要求1所述的方法,步骤S2和步骤S3之间,将所述共享模块创建为全局共享的状态,
其中,创建方式采用rxjs的observable来实现,或者采用Proxy或者用具有响应式特性的库来实现。
6.如权利要求1所述的方法,步骤S4中,加载子应用后,设置子应用的不同生命周期的钩子函数,所述不同生命周期的钩子函数包括子应用创建后、挂载后、接收主应用传递的状态、应用卸载前、卸载后和销毁后。
7.如权利要求1所述的方法,步骤S4中,还包括子应用注册事件,子应用监听通信总线,观测步骤S3中共享模块创建的全局共享的状态。
8.如权利要求1所述的方法,步骤S4中,发布新的子应用,将代码构建完成后,生成一个完整的静态资源引用表,所述静态资源引用表保存为json文件,把本次代码构建后的信息写入数据库,所述信息包括:子应用的路由规则、子应用的版本号、子应用的名称、子应用引用的资源文件中的一个或多个,资源文件包括js、css、字体、图片中的一个或多个。
9.如权利要求8所述的方法,还包括:S6版本回滚,将最新一次发布的应用配置标记为作废,以完成版本回滚。
10.如权利要求9所述的方法,所述版本回滚将上一次发布的应用信息重新写入到最新的静态资源引用表中。
11.如权利要求8所述的方法,还包括:步骤S3中,应用配置中增加是否灰度的字段,在需要灰度的情况,在请求子应用信息的时候带上参数,能够拿到灰度的版本,以降低发布风险。
12.如权利要求1所述的方法,在步骤S1前,提供一个独立的web页面,可视化管理应用,用于直观地维护多个微前端架构的项目发布新版本。
13.一种微前端管理的装置,包括:
一主应用和多个子应用,所述主应用用于负责实时加载运行时的所述子应用,并注入相关依赖;
通信总线,所述主应用和所述子应用之间维护着通信总线,所述通信总线用于所述主应用和所述子应用之间的通信,所述主应用和所述子应用通过所述通信总线互相发送消息;
可观测对象,所述可观测对象接收所述主应用发布的可观测对象信息,所述子应用通过订阅所述可观测对象来获取主应用单向发布的可观测对象信息,
其中,所述主应用和所述子应用分别具有路由,所述主应用的路由采用BrowserHistory模式,所述子应用的路由采用HashHistory模式,
其中,所述微前端管理的装置通过如下步骤管理微前端:
创建一用来共享数据的核心数据结构,将所述核心数据结构挂载在window对象上,以便所有地方都可以访问到,所述核心数据结构包括用于保存当前主应用信息的保存模块、用于运行时代码共享的共享模块和用于应用间通信的通信模块;
初始化主应用,创建一个应用关系映射表,所述应用关系映射表用于生成主应用和子应用的关系,在同一个页面中多次切换不同子应用的时候不需要重复从微前端配置中心获取子应用信息,接着,设置挂载子应用的DOM节点anchor,然后把主应用放到所述保存模块中,用来保存主应用的信息;
获取应用配置,微前端版本控制中心获取应用配置,并把获取到的配置保存到所述应用关系映射表中;
加载子应用,把子应用插入到初始化主应用步骤中设置的anchor节点对应的DOM元素中,判断是否切换则子应用,如果切换子应用则进入切换子应用步骤;
切换子应用,根据页面的路由和每个子应用的前缀规则,找到要切换的子应用,先执行当前子应用的卸载方法,把该子应用从页面上删除,然后回收资源,再执行加载子应用步骤加载新的子应用。
14.如权利要求13所述的装置,还包括:
共享模块,所述共享模块用于在所述主应用和多个所述子应用之间共享代码,所述主应用和多个所述子应用在运行的时候能够向所述共享模块中添加代码,或者从所述共享模块中获取代码执行相应的功能。
15.如权利要求13所述的装置,所述主应用具有加载子应用、挂载子应用、卸载子应用、回收资源、状态管理和事件管理的功能,其中,
所述加载子应用用于是依次执行子应用的生命周期函数,最后再把子应用插入到页面上主应用指定的对应DOM节点上;
所述挂载子应用用于判断子应用是否之前没加载过,会加载子应用的资源,如果之前已经加载过了,会直接把子应用渲染到页面上;
所述卸载子应用用于执行清理工作,把子应用从页面的DOM节点中删除;
所述回收资源用于避免子应用多次切换造成内存泄漏;
所述状态管理,为在应用之间共享的状态,用于修改、获取或监听状态变化;
所述事件管理,为在应用之间通信的机制,包括注册事件、订阅事件、取消订阅、发布事件、事件广播中的一个或多个。
16.如权利要求13所述的装置,所述子应用具有事件管理,订阅事件,注册事件,发布事件,取消订阅和接收广播的功能,同时具有状态管理功能,用于监听主应用的状态变化,以及具有子应用的生命周期中每个阶段的钩子函数,便于将子应用恢复到所需生命周期。
17.一种电子设备,包括:存储器、处理器及存储在所述存储器上并可在所述处理器上运行的微前端管理程序,所述微前端管理程序被所述处理器执行时实现如权利要求1至12中任一项所述的微前端管理方法的步骤。
18.一种计算机存储介质,其中,所述计算机存储介质上存储有微前端管理程序,所述微前端管理程序被处理器执行时实现如权利要求1至12中任一项所述的微前端管理方法的步骤。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202211004730.XA CN115390897B (zh) | 2022-08-22 | 2022-08-22 | 微前端管理的方法、装置、电子设备及存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202211004730.XA CN115390897B (zh) | 2022-08-22 | 2022-08-22 | 微前端管理的方法、装置、电子设备及存储介质 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN115390897A CN115390897A (zh) | 2022-11-25 |
CN115390897B true CN115390897B (zh) | 2023-06-20 |
Family
ID=84121351
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202211004730.XA Active CN115390897B (zh) | 2022-08-22 | 2022-08-22 | 微前端管理的方法、装置、电子设备及存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN115390897B (zh) |
Families Citing this family (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN116360779B (zh) * | 2023-06-02 | 2023-08-15 | 杭州比智科技有限公司 | 基于qiankun在Vue CLI应用构建微前端基座的方法 |
Family Cites Families (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN113064676A (zh) * | 2020-12-29 | 2021-07-02 | 上海金融期货信息技术有限公司 | 基于js入口的前端运行时远程组件共享机制的方法 |
CN113448702A (zh) * | 2021-06-16 | 2021-09-28 | 浪潮软件股份有限公司 | 一种基于前端的微服务设计方法 |
CN114090003A (zh) * | 2021-11-09 | 2022-02-25 | 浪潮云信息技术股份公司 | 一种基于微前端架构的资源共享实现方法及系统 |
-
2022
- 2022-08-22 CN CN202211004730.XA patent/CN115390897B/zh active Active
Also Published As
Publication number | Publication date |
---|---|
CN115390897A (zh) | 2022-11-25 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN101571809B (zh) | 一种插件注册的实现方法及其装置 | |
CN110825479A (zh) | 页面处理方法、装置、终端设备、服务器和存储介质 | |
CN112416415A (zh) | 一种前端微服务实现方法及相关组件 | |
CN112836152B (zh) | 页面渲染方法、系统、计算机设备及计算机可读存储介质 | |
CN115390897B (zh) | 微前端管理的方法、装置、电子设备及存储介质 | |
CN112507263B (zh) | 页面加载更新方法、装置、电子设备及存储介质 | |
CN113760324A (zh) | 构建微前端应用的方法和装置 | |
CN111464352A (zh) | 调用链路数据处理方法及装置 | |
CN113761412A (zh) | 应用页面的显示方法、装置、电子设备、介质及应用系统 | |
CN109873861B (zh) | 跨区块链节点的交互方法及装置、存储介质及电子设备 | |
CN113220403B (zh) | h5拦截Android返回事件的方法、装置及电子设备 | |
CN111966508A (zh) | 一种消息的批量发送方法、装置、计算机设备和存储介质 | |
CN105068912B (zh) | 用于执行网页任务的方法和装置 | |
CN115981871A (zh) | 一种gpu资源调度方法、装置、设备及存储介质 | |
CN110599112A (zh) | 一种网络页面开发、维护方法和装置 | |
CN115225645A (zh) | 一种服务更新方法、装置、系统和存储介质 | |
JP4882291B2 (ja) | モジュール更新プログラム | |
CN114610446A (zh) | 一种自动注入探针的方法、装置及系统 | |
CN113687962A (zh) | 一种请求处理方法、装置、设备及存储介质 | |
CN111600928B (zh) | 一种模拟服务控制方法、智能终端及存储介质 | |
CN113296892B (zh) | 开发环境的休眠方法、装置、电子设备及存储介质 | |
CN118069292A (zh) | 调度容器的方法、装置、电子设备和计算机程序产品 | |
CN117435262A (zh) | 组件动态加载方法、装置、电子设备及存储介质 | |
CN116582527A (zh) | 分布式服务的动态更新方法、装置、设备、介质及产品 | |
CN115268889A (zh) | iOS并发动画回调程序的构建方法、回调方法及装置 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |