管理分发方法和装置与流程

本发明属于基座技术领域，尤其涉及管理分发方法和装置。

背景技术：

相关技术中，目前市面上微前端架构方案，都有脚本，层叠样式表沙箱环境；服务自治；运行时动态解析依赖；服务间通信。

市面上的微前端架构，大多通过iframe嵌套应用或nginx分发应用，达到脚本，层叠样式表的沙箱隔离和服务自治。single-spa这类技术，以jsentry为入口，动态加载bundle。

iframe使用postmessage，single-spa采取webpacktargetlibrary在运行时注入子服务，实现对象控制通信。

目前绝大多数微前端架构主要分为：

(1)路由分发式

路由分发式，是常见的一种微前端架构解决方案，通过nginx分发请求至不同的子服务上，看起来像是一个整体。当切换时菜单时，实际上是在本页面打开新的网站，页面每次都会重新加载。当公共依赖更新时，对于子服务而言，不管是构建时还是运行时，都需要提测更新每个子服务，开发和运维效率变得低下。

多个子服务，存在相同的运行时数据，不能够共享。

(2)iframe

通过主容器，内嵌iframe加载不同的子服务，实现服务聚合，以及脚本，层叠样式表的作用域隔离。但是这样的方案，跨服务通信变得麻烦，服务耦合性侵入式高。不利于网站seo，同时切换子服务时，每次都需重新刷新加载。

(3)webcomponents

webcomponents允许自定义元素，是一种面向未来的架构。目前浏览器还存在许多兼容问题，不适合实际使用。

(4)single-spa

使用jsentry为入口文件，动态解析bundle。但子服务版本更新时，对应的依赖版本都需要更新，这让开发和运维效率变得低下。通常构建出的bundle.js比较大，拖慢页面打开速度。

技术实现要素：

本发明实施例提供一种管理分发方法和装置，用于至少解决上述技术问题之一。

第一方面，本发明实施例提供一种管理分发方法，用于微前端基座，其中，云服务器包括微前端基座，所述云服务器的所有子服务的入口均转发至所述微前端基座，所述方法包括：响应于接收到浏览器的第一请求，向所述浏览器返回所述微前端基座的第一资源文件，其中，所述第一资源文件包括与所述微前端基座相关的html和js文件，所述浏览器能够对所述预设资源文件的解析获取到真实子服务器地址；以及响应于所述浏览器对所述真实子服务器发送第二请求，向所述浏览器返回第二资源文件，其中，所述第二资源文件包括css文件和js文件。

第二方面，本发明实施例提供一种管理分发方法，用于浏览器的基座，包括：响应于浏览器接收到云服务器基于所述浏览器的请求返回的资源文件，对所述资源文件进行路由解析得到真实子服务地址，其中，所述资源文件包括与所述微前端基座相关的html和js文件；基于所述真实子服务地址发起入口html地址fetch请求；根据返回的html地址动态解析页面内容，获取内联层叠样式表、内联脚本、外联层叠样式表地址和外联脚本地址；以及基于所述外联层叠样式表地址和所述外联脚本地址向所述云服务器发起外联请求，并维护请求队列，当所有外联请求的层叠样式表和脚本文件都返回后，执行回调操作。

第三方面，本发明实施例提供一种管理分发装置，用于微前端基座，其中，云服务器包括微前端基座，所述云服务器的所有子服务的入口均转发至所述微前端基座，所述装置包括：第一返回模块，配置为响应于接收到浏览器的第一请求，向所述浏览器返回所述微前端基座的第一资源文件，其中，所述第一资源文件包括与所述微前端基座相关的html和js文件，所述浏览器能够对所述预设资源文件的解析获取到真实子服务器地址；以及第二返回模块，配置为响应于所述浏览器对所述真实子服务器发送第二请求，向所述浏览器返回第二资源文件，其中，所述第二资源文件包括css文件和js文件。

