本发明专利技术提供了前端应用组合架构、方法、装置及计算机可读存储介质，该架构包括：应用系统，其包含：平台方主应用和业务子应用；微前端通用容器，其包含：配置模块、提供给所述平台方主应用集成的容器模块，提供给所述业务子应用集成的客户端模块；以及，微前端框架池，其包含一个或多个符合微前端框架规范的微前端框架，以供所述微前端通用容器选择。利用上述方法，能够向用户提供无感知的前端应用组合页面。能够向用户提供无感知的前端应用组合页面。能够向用户提供无感知的前端应用组合页面。
【技术实现步骤摘要】
前端应用组合架构、方法、装置及计算机可读存储介质
[0001]本专利技术属于前端
，具体涉及一种前端应用组合架构、方法、装置及计算机可读存储介质。
技术介绍
[0002]本部分旨在为权利要求书中陈述的本专利技术的实施方式提供背景或上下文。此处的描述不因为包括在本部分中就承认是现有技术。
[0003]在平台类应用中通常干系方较多，涉及多个业务、多个团队、多种技术栈，并且需要提供一致的用户体验，例如：统一的展现形式、统一的操作等。
[0004]现有的前端应用组合方案主要有3种：1)iframe嵌入，平台方前端应用中提供iframe，业务接入方的前端应用运行在iframe中；2)反向代理转发，平台方为每个业务接入方应用分配一个唯一的路由，并在web服务器中配置反向代理转发，当用户访问该路由时，实际访问的是业务接入方的应用。
[0005]然而，iframe由于是个封闭的容器，运行在其中的应用与平台方应用之间通信效率低，有跨域限制、无法自行控制路由、其UI操作受iframe本身的大小、位置限制，无法与平台方应用融合为一体。反向代理转发方案的优点是简单，业务接入方的应用可独立维护，但是其每一个url只能对应一个应用，无法做到平台方应用和业务接入方的应用之间组合在一起。
[0006]因此，如何提高前端应用组合的业务接入效率，降低协调各干系方的成本，打破多种技术栈的壁垒，是一个亟待解决的问题。
技术实现思路
[0007]针对上述现有技术中存在的问题，提出了一种无感知的前端应用组合架构、方法、装置及计算机可读存储介质，利用这种架构、方法、装置及计算机可读存储介质，能够解决上述问题。
[0008]本专利技术提供了以下方案。
[0009]第一方面，提供一种无感知的前端应用组合架构，包括：
[0010]应用系统，其包含：平台方主应用和业务子应用；
[0011]微前端通用容器，其包含：配置模块、提供给平台方主应用集成的容器模块，提供给业务子应用集成的客户端模块；
[0012]微前端框架池，其包含一个或多个符合微前端框架规范的微前端框架，以供微前端通用容器选择。
[0013]在一种实施方式中，配置模块，用于执行以下中的一种或多种：系统管理，被配置为管理系统的容器使用情况；框架管理，被配置为管理微前端框架的支持情况和当前使用情况；应用管理，被配置为管理当前接入的业务子应用及其配置信息；能力集成，被配置为管理可共享的能力。
[0014]在一种实施方式中，容器模块，用于实现以下中的一种或多种功能：框架集成，被配置为对微前端框架执行加载、升级和切换中的一种或多种；子应用管理，被配置为对业务子应用执行加载、预加载、生命周期、路由控制中的一种或多种；数据通信，被配置为执行主/子应用间通信和/或全局通信；应用监测，被配置为通过埋点监测应用状态；能力共享，被配置为用于加载能力和/或管理作用范围。
[0015]在一种实施方式中，客户端模块，用于执行以下中的一种或多种：框架适配器，被配置为用于执行以下中的一种或多种：屏蔽框架层，提供统一API、环境变量、数据通信机制；权限控制，被配置为从配置模块获取应用权限并使其生效；环境适配器，被配置为针对不同的技术栈和/或不同的构建工具设置适配功能；能力适配器，被配置为获取和/或查询和/或使用主应用的共享能力。
[0016]在一种实施方式中，微前端框架规范，包括如下中的一种或多种规范内容：业务应用独立性，用于指示业务子应用和平台方主应用之间可组合运行且可独立运行；技术栈无关性，用于指示各个应用能够针对各种微前端框架进行自由选型；通信机制，用于指示各个应用间能够相互通信；隔离性，用于指示各个应用之间不会互相产生影响；可控性，用于指示具备在运行态管理业务子应用的静态资源的能力。
[0017]第二方面，提供一种前端应用组合方法，利用如第一方面的架构，将前端的平台方主应用和业务子应用组合成统一的应用。
[0018]在一种实施方式中，还可以执行以下步骤，使得用户能够访问各个平台方业务：平台方主应用引入容器模块后运行，容器模块从配置模块中获取配置信息；容器模块根据第一配置信息加载目标微前端框架，通过抓取请求获取目标微前端框架的源码文件，并将源码文件封装成可运行模块，在平台方主应用中运行；述容器模块监听目标微前端框架的加载完成事件，且在加载完成后立即启动目标微前端框架；容器模块根据配置信息获取业务应用列表并进行预加载，业务应用的实际加载过程由微前端框架接管。
[0019]在一种实施方式中，还可以执行以下步骤，使得用户能够访问业务子应用：业务子应用引入客户端模块后运行，容器模块从配置模块中获取配置信息；客户端模块根据第一配置信息动态生成框架适配器代码；客户端模块根据第二配置信息动态生成环境适配器代码；客户端模块根据第三配置信息动态生成能力适配器。
[0020]在一种实施方式中，第一配置信息至少包括：使用的API和/或环境变量。
[0021]在一种实施方式中，第二配置信息至少包括：使用的技术栈和/或构建工具。
[0022]在一种实施方式中，第三配置信息少包括：共享能力的使用情况。
[0023]第三方面，提供一种前端应用组合装置，包括：至少一个处理器；以及，与至少一个处理器通信连接的存储器；其中，存储器存储有可被至少一个处理器执行的指令，指令被至少一个处理器执行，以使至少一个处理器能够执行：如第二方面的方法。
[0024]第四方面，提供一种计算机可读存储介质，计算机可读存储介质存储有程序，当程序被多核处理器执行时，使得多核处理器执行如权利要求如第二方面的方法。
[0025]上述实施例的优点之一，基于前述架构，首先，各个应用对具体的微前端框架无感知，微前端框架的升级或者切换均对各个应用无影响，也无需配合改造。其次，在用户视角下，用户接收第一层级对外提供的体验一致的服务，在用户当前页面中可以由单一应用或多个应用组合提供无感知，统一的入口、统一的UI操作。此外，在用户视角下，各类应用可以
在用户页面中自由组合，也即平台方主应用和一个或多个业务子应用可以组合到任一用户页面中。
[0026]本专利技术的其他优点将配合以下的说明和附图进行更详细的解说。
[0027]应当理解，上述说明仅是本专利技术技术方案的概述，以便能够更清楚地了解本专利技术的技术手段，从而可依照说明书的内容予以实施。为了让本专利技术的上述和其它目的、特征和优点能够更明显易懂，以下特举例说明本专利技术的具体实施方式。
附图说明
[0028]通过阅读下文的示例性实施例的详细描述，本领域普通技术人员将明白本文所述的优点和益处以及其他优点和益处。附图仅用于示出示例性实施例的目的，而并不认为是对本专利技术的限制。而且在整个附图中，用相同的标号表示相同的部件。在附图中：
[0029]图1为根据本专利技术一实施例的无感知的前端应用组合架构的架构示意图；
[0030]图2为根据本专利技术一实施例的无感知的前端应用组合方法的流程示意本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.前端应用组合架构，其特征在于，包括：应用系统，其包含：平台方主应用和业务子应用；微前端通用容器，其包含：配置模块、提供给所述平台方主应用集成的容器模块，提供给所述业务子应用集成的客户端模块；以及，微前端框架池，其包含一个或多个符合微前端框架规范的微前端框架，以供所述微前端通用容器选择。2.根据权利要求1所述的架构，其特征在于，所述配置模块，用于执行以下中的一种或多种：系统管理，被配置为管理系统的容器使用情况；框架管理，被配置为管理微前端框架的支持情况和当前使用情况；应用管理，被配置为管理当前接入的业务子应用及其配置信息；能力集成，被配置为管理可共享的能力。3.根据权利要求1所述的架构，其特征在于，所述容器模块，用于实现以下中的一种或多种功能：框架集成，被配置为对所述微前端框架执行加载、升级和切换中的一种或多种；子应用管理，被配置为对所述业务子应用执行加载、预加载、生命周期、路由控制中的一种或多种；数据通信，被配置为执行主/子应用间通信和/或全局通信；应用监测，被配置为通过埋点监测应用状态；能力共享，被配置为用于加载能力和/或管理作用范围。4.根据权利要求1所述的架构，其特征在于，所述客户端模块，用于执行以下中的一种或多种：框架适配器，被配置为用于执行以下中的一种或多种：屏蔽框架层，提供统一API、环境变量、数据通信机制；权限控制，被配置为从所述配置模块获取应用权限并使其生效；环境适配器，被配置为针对不同的技术栈和/或不同的构建工具设置适配功能；能力适配器，被配置为获取和/或查询和/或使用主应用的共享能力。5.根据权利要求1所述的架构，其特征在于，所述微前端框架规范，包括如下中的一种或多种规范内容：业务应用独立性，用于指示所述业务子应用和所述平台方主应用之间可组合运行且可独立运行；技术栈无关性，用于指示各个应用能够针对各种微前端框架进行自由选型；通信机制，用于指示各个应用间能够相互通信；隔离性，用于指示各个应用之间不会互相产生影响；可控性，用于指示具备在运行态管理业务子应用的静态资源的能力。6.前端应用组合...
【专利技术属性】
技术研发人员：张聪萍，汤茂安，魏柯宁，
申请(专利权)人：中国银联股份有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。