第四方面，本发明实施例提供一种管理分发装置，用于浏览器的基座，包括：解析模块，配置为响应于浏览器接收到云服务器基于所述浏览器的请求返回的资源文件，对所述资源文件进行路由解析得到真实子服务地址，其中，所述资源文件包括与所述微前端基座相关的html和js文件；请求模块，配置为基于所述真实子服务地址发起入口html地址fetch请求；获取模块，配置为根据返回的html地址动态解析页面内容，获取内联层叠样式表、内联脚本、外联层叠样式表地址和外联脚本地址；以及回调模块，配置为基于所述外联层叠样式表地址和所述外联脚本地址向所述云服务器发起外联请求，并维护请求队列，当所有外联请求的层叠样式表和脚本文件都返回后，执行回调操作。

第五方面，提供一种电子设备，其包括：至少一个处理器，以及与所述至少一个处理器通信连接的存储器，其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行本发明任一实施例的管理分发方法的步骤。

第六方面，本发明实施例还提供一种计算机程序产品，所述计算机程序产品包括存储在非易失性计算机可读存储介质上的计算机程序，所述计算机程序包括程序指令，当所述程序指令被计算机执行时，使所述计算机执行本发明任一实施例的管理分发方法的步骤。

本申请的方法和装置可以实现所有的子服务，实际上都是通过基座控制。公共依赖和数据，都可以通过基座调用，实现了公共依赖撤离。公共依赖的更新，只需更新基座的依赖版本号即可。大大提升的开发效率和维护效率。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对实施例描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明一实施例提供的一种管理分发方法的流程图；

图2为本发明一实施例提供的另一种管理分发方法的流程图；

图3为本发明一实施例提供的浏览器基座与云服务器微前端基座交互流程图；

图4为本发明一实施例提供的一种管理分发装置的框图；

图5为本发明一实施例提供的另一种管理分发装置的框图；

图6是本发明一实施例提供的电子设备的结构示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

请参考图1，其示出了一种管理分发方法的流程图，该方法应用于用于微前端基座，其中，云服务器包括微前端基座，所述云服务器的所有子服务的入口均转发至所述微前端基座。

如图1所示，在步骤101中，响应于接收到浏览器的第一请求，向所述浏览器返回所述微前端基座的第一资源文件；

在步骤102中，响应于所述浏览器对所述真实子服务器发送第二请求，向所述浏览器返回第二资源文件。

其中，css(cascadingstylesheets，层叠样式表)是一种用来表现html(标准通用标记语言的一个应用)或xml(标准通用标记语言的一个子集)等文件样式的计算机语言。css不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。css能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

在本实施例中，微前端基座的管理分发装置基于接收到浏览器的第一请求，向所述浏览器返回所述微前端基座的第一资源文件，其中，所述第一资源文件包括与所述微前端基座相关的html和js文件，所述浏览器能够对所述预设资源文件的解析获取到真实子服务器地址。之后，基于浏览器对所述真实子服务器发送第二请求，向所述浏览器返回第二资源文件，其中，所述第二资源文件包括css文件和js文件。从而可以实现所有的子服务，实际上都是通过基座控制。公共依赖和数据，都可以通过基座调用，实现了公共依赖撤离。公共依赖的更新，只需更新基座的依赖版本号即可。大大提升的开发效率和维护效率。

在进一步的实施例中，所述微前端基座的服务为nginx服务，所述微前端基座中存储有与所述nginx服务相关的html和js文件。其中，nginx(enginex)是一个高性能的http和反向代理服务器，也是一个imap/pop3/smtp服务器，由伊戈尔·赛索耶夫开发。其将源代码以类bsd许可证的形式发布，并且因其稳定性、丰富的功能集、示例配置文件和低系统资源的消耗而闻名。其特点是占有内存少，并发能力强。

请参考图2，其示出了本申请一实施例提供的一种管理分发方法的流程图，用于浏览器的基座。

如图2所示，在步骤201中，响应于浏览器接收到云服务器基于所述浏览器的请求返回的资源文件，对所述资源文件进行路由解析得到真实子服务地址，其中，所述资源文件包括与所述微前端基座相关的html和js文件；

在步骤202中，基于所述真实子服务地址发起入口html地址fetch请求；

在步骤203中，根据返回的html地址动态解析页面内容，获取内联层叠样式表、内联脚本、外联层叠样式表地址和外联脚本地址；

在步骤204中，基于所述外联层叠样式表地址和所述外联脚本地址向所述云服务器发起外联请求，并维护请求队列，当所有外联请求的层叠样式表和脚本文件都返回后，执行回调操作。

本实施例的方法通过从云服务器的微前端基座获取的资源文件，在浏览器基座内核进行处理，从而可以实现对所有浏览器的兼容。

在一些可选的实施例中，当所述请求队列出现异常时，所述方法还包括：捕获所述异常，并进行对应的异常处理。从而在发生异常时能够及时捕获处理。

在一些可选的实施例中，在所有外联请求的层叠样式表和脚本文件都返回后，所述方法还包括：将所有基于所述外联请求返回的层叠样式表的内容全部转化为内联层叠样式表，插入dom文档流中；当与所述层叠样式表对应的子服务卸载时，删除对应的容器内容。从而可以以实现层叠样式表的作用域。

在一些可选的实施例中，在所有外联请求的层叠样式表和脚本文件都返回后，所述方法还包括：将所有基于所述外联请求返回的脚本文件挂载至window下；根据与所述脚本文件对应的子服务设置作用域scope，并存储快照。从而可以实现脚本的作用域问题。

需要说明的是，上述方法步骤并不用于限制各步骤的执行顺序，实际上，某些步骤可能会同时执行或者以与步骤限定的相反的顺序执行，本申请在此没有限制。

下面对通过描述发明人在实现本发明的过程中遇到的一些问题和对最终确定的方案的一个具体实施例进行说明，以使本领域技术人员更好地理解本申请的方案。

发明人在实现本申请的过程中发现，现有技术中存在的缺陷主要是由于以下内容导致的：由于微前端架构中：数据的共享；多服务的公共依赖；子服务自治；服务通信都需要管理，而上述技术，大都通过自组织模式实现，好处在于子服务间不存在互相管理，但短处在于设计难度大，不方便实施，存在大量的重复代码，不利于最小颗粒度拆分和管理。

目前市面上微前端架构，基本上都是使用路由分发式，各个子服务单独开发，单独发布。通过nginx分发至不同子服务上。对于公共依赖，数据等通过构建私有npm包，利用构建时注入代码至每个子服务里。

本申请实施例，使用基座模式，利用运行时，动态解析子服务依赖，再聚合应用。不容易想到该方案的原因可以有以下几个方面：前端由于各个浏览器不同兼容问题，导致webcomponents这样的技术不能够生产使用。不同公司的前端应用复杂度有很大不同，大部分还是中小型应用，单体spa程序能够满足。前端界架构：serverrender->前后端分离->单体spa->微前端，大部分的应用还处于单体spa阶段，微前端兴起没多久，大家还处于不同的探索阶段，需解决的问题还很多，每种技术还存在都许多问题。

本专利使用微前端基座，统一管理和分发子服务。实现服务聚合，多服务数据在运行时共享。多依赖集中至基座，有利于longcache。使用htmlentry方式，运行时动态解析子服务依赖，动态注入容器中。使用子服务名做scope，解决脚本作用域问题。层叠样式表部分，使用外联转内联，随dom插入文档流之中，应用卸载时，随之也卸载style，达到层叠样式表沙箱机制。

请参考图3，当用户使用浏览器请求网站时，如下步骤：

(1)所有请求先到达服务器ingress。

(2)由ingress配置规则，将所有子服务的index.html入口全部转发至基座服务。

(3)基座服务，实际上一个nginx服务，里面存储着相关的html,js文件。

(4)当浏览器获取基座的js代码，开始运行。基座代码会截取访问路由，根据配置的路由获取到对应的真实子服务地址。

(5)基座根据第4步，获取到子服务真实地址后，开始发起入口html地址fetch请求。

根据返回的html内容，动态解析页面内容，通过正则匹配得到内联层叠样式表，内联脚本，外联层叠样式表地址，外联脚本地址。其中外联部分，浏览器继续发起fetch请求，获取对应的内容。

(6)根据步骤5，浏览器会陆续发起外联请求，基座会维护一个promise请求队列，当所有外联的层叠样式表和脚本文件，都返回后，执行回调操作。

(7)如果请求出现异常，或者操作异常，基座会捕获这些异常操作，去做对应的异常处理。

(8)当promise队列，全部返回成功后，执行回调操作。

(9)基座将所有外联的层叠样式表内容全部转化为内联，插入dom文档流中，当子服务卸载时，基座再删除对应的容器内容，这样就实现了层叠样式表的作用域。

(10)基座将所有外联的脚本对象，挂载至window下，另外基座会根据对应的子服务名设置作用域scope，并存储快照。这样就实现了脚本的作用域问题。

这样，所有的子服务，实际上都是通过基座控制。公共依赖和数据，都可以通过基座调用，实现了公共依赖撤离。公共依赖的更新，只需更新基座的依赖版本号即可。大大提升的开发效率和维护效率。

另外，子服务的更新，基座动态取解析，不影响其他的服务。各个团队独立开发，独立部署，技术无关。

由于基座动态解析，子服务聚合在同一个window下，通信就变得更加简单。

此方案，不存在浏览器兼容问题，是比较好的微前端架构方案。

发明人在实现本申请的过程中，还采用过如下备选方案，使用路由分发式。虽然每个服务都独立拆分出来，单独开发，单独部署发布。

优点在于简单。不需要引入其他概念和学习成本，从单体spa应用阶段过渡至微前端开发，只需要从业务上拆分多个服务开发而已。

缺点也很明显：多个服务的公共依赖无法复用；公共的运行时数据也无法复用；公共的ui组件库，通过npm构建时注入，每次更新版本，都需要构建->提测->部署每一个服务，开发和运维效率变得低下；每个子服务的体积变得很大，业务代码和公共依赖包没有解耦，导致无法有效的cache和降低构建时间。

通过本方案彻底解决多子服务管理问题以及服务间解耦。

每个子服务只需要关心自身的代码，业务和依赖包彻底解耦，利于cache设置，极大的加快构建速度，网站速度。

每个子服务，可以通过基座，实现统一灰度发布策略。

多个子服务的公共依赖，都可以抽离，公共依赖更新，无需再更新每个子服务依赖库版本，不需要重新提测发布。

跨服务，跨部门开发，将变得简单。无关框架技术，聚合服务将变得简单，不同部门之间互不影响开发，上线。每个部门的发布，都不影响基座和其他部门。真正做到的独立开发，独立部署，技术无关，统一聚合。

请参考图4，其示出了本发明一实施例提供的用于微前端基座的管理分发装置的框图，其中，云服务器包括微前端基座，所述云服务器的所有子服务的入口均转发至所述微前端基座。

如图4所示，用于微前端基座的管理分发装置400包括第一返回模块410和第二返回模块420。

第一返回模块410，配置为响应于接收到浏览器的第一请求，向所述浏览器返回所述微前端基座的第一资源文件，其中，所述第一资源文件包括与所述微前端基座相关的html和js文件，所述浏览器能够对所述预设资源文件的解析获取到真实子服务器地址；以及第二返回模块420，配置为响应于所述浏览器对所述真实子服务器发送第二请求，向所述浏览器返回第二资源文件，其中，所述第二资源文件包括css文件和js文件。

请参考图5，其示出了本发明一实施例提供的用于浏览器基座的管理分发装置的框图。

用于浏览器基座的管理分发装置500包括解析模块510、请求模块520、获取模块530以及回调模块540。

其中，解析模块510，配置为响应于浏览器接收到云服务器基于所述浏览器的请求返回的资源文件，对所述资源文件进行路由解析得到真实子服务地址，其中，所述资源文件包括与所述微前端基座相关的html和js文件；请求模块520，配置为基于所述真实子服务地址发起入口html地址fetch请求；获取模块530，配置为根据返回的html地址动态解析页面内容，获取内联层叠样式表、内联脚本、外联层叠样式表地址和外联脚本地址；以及回调模块540，配置为基于所述外联层叠样式表地址和所述外联脚本地址向所述云服务器发起外联请求，并维护请求队列，当所有外联请求的层叠样式表和脚本文件都返回后，执行回调操作。

应当理解，图4和图5中记载的诸模块与参考图1和图2中描述的方法中的各个步骤相对应。由此，上文针对方法描述的操作和特征以及相应的技术效果同样适用于图4和图5中的诸模块，在此不再赘述。

值得注意的是，本公开的实施例中的模块并不用于限制本公开的方案，例如请求模块可以描述为基于所述真实子服务地址发起入口html地址fetch请求的模块。另外，还可以通过硬件处理器来实现相关功能模块，例如请求模块也可以用处理器实现，在此不再赘述。

在另一些实施例中，本发明实施例还提供了一种非易失性计算机存储介质，计算机存储介质存储有计算机可执行指令，该计算机可执行指令可执行上述任意方法实施例中的管理分发方法；

作为一种实施方式，本发明的非易失性计算机存储介质存储有计算机可执行指令，计算机可执行指令设置为：

用于微前端基座，其中，云服务器包括微前端基座，所述云服务器的所有子服务的入口均转发至所述微前端基座，所述方法包括：

响应于接收到浏览器的第一请求，向所述浏览器返回所述微前端基座的第一资源文件，其中，所述第一资源文件包括与所述微前端基座相关的html和js文件，所述浏览器能够对所述预设资源文件的解析获取到真实子服务器地址；

响应于所述浏览器对所述真实子服务器发送第二请求，向所述浏览器返回第二资源文件，其中，所述第二资源文件包括css文件和js文件。

非易失性计算机可读存储介质可以包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需要的应用程序；存储数据区可存储根据管理分发装置的使用所创建的数据等。此外，非易失性计算机可读存储介质可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实施例中，非易失性计算机可读存储介质可选包括相对于处理器远程设置的存储器，这些远程存储器可以通过网络连接至管理分发装置。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

本发明实施例还提供一种计算机程序产品，计算机程序产品包括存储在非易失性计算机可读存储介质上的计算机程序，计算机程序包括程序指令，当程序指令被计算机执行时，使计算机执行上述任一项管理分发方法。

图6是本发明实施例提供的电子设备的结构示意图，如图6所示，该设备包括：一个或多个处理器610以及存储器620，图6中以一个处理器610为例。管理分发方法的设备还可以包括：输入装置630和输出装置640。处理器610、存储器620、输入装置630和输出装置640可以通过总线或者其他方式连接，图6中以通过总线连接为例。存储器620为上述的非易失性计算机可读存储介质。处理器610通过运行存储在存储器620中的非易失性软件程序、指令以及模块，从而执行服务器的各种功能应用以及数据处理，即实现上述方法实施例管理分发方法。输入装置630可接收输入的数字或字符信息，以及产生与通讯补偿装置的用户设置以及功能控制有关的键信号输入。输出装置640可包括显示屏等显示设备。

上述产品可执行本发明实施例所提供的方法，具备执行方法相应的功能模块和有益效果。未在本实施例中详尽描述的技术细节，可参见本发明实施例所提供的方法。

作为一种实施方式，上述电子设备应用于管理分发装置中，用于客户端，包括：至少一个处理器；以及，与至少一个处理器通信连接的存储器；其中，存储器存储有可被至少一个处理器执行的指令，指令被至少一个处理器执行，以使至少一个处理器能够：

用于微前端基座，其中，云服务器包括微前端基座，所述云服务器的所有子服务的入口均转发至所述微前端基座，所述方法包括：

响应于接收到浏览器的第一请求，向所述浏览器返回所述微前端基座的第一资源文件，其中，所述第一资源文件包括与所述微前端基座相关的html和js文件，所述浏览器能够对所述预设资源文件的解析获取到真实子服务器地址；

响应于所述浏览器对所述真实子服务器发送第二请求，向所述浏览器返回第二资源文件，其中，所述第二资源文件包括css文件和js文件。

本申请实施例的电子设备以多种形式存在，包括但不限于：

(1)移动通信设备：这类设备的特点是具备移动通信功能，并且以提供话音、数据通信为主要目标。

(2)超移动个人计算机设备：这类设备属于个人计算机的范畴，有计算和处理功能，一般也具备移动上网特性。这类终端包括：pda、mid和umpc设备等。

(3)便携式娱乐设备：这类设备可以显示和播放多媒体内容。该类设备包括:音频、视频播放器，掌上游戏机，电子书，以及智能玩具和便携式车载导航设备。

(4)服务器:提供计算服务的设备，服务器的构成包括处理器、硬盘、内存、系统总线等，服务器和通用的计算机架构类似，但是由于需要提供高可靠的服务，因此在处理能力、稳定性、可靠性、安全性、可扩展性、可管理性等方面要求较高。

(5)其他具有数据交互功能的电子装置。

以上所描述的装置实施例仅仅是示意性的，其中作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如rom/ram、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分的方法。

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。