模块运行器的生成方法、页面加载方法、装置及电子设备

技术领域

本发明涉及互联网技术领域，尤其涉及一种模块运行器的生成方法、页面加载方法、装置及电子设备。

背景技术

随着前端应用承接的业务内容越来越多，为了降低开发成本，在开发前端应用时，通常会使具有相同功能的共享模块能够在多个前端应用中实现复用。目前，大多采用微前端框架实现上述目的，即共享模块的提供方需要将共享模块以微前端的方式提供给共享模块的使用方。

在实现本发明的过程中，发现现有技术中至少存在以下技术问题：

微前端框架不仅要求共享模块提供方使用微前端架构构建共享模块，还要求共享模块使用方具备对基于不同的微前端架构构建的共享模块的兼容能力，导致操作复杂度和接入成本均较高，可维护性较差。

发明内容

本发明实施例提供了一种模块运行器的生成方法、页面加载方法、装置及电子设备，以解决微前端框架依赖微前端架构的问题，降低模块共享的操作复杂度和前端应用挂载共享模块的接入成本，提高前端应用和共享模块的可维护性。

根据本发明一个实施例提供了一种模块运行器的生成方法，该方法包括：

获取前端应用采用的至少一个预设共享模块分别对应的预设模块标识，并获取各所述预设模块标识分别对应的预设模块编码文件；

对各所述预设模块编码文件分别执行编译操作，得到至少一个预设模块执行文件；

基于运行器模板文件、各所述预设模块标识以及各所述预设模块标识分别对应的预设模块执行文件，生成模块运行器；

其中，所述预设模块编码文件表征共享模块提供方针对所述预设共享模块预先定义的逻辑编码数据，所述预设模块执行文件表征所述前端应用可运行的逻辑编码数据，所述运行器模板文件表征所述模块运行器在页面加载阶段执行的逻辑编码数据。

根据本发明另一个实施例提供了一种页面加载方法，该方法包括：

响应于检测到前端应用发送的模块挂载指令，采用模块运行器中的运行器模板文件，获取所述模块挂载指令中的挂载HTML元素和加载模块标识；

获取与所述加载模块标识对应的加载模块执行文件；

基于所述挂载HTML元素和所述加载模块执行文件，执行页面渲染操作，并将得到的渲染页面在可视化界面上进行显示；

其中，所述模块挂载指令是所述前端应用响应于页面加载指令生成的，所述加载模块执行文件表征所述前端应用可运行的逻辑编码数据，所述加载模块执行文件是通过对所述加载模块标识对应的加载模块编码文件进行编译得到的，所述加载模块编码文件表征共享模块提供方针对加载共享模块预先定义的逻辑编码数据。

根据本发明另一个实施例提供了一种模块运行器的生成装置，该装置包括：

预设模块编码文件获取模块，用于获取前端应用采用的至少一个预设共享模块分别对应的预设模块标识，并获取各所述预设模块标识分别对应的预设模块编码文件；

预设模块执行文件确定模块，用于对各所述预设模块编码文件分别执行编译操作，得到至少一个预设模块执行文件；

模块运行器生成模块，用于基于运行器模板文件、各所述预设模块标识以及各所述预设模块标识分别对应的预设模块执行文件，生成模块运行器；

其中，所述预设模块编码文件表征共享模块提供方针对所述预设共享模块预先定义的逻辑编码数据，所述预设模块执行文件表征所述前端应用可运行的逻辑编码数据，所述运行器模板文件表征所述模块运行器在页面加载阶段执行的逻辑编码数据。

根据本发明另一个实施例提供了一种页面加载装置，该装置包括：

加载模块标识获取模块，用于响应于检测到前端应用发送的模块挂载指令，采用模块运行器中的运行器模板文件，获取所述模块挂载指令中的挂载HTML元素和加载模块标识；

加载模块执行文件获取模块，用于获取与所述加载模块标识对应的加载模块执行文件；

渲染页面显示模块，用于基于所述挂载HTML元素和所述加载模块执行文件，执行页面渲染操作，并将得到的渲染页面在可视化界面上进行显示；

其中，所述模块挂载指令是所述前端应用响应于页面加载指令生成的，所述加载模块执行文件表征所述前端应用可运行的逻辑编码数据，所述加载模块执行文件是通过对所述加载模块标识对应的加载共享模块的加载模块编码文件进行编译得到的，所述加载模块编码文件表征共享模块提供方针对加载共享模块预先定义的逻辑编码数据。

根据本发明另一个实施例提供了一种电子设备，该电子设备包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的计算机程序，所述计算机程序被所述至少一个处理器执行，以使所述至少一个处理器能够执行本发明任一实施例所述的模块运行器的生成方法和/或页面加载方法。

根据本发明另一个实施例提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机指令，所述计算机指令用于使处理器执行时实现本发明任一实施例所述的模块运行器的生成方法和/或页面加载方法。

本发明实施例的技术方案，通过获取共享模块提供方针对前端应用采用的预设共享模块预先定义的预设模块编码文件，对预设模块编码文件执行编译操作，得到前端应用可运行的预设模块执行文件，以及基于运行器模板文件、预设模块标识以及预设模块标识对应的预设模块执行文件，生成模块运行器，解决了微前端框架依赖模块架构的问题，独立的模块运行器使得前端应用直接安装并运行本发明实施例提供的模块运行器，即可实现挂载所需的共享模块的目的，无需前端应用的开发者额外编写共享模块的挂载执行逻辑，降低了模块共享的操作复杂度和前端应用挂载共享模块的接入成本，提高了前端应用和共享模块的可维护性。

应当理解，本部分所描述的内容并非旨在标识本发明的实施例的关键或重要特征，也不用于限制本发明的范围。本发明的其它特征将通过以下的说明书而变得容易理解。

附图说明

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

图1为本发明一个实施例所提供的一种模块运行器的生成方法的流程图；

图2为本发明一个实施例所提供的一种模块运行器的生成方法的具体实例的流程图；

图3为本发明一个实施例所提供的一种页面加载方法的流程图；

图4为本发明一个实施例所提供的另一种页面加载方法的流程图；

图5为本发明一个实施例所提供的另一种页面加载方法的流程图；

图6为本发明一个实施例所提供的另一种页面加载方法的流程图；

图7为本发明一个实施例所提供的一种加载共享模块的销毁方法的流程图；

图8为本发明一个实施例所提供的一种模块运行器的生成装置的结构示意图；

图9为本发明一个实施例所提供的一种页面加载装置的结构示意图；

图10为本发明一个实施例所提供的一种电子设备的结构示意图。

具体实施方式

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

需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“预设”、“加载”、“销毁”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

图1为本发明一个实施例所提供的一种模块运行器的生成方法的流程图，本实施例可适用于在前端应用的前端页面中挂载共享模块的情况，该方法可以由模块运行器的生成装置来执行，该模块运行器的生成装置可以采用硬件和/或软件的形式实现，该模块运行器的生成装置可配置于终端设备中。如图1所示，该方法包括：

S110、获取前端应用采用的至少一个预设共享模块分别对应的预设模块标识，并获取各预设模块标识分别对应的预设模块编码文件。

其中，前端应用表征共享模块使用方提供的需要挂载共享模块的应用程序，具体的，在页面加载阶段，共享模块挂载到前端应用中的前端页面上。

其中，预设模块标识用于对预设共享模块进行唯一标识，示例性的，预设模块标识可由数字、文字、字母和特殊字符等构成，此处对预设模块标识构成方式不作限定。

在本实施例中，预设模块编码文件表征共享模块提供方针对预设共享模块预先定义的逻辑编码数据。具体的，预设模块编码文件为共享模块提供方的开发人员撰写的逻辑编码数据。

在一个具体实施例中，获取各预设模块标识分别对应的预设模块编码文件，包括：获取前端应用发送的模块配置列表；针对每个预设模块标识，从模块配置列表中获取与预设模块标识对应的文件地址，并基于文件地址，获取与预设模块标识对应的预设模块编码文件。

其中，具体的，模块配置列表中包含前端应用中需要挂载的至少一个预设共享模块分别对应的预设模块标识以及各预设模块标识分别对应的文件地址。

S120、对各预设模块编码文件分别执行编译操作，得到至少一个预设模块执行文件。

其中，具体的，编译操作用于将预设模块编码文件转换为预设模块执行文件，在本实施例中，预设模块执行文件表征前端应用可运行的逻辑编码数据。

其中，示例性的，执行编译操作采用的编译工具可以为webpack工具，此处对编译工具不作限定，能够完成本发明实施例的编译目的的编译工具均在本方案的保护范围之内。

其中，具体的，预设模块执行文件包括JS执行文件和静态文件，示例性的，静态文件包括但不限于CSS样式、图片、字体、音频和视频等等。

S130、基于运行器模板文件、各预设模块标识以及各预设模块标识分别对应的预设模块执行文件，生成模块运行器。

在本实施例中，运行器模板文件表征模块运行器在页面加载阶段执行的逻辑编码数据。

在一个具体实施例中，基于运行器模板文件、各预设模块标识以及各预设模块标识分别对应的预设模块执行文件，生成模块运行器，包括：基于运行器模板文件，创建模块运行器，并将各预设模块标识以及各预设模块执行文件对应注册到模块运行器中。

在另一个具体实施例中，基于运行器模板文件、各预设模块标识以及各预设模块标识分别对应的预设模块执行文件，生成模块运行器，包括：基于各预设模块标识，将各预设模块执行文件分别部署到部署服务器中；基于运行器模板文件和接收到的部署服务器发送的模块映射列表，生成模块运行器；其中，模块映射列表表征至少一个预设共享模块分别对应的预设模块执行文件在部署服务器中的部署地址。

这样设置的好处在于，可以降低在页面加载阶段模板运行器对前端应用的内存占用。

在上述实施例的基础上，具体的，该方法还包括：针对每个预设共享模块，获取预设共享模块对应的预设模块执行文件中的JS执行文件；获取JS执行文件中的生命周期回调函数，并将生命周期回调函数注册到模块运行器中；其中，生命周期回调函数包括预设共享模块的页面挂载回调函数，或者，生命周期回调函数还包括预设共享模块的初始化回调函数和/或模块销毁回调函数。

其中，具体的，页面挂载回调函数用于表征在运行模块运行器时，将预设共享模块挂载到前端应用中时的回调函数，初始化回调函数用于表征模块运行器在运行时，实例化预设共享模块时的回调函数，模块销毁回调函数表征模块运行器在运行时，销毁前端应用中挂载的预设共享模块时的回调函数。

其中，示例性的，页面挂载回调函数可以为mount函数，初始化回调函数可以为bootstrap函数，模块销毁回调函数可以为unmount函数。

本实施例的技术方案，通过获取共享模块提供方针对前端应用采用的预设共享模块预先定义的预设模块编码文件，对预设模块编码文件执行编译操作，得到前端应用可运行的预设模块执行文件，以及基于运行器模板文件、预设模块标识以及预设模块标识对应的预设模块执行文件，生成模块运行器，解决了微前端框架依赖模块架构的问题，独立的模块运行器使得前端应用直接安装并运行本发明实施例提供的模块运行器，即可实现挂载所需的共享模块的目的，无需前端应用的开发者额外编写共享模块的挂载执行逻辑，降低了模块共享的操作复杂度和前端应用挂载共享模块的接入成本，提高了前端应用和共享模块的可维护性。

在上述实施例的基础上，具体的，该方法还包括：将预先定义的环境隔离模板文件和/或样式隔离模板文件注册到模块运行器中；其中，环境隔离模板文件表征模块运行器在页面加载阶段，对各预设共享模块和前端应用进行环境隔离的逻辑编码数据，样式隔离模板文件表征模块运行器在页面加载阶段，对各预设共享模块和前端应用进行样式隔离的逻辑编码数据。

注入环境隔离模板文件的好处在于，可以解决在页面加载阶段，前端应用在运行模块运行器时，前端应用与模块运行器中预设共享模块之间存在的环境污染的问题，避免了共享模块提供方需要在每个预设模块编码文件中分别增加环境隔离方案带来的编写资源消耗，以及避免了微前端框架中共享模块使用方需要跨域对预设模块编码文件进行环境隔离的操作，降低了前端应用的计算资源消耗。

注入样式隔离模板文件的好处在于，可以解决在页面加载阶段，前端应用在运行模块运行器时，前端应用与模块运行器中预设共享模块之间存在的样式污染或样式冲突的问题，避免了共享模块提供方需要在每个预设模块编码文件中分别增加样式隔离方案带来的资源消耗，以及避免了微前端框架中共享模块使用方需要跨域对预设模块编码文件进行样式隔离的操作，降低了前端应用的计算资源消耗。

关于环境隔离模板文件和样式隔离模板文件表征的执行逻辑内容将在下述关于页面加载方法的实施例中进行详细解释说明。

图2为本发明一个实施例所提供的一种模块运行器的生成方法的具体实例的流程图。具体的，获取其前端应用中需要挂载的共享模块，基于读取到的运行器模板文件，创建模块运行器，对共享模块的模块编码文件进行编译，得到模块执行文件。将共享模块的元数据注册到模块运行器，如此步骤中的元数据包括但不限于共享模块的模块标识、版本号、功能、渲染内容等。将环境隔离模板文件和样式隔离模板文件注册到模块运行器中，将模块执行文件上传到部署服务器中进行部署，并将部署服务器发送的将模块执行文件的部署地址添加到模块运行器中。

图3为本发明一个实施例所提供的一种页面加载方法的流程图，本实施例可适用于在前端应用的前端页面的加载过程中，在前端页面中挂载显示共享模块的渲染内容的情况，该方法可以由页面加载装置来执行，该页面加载装置可以采用硬件和/或软件的形式实现，该页面加载装置可配置于终端设备中。如图3所示，该方法包括：

S210、响应于检测到前端应用发送的模块挂载指令，采用模块运行器中的运行器模板文件，获取模块挂载指令中的挂载HTML元素和加载模块标识。

在本实施例中，模块挂载指令是前端应用响应于页面加载指令生成的，运行器模板文件表征模块运行器在页面加载阶段执行的逻辑编码数据。

其中，具体的，当前端应用需要挂载共享模块时，需要将该共享模块渲染出来的HTML内容放置在前端应用提供的挂载HTML元素中。加载模块标识表征与模块挂载指令对应的加载共享模块的模块标识。

其中，示例性的，模块运行器为前端应用提供了一个load方法，前端应用通过调用load方法，将挂载HTML元素和加载模块标识作为入参发送给模块运行器。

S220、获取与加载模块标识对应的加载模块执行文件。

在本实施例中，加载模块执行文件表征前端应用可运行的逻辑编码数据，加载模块执行文件是通过对加载模块标识对应的加载模块编码文件进行编译得到的，加载模块编码文件表征共享模块提供方针对加载共享模块预先定义的逻辑编码数据。

其中，具体的，加载模块执行文件包括JS执行文件和静态文件，示例性的，静态文件包括但不限于CSS样式、图片、字体、音频和视频等等。

在一个具体实施例中，模块运行器中的注册有各预设模块标识分别对应的预设模块执行文件，相应的，获取与加载模块标识对应的加载模块执行文件，包括：从模块运行器中获取与加载模块标识对应的加载模块执行文件。

在另一个实施例中，模块运行器中的注册有模块映射列表，相应的，获取与加载模块标识对应的加载模块执行文件，包括：基于加载模块标识，从模块运行器中的模块映射列表中获取加载部署地址；基于加载部署地址，从部署服务器中下载与加载模块标识对应的加载模块执行文件；其中，模块映射列表表征至少一个预设共享模块分别对应的预设模块执行文件在部署服务器中的部署地址，模块映射列表是部署服务器在将各预设模块执行文件部署之后发送给模块运行器的。

这样设置的好处在于，既可以减少前端应用在安装模块运行器时产生的不必要的内容传输，又可以降低模板运行器对前端应用的内存占用。

S230、基于挂载HTML元素和加载模块执行文件，执行页面渲染操作，并将得到的渲染页面在可视化界面上进行显示。

在一个具体实施例中，在基于挂载HTML元素和加载模块执行文件，执行页面渲染操作，包括：通过调用加载模块标识对应的初始化回调函数，执行加载共享模块对应的初始化操作；通过调用加载模块标识对应的页面挂载回调函数，基于挂载HTML元素和加载模块执行文件，执行页面渲染操作；其中，初始化回调函数和页面挂载回调函数是在模块运行器的生成阶段，从加载模块执行文件中的JS执行文件获取到后注册到模块运行器中的。

其中，示例性的，页面挂载回调函数可以为mount函数，初始化回调函数可以为bootstrap函数。

其中，具体的，模块运行器基于加载模块执行文件，执行页面渲染操作，并将渲染得到的页面内容添加到挂载HTML元素中，得到渲染页面。

本实施例的技术方案，通过响应于检测到前端应用发送的模块挂载指令，采用模块运行器中的运行器模板文件，获取模块挂载指令中的挂载HTML元素和加载模块标识，获取与加载模块标识对应的加载模块执行文件，基于挂载HTML元素和加载模块执行文件，执行页面渲染操作，并将得到的渲染页面在可视化界面上进行显示，解决了微前端框架依赖模块架构的问题，前端应用通过安装并运行本发明实施例提供的模块运行器，实现了挂载共享模块的目的，无需前端应用的开发者额外编写共享模块的挂载执行逻辑，降低了模块共享的操作复杂度和前端应用挂载共享模块的接入成本，提高了前端应用和共享模块的可维护性。

在上述实施例的基础上，具体的，在基于挂载HTML元素和加载模块执行文件，执行页面渲染操作之前，该方法还包括：采用模块运行器中注册的环境隔离模板文件，获取加载模块执行文件中的JS执行文件，并将JS执行文件封装到环境隔离模板文件中的立即执行函数中；基于加载模块标识，声明与前端应用对应的全局环境对象，并将全局环境对象作为入参传入到立即执行函数中；其中，环境隔离模板文件用于对加载共享模块和前端应用进行环境隔离。

其中，具体的，全局环境对象中的参数包括全局环境变量和/或全局环境方法，示例性的，全局环境对象包括但不限于window、self、document、Array、Object、String、Boolean、Math、Number、Symbol、Date、Function、Proxy、Error等等。

这样设置的好处在于，防止加载共享模块对应的JS执行文件在执行过程中对前端应用中的JavaScript变量进行修改、敏感数据的读取等，避免影响前端应用的应用程序的正常执行和数据安全的操作。

图4为本发明一个实施例所提供的另一种页面加载方法的流程图，本发明实施例在上述实施例提供的页面加载方法的基础上添加了样式隔离方案。如图4所示，该方法包括：

S310、响应于检测到前端应用发送的模块挂载指令，采用模块运行器中的运行器模板文件，获取模块挂载指令中的挂载HTML元素和加载模块标识。

S320、获取与加载模块标识对应的加载模块执行文件。

S330、采用模块运行器中注册的样式隔离模板文件，对挂载HTML元素进行影子DOM化处理，得到目标shadowDOM元素。

在本实施例中，样式隔离模板文件用于对加载共享模块和前端应用进行样式隔离。

其中，示例性的，使用DOM元素的attachShadow方法，对挂载HTML元素进行影子DOM化处理，attachShadow方法会在挂载HTML元素下创建一个包含shadowRoot子元素的shadowDOM元素。目标shadowDOM元素可以将内部结构、样式和行为隐藏起来，防止共享模块的CSS样式与前端页面中已有CSS样式发生干扰或冲突。

S340、将加载模块执行文件中的CSS样式挂载到目标shadowDOM元素中。

其中，CSS样式可具体挂载到目标shadowDOM元素中的shadowRoot元素内。

S350、在基于加载模块执行文件中的JS执行文件执行页面渲染操作的过程中，获取JS执行文件中的CSS样式创建函数。

其中，示例性的，CSS样式创建函数所属的方法包括但不限于创建HTML元素方法、HTML文档流写入方法和元素CSS样式操作方法。其中，创建HTML元素方法中的CSS样式创建函数包括document.createElement函数，该函数可用于创建link标签和style标签。HTML文档流写入方法中的CSS样式创建函数包括document.write函数，该函数可用于写入link标签和style标签。元素CSS样式操作方法中的CSS样式创建函数包括addRule函数和insertRule函数等。

此处对需要拦截的CSS样式创建函数不作限定，可以理解的是，任何用于创建CSS样式的函数均在本发明的保护范围之内。

S360、将基于CSS样式创建函数创建的CSS样式挂载到目标shadowDOM元素中。

S370、将得到的渲染页面在可视化界面上进行显示。

本实施例的技术方案，通过采用模块运行器中注册的样式隔离模板文件，对挂载HTML元素进行影子DOM化处理，得到目标shadowDOM元素，将加载模块执行文件中的CSS样式挂载到目标shadowDOM元素中，在基于加载模块执行文件中的JS执行文件执行页面渲染操作的过程中，获取JS执行文件中的CSS样式创建函数，将基于CSS样式创建函数创建的CSS样式挂载到目标shadowDOM元素中，解决了加载共享模块创建的CSS样式对前端应用中的已有CSS样式之前存在干扰的问题，防止加载共享模块的CSS样式对前端页面中已有CSS样式进行修改、覆盖等操作，避免了渲染页面发生布局混乱的情况。

在上述实施例的基础上，该方法还包括：采用模块运行器中注册的样式隔离模板文件，创建影子DOM化的关联shadowDOM元素，并将目标shadowDOM元素中挂载的CSS样式挂载到关联shadowDOM元素中；将挂载后的关联shadowDOM元素添加到前端应用的body元素中。

其中，示例性的，采用document.createElement(‘div’)创建一个与目标shadowDOM元素关联的关联shadowDOM元素。

在一个具体实施例中，在目标shadowDOM元素挂载加载模块执行文件中的CSS样式的过程中，将目标shadowDOM元素中挂载的CSS样式挂载到关联shadowDOM元素中，包括：将加载模块执行文件中的CSS样式同步挂载到关联shadowDOM元素中。

在另一个具体实施例中，将目标shadowDOM元素中挂载的CSS样式挂载到关联shadowDOM元素中，包括：对目标shadowDOM元素进行监听；当监听到目标shadowDOM元素中的挂载操作时，将挂载操作对应的CSS样式挂载到关联shadowDOM元素中。

其中，示例性的，通过new MutationObserver实例化一个MutationO bserver对目标shadowDOM元素中的shadowRoot元素的挂载内容的变化进行监听。其中，MutationObserver属于Web浏览器的内置功能，会在指定的DOM元素发生变化时通知订阅者。

其中，示例性的，通过document.body方法，获取到前端应用中的body元素，并通过调用appendChild方法，将关联shadowDOM元素添加到前端应用的body元素中。

这样设置的好处在于，用于关联shadowDOM元素是实现存放JS执行文件中可能需要在目标shadowDOM元素之外渲染的内容的目的，如在JS执行文件执行过程中，当JS执行文件将全局消息通知和模态框等UI内容放入body元素时可以得到正常的样式渲染。

图5为本发明一个实施例所提供的另一种页面加载方法的流程图，本发明实施例对上述实施例中的样式隔离方案进行进一步细化，如图5所示，该方法包括：

S410、响应于检测到前端应用发送的模块挂载指令，采用模块运行器中的运行器模板文件，获取模块挂载指令中的挂载HTML元素和加载模块标识。

S420、获取与加载模块标识对应的加载模块执行文件。

S430、采用模块运行器中注册的样式隔离模板文件，对挂载HTML元素进行影子DOM化处理，得到目标shadowDOM元素。

S440、在基于加载模块执行文件中的JS执行文件执行页面渲染操作的过程中，获取目标shadowDOM元素中挂载的至少一个CSS样式。

其中，示例性的，通过目标shadowDOM元素的shadowRoot.styleSheets属性，获取目标shadowDOM元素中挂载的CSS样式声明列表，CSS样式声明列表中包含挂载的至少一个CSS样式。

S450、针对每个CSS样式，在CSS样式存在于全局样式列表的情况下，将CSS样式添加到移除样式列表中。

在本实施例中，全局样式列表表征前端应用不支持在目标shadowDOM元素中声明的至少一个CSS样式。

其中，示例性的，全局样式列表中包含动画关键帧声明规则(@keyfr ames)、字体声明规则(@font-face)、外部资源引用规则(@import)和打印文档样式规则(@page)等等，此处对全局样式列表中的CSS样式不作限定，可根据前端应用的兼容规则进行自定义设置。

其中，具体的，根据CSS样式对应的构造器名称，判断CSS样式是否存在于全局样式列表中。示例性的，与@keyframes对应的构造器名称为CSSKeyframesRule，与@font-face对应的构造器名称为CSSFontFaceRule，与@import对应的构造器名称为CSSImportRule，与@page对应的构造器名称为CSSPageRule。

其中，具体的，移除样式列表表征前端应用不支持加载共享模块在目标shadowDOM元素中声明的至少一个CSS样式。

S460、基于加载模块标识和移除样式列表，创建style元素，并将style元素添加到前端应用的head元素中。

其中，示例性的，采用document.createElement(‘style’)创建st yle元素，设置该style元素的source属性为加载模块标识，设置该sty le元素的innerHTML属性为移除样式列表，通过调用document.head.app endChild方法，将创建的style元素添加到前端应用的前端页面的head元素内。

在上述实施例的基础上，具体的，该方法还包括：获取前端应用对应的页面样式列表中各CSS样式分别对应的页面名称字段；其中，页面样式列表表征前端应用预先定义的至少一个CSS样式；获取移除样式列表中各CSS样式分别对应的模块名称字段；在各模块名称字段与各页面名称字段之间存在至少一个相同名称字段的情况下，基于各相同名称字段，执行样式冲突报警操作。

其中，具体的，页面样式列表中各CSS样式为前端应用为渲染前端页面预先定义的。其中，示例性的，@keyframes的名称字段为name，@font-face的名称字段为style.fontFamily。

其中，示例性的，样式冲突报警操作包括但不限于文字提示、消息通知和指示灯通知等。如可以通过前端应用的日志工具console在前端应用的开发者环境输出日志，也可以通过调用特定的http接口触发其他形式的消息通知等，此处对样式冲突报警操作不作限定。

这样设置的好处在于，由于为解决前端应用与加载共享模块的兼容性问题，将目标shadowDOM元素中不支持声明的CSS样式添加到的前端应用的全局样式声明中，但同时可能会带来移除样式列表中的CSS样式与全局样式声明中的CSS样式发生冲突的隐患。因此通过对移除样式列表和全局样式声明对应的页面样式列表进行比较，实现了样式冲突报警的目的，以辅助前端应用的开发者及时发现样式故障进行后续的维护操作。

S470、将得到的渲染页面在可视化界面上进行显示。

本实施例的技术方案，通过获取目标shadowDOM元素中挂载的至少一个CSS样式，针对每个CSS样式，在CSS样式存在于全局样式列表的情况下，将CSS样式添加到移除样式列表中，基于加载模块标识和移除样式列表，创建style元素，并将style元素添加到前端应用的head元素中，其中，全局样式列表表征前端应用不支持在目标shadowDOM元素中声明的至少一个CSS样式，解决了前端应用与加载共享模块的样式兼容性问题，进一步降低了前端应用接入共享模块的接入成本，以及进一步提高了前端应用和共享模块的可维护性。

图6为本发明一个实施例所提供的另一种页面加载方法的流程图，本发明实施例在上述实施例提供的页面加载方法的基础上添加了共享模块的销毁方案。如图6所示，该方法包括：

S510、响应于检测到前端应用发送的模块挂载指令，采用模块运行器中的运行器模板文件，获取模块挂载指令中的挂载HTML元素和加载模块标识。

S520、获取与加载模块标识对应的加载模块执行文件。

S530、基于挂载HTML元素和加载模块执行文件，执行页面渲染操作，并将得到的渲染页面在可视化界面上进行显示。

S540、响应于检测到前端应用发送的模块销毁指令，获取模块销毁指令中的销毁模块标识。

其中，示例性的，模块销毁指令可以是前端应用响应于检测到页面切换指令生成的，也可以是前端应用响应于检测页面关闭指令生成的，还可以是前端应用响应于检测到模块关闭指令生成的等等，此处对模块销毁指令的生成方法不作限定。

S550、对销毁模块标识对应的加载共享模块执行销毁操作。

在一个具体实施例中，对销毁模块标识对应的加载共享模块执行销毁操作，包括：获取模块运行器中注册的与销毁模块标识对应的模块销毁回调函数，并通过调用模块销毁回调函数，对销毁模块标识对应的加载共享模块执行销毁操作；和/或，将模块运行器中基于销毁模块标识声明的全局环境对象删除；和/或，将销毁模块标识对应的目标shadowDOM元素和/或关联shadowDOM元素作为目标元素，并将目标元素的innerHTML元素属性设置为空；和/或，获取前端应用的head元素中与销毁模块标识对应的style元素，并将style元素从head元素中删除。

在一个实施例中，具体的，在共享模块提供方提供了模块销毁回调函数的情况下，对销毁模块标识对应的加载共享模块执行销毁操作，包括：获取模块运行器中注册的与销毁模块标识对应的模块销毁回调函数，并通过调用模块销毁回调函数，对销毁模块标识对应的加载共享模块执行销毁操作。

其中，具体的，模块销毁回调函数是共享模块提供方在定义模块编码文件时撰写的共享模块的生命周期函数，模块销毁回调函数表征模块运行器在运行时，销毁前端应用中挂载的共享模块时的回调函数。示例性的，模块销毁回调函数可以为unmount函数。

在另一个实施例中，具体的，在模块运行器中注册有环境隔离模板文件的情况下，对销毁模块标识对应的加载共享模块执行销毁操作，包括：将模块运行器中基于销毁模块标识声明的全局环境对象删除。

在另一个实施例中，具体的，在模块运行器中注册有样式隔离模板文件的情况下，对销毁模块标识对应的加载共享模块执行销毁操作，包括：将销毁模块标识对应的目标shadowDOM元素和/或关联shadowDOM元素作为目标元素，并将目标元素的innerHTML元素属性设置为空。

在另一个实施例中，具体的，在样式隔离模板文件中定义了样式兼容方案的情况下，对销毁模块标识对应的加载共享模块执行销毁操作，包括：获取前端应用的head元素中与销毁模块标识对应的style元素，并将style元素从head元素中删除。

图7为本发明一个实施例所提供的一种加载共享模块的销毁方法的流程图，具体的，响应于检测到前端应用发送的模块销毁指令，获取模块销毁指令中的销毁模块标识，判断模块运行器中是否注册有与销毁模块标识对应的模块销毁回调函数，如果是，则通过调用模块销毁回调函数，对销毁模块标识对应的加载共享模块执行销毁操作，如果否，则继续判断模块运行器中是否注册环境隔离模板文件，如果注册，则将模块运行器中基于销毁模块标识声明的全局环境对象删除，如果未注册，则继续继续判断模块运行器中是否注册样式隔离模板文件。如果未注册样式隔离模板文件，则结束销毁流程，如果注册样式隔离模板文件，则将销毁模块标识对应的目标shadowDOM元素和/或关联shadowDOM元素的innerHTML元素属性设置为空，并继续判断样式隔离模板文件中是否包含样式兼容方案，如果包含，则获取前端应用的head元素中与销毁模块标识对应的style元素，并将style元素从head元素中删除，如果不包含，则结束销毁流程。

需要注意的是，上述4种判断步骤，除了样式隔离模板文件的判断步骤和样式兼容方案的判断步骤之间存在先后顺序外，此处对各判断步骤之间的先后顺序并不作限定。

本实施例的技术方案，通过响应于检测到前端应用发送的模块销毁指令，获取模块销毁指令中的销毁模块标识，对销毁模块标识对应的加载共享模块执行销毁操作，解决了将加载的共享模块从前端应用中销毁的问题，保证了页面加载的完整性。

以下是本发明实施例提供的模块运行器的生成装置的实施例，该装置与上述实施例的模块运行器的生成方法属于同一个发明构思，在模块运行器的生成装置的实施例中未详尽描述的细节内容，可以参考上述实施例中关于模块运行器的生成方法的内容。

图8为本发明一个实施例所提供的一种模块运行器的生成装置的结构示意图。如图8所示，该装置包括：预设模块编码文件获取模块610、预设模块执行文件确定模块620和模块运行器生成模块630。

其中，预设模块编码文件获取模块610，用于获取前端应用采用的至少一个预设共享模块分别对应的预设模块标识，并获取各预设模块标识分别对应的预设模块编码文件；

预设模块执行文件确定模块620，用于对各预设模块编码文件分别执行编译操作，得到至少一个预设模块执行文件；

模块运行器生成模块630，用于基于运行器模板文件、各预设模块标识以及各预设模块标识分别对应的预设模块执行文件，生成模块运行器；

其中，预设模块编码文件表征共享模块提供方针对预设共享模块预先定义的逻辑编码数据，预设模块执行文件表征前端应用可运行的逻辑编码数据，运行器模板文件表征模块运行器在页面加载阶段执行的逻辑编码数据。

本实施例的技术方案，通过获取共享模块提供方针对前端应用采用的预设共享模块预先定义的预设模块编码文件，对预设模块编码文件执行编译操作，得到前端应用可运行的预设模块执行文件，以及基于运行器模板文件、预设模块标识以及预设模块标识对应的预设模块执行文件，生成模块运行器，解决了微前端框架依赖模块架构的问题，独立的模块运行器使得前端应用直接安装并运行本发明实施例提供的模块运行器，即可实现挂载所需的共享模块的目的，无需前端应用的开发者额外编写共享模块的挂载执行逻辑，降低了模块共享的操作复杂度和前端应用挂载共享模块的接入成本，提高了前端应用和共享模块的可维护性。

在上述实施例的基础上，具体的，该装置还包括：

隔离模板文件注册模块，用于将预先定义的环境隔离模板文件和/或样式隔离模板文件注册到模块运行器中；

其中，环境隔离模板文件表征模块运行器在页面加载阶段，对各预设共享模块和前端应用进行环境隔离的逻辑编码数据，样式隔离模板文件表征模块运行器在页面加载阶段，对各预设共享模块和前端应用进行样式隔离的逻辑编码数据。

在上述实施例的基础上，具体的，该装置还包括：

生命周期回调函数注册模块，用于针对每个预设共享模块，获取预设共享模块对应的预设模块执行文件中的JS执行文件；

获取JS执行文件中的生命周期回调函数，并将生命周期回调函数注册到模块运行器中；

其中，生命周期回调函数包括预设共享模块的页面挂载回调函数，或者，生命周期回调函数还包括预设共享模块的初始化回调函数和/或模块销毁回调函数。

在上述实施例的基础上，具体的，模块运行器生成模块630，具体用于：

基于各预设模块标识，将各预设模块执行文件分别部署到部署服务器中；

基于运行器模板文件和接收到的部署服务器发送的模块映射列表，生成模块运行器；其中，模块映射列表表征至少一个预设共享模块分别对应的预设模块执行文件在部署服务器中的部署地址。

本发明实施例所提供的模块运行器的生成装置可执行本发明任意实施例所提供的模块运行器的生成方法，具备执行方法相应的功能模块和有益效果。

以下是本发明实施例提供的页面加载装置的实施例，该装置与上述实施例的页面加载方法属于同一个发明构思，在页面加载装置的实施例中未详尽描述的细节内容，可以参考上述实施例中关于页面加载方法的内容。

图9为本发明一个实施例所提供的一种页面加载装置的结构示意图。如图9所示，该装置包括：加载模块标识获取模块710、加载模块执行文件获取模块720和渲染页面显示模块730。

其中，加载模块标识获取模块710，用于响应于检测到前端应用发送的模块挂载指令，采用模块运行器中的运行器模板文件，获取模块挂载指令中的挂载HTML元素和加载模块标识；

加载模块执行文件获取模块720，用于获取与加载模块标识对应的加载模块执行文件；

渲染页面显示模块730，用于基于挂载HTML元素和加载模块执行文件，执行页面渲染操作，并将得到的渲染页面在可视化界面上进行显示；

其中，模块挂载指令是前端应用响应于页面加载指令生成的，加载模块执行文件表征前端应用可运行的逻辑编码数据，加载模块执行文件是通过对加载模块标识对应的加载共享模块的加载模块编码文件进行编译得到的，加载模块编码文件表征共享模块提供方针对加载共享模块预先定义的逻辑编码数据。

本实施例的技术方案，通过响应于检测到前端应用发送的模块挂载指令，采用模块运行器中的运行器模板文件，获取模块挂载指令中的挂载HTML元素和加载模块标识，获取与加载模块标识对应的加载模块执行文件，基于挂载HTML元素和加载模块执行文件，执行页面渲染操作，并将得到的渲染页面在可视化界面上进行显示，解决了微前端框架依赖模块架构的问题，前端应用通过安装并运行本发明实施例提供的模块运行器，实现了挂载共享模块的目的，无需前端应用的开发者额外编写共享模块的挂载执行逻辑，降低了模块共享的操作复杂度和前端应用挂载共享模块的接入成本，提高了前端应用和共享模块的可维护性。

在上述实施例的基础上，具体的，该装置还包括：

环境隔离模块，用于在基于挂载HTML元素和加载模块执行文件，执行页面渲染操作之前，采用模块运行器中注册的环境隔离模板文件，获取加载模块执行文件中的JS执行文件，并将JS执行文件封装到环境隔离模板文件中的立即执行函数中；

基于加载模块标识，声明与前端应用对应的全局环境对象，并将全局环境对象作为入参传入到立即执行函数中；

其中，环境隔离模板文件用于对加载共享模块和前端应用进行环境隔离。

在上述实施例的基础上，具体的，该装置还包括：

样式隔离模块，用于采用模块运行器中注册的样式隔离模板文件，对挂载HTML元素进行影子DOM化处理，得到目标shadowDOM元素；

将加载模块执行文件中的CSS样式挂载到目标shadowDOM元素中；

在基于加载模块执行文件中的JS执行文件执行页面渲染操作的过程中，获取JS执行文件中的CSS样式创建函数；

将基于CSS样式创建函数创建的CSS样式挂载到目标shadowDOM元素中；

其中，样式隔离模板文件用于对加载共享模块和前端应用进行样式隔离。

在上述实施例的基础上，具体的，该装置还包括：

关联shadowDOM元素挂载模块，用于创建影子DOM化的关联shadowDOM元素，并对目标shadowDOM元素进行监听；

当监听到目标shadowDOM元素中的挂载操作时，将挂载操作对应的CSS样式挂载到关联shadowDOM元素中；

将挂载后的关联shadowDOM元素添加到前端应用的body元素中。

在上述实施例的基础上，具体的，该装置还包括：

style元素创建模块，用于获取目标shadowDOM元素中挂载的至少一个CSS样式；

针对每个CSS样式，在CSS样式存在于全局样式列表的情况下，将CSS样式添加到移除样式列表中；

基于加载模块标识和移除样式列表，创建style元素，并将style元素添加到前端应用的head元素中；

其中，全局样式列表表征前端应用不支持在目标shadowDOM元素中声明的至少一个CSS样式。

在上述实施例的基础上，具体的，该装置还包括：

样式冲突报警操作执行模块，用于获取前端应用对应的页面样式列表中各CSS样式分别对应的页面名称字段；其中，页面样式列表表征前端应用预先定义的至少一个CSS样式；

获取移除样式列表中各CSS样式分别对应的模块名称字段；

在各模块名称字段与各页面名称字段之间存在至少一个相同名称字段的情况下，基于各相同名称字段，执行样式冲突报警操作。

在上述实施例的基础上，具体的，该装置还包括：

加载共享模块销毁模块，用于响应于检测到前端应用发送的模块销毁指令，获取模块销毁指令中的销毁模块标识；

对销毁模块标识对应的加载共享模块执行销毁操作。

在上述实施例的基础上，具体的，加载共享模块销毁模块，具体用于：

获取模块运行器中注册的与销毁模块标识对应的模块销毁回调函数，并通过调用模块销毁回调函数，对销毁模块标识对应的加载共享模块执行销毁操作；和/或，

将模块运行器中基于销毁模块标识声明的全局环境对象删除；和/或，

将销毁模块标识对应的目标shadowDOM元素和/或关联shadowDOM元素作为目标元素，并将目标元素的innerHTML元素属性设置为空；和/或，

获取前端应用的head元素中与销毁模块标识对应的style元素，并将style元素从head元素中删除。

本发明实施例所提供的页面加载装置可执行本发明任意实施例所提供的页面加载方法，具备执行方法相应的功能模块和有益效果。

图10为本发明一个实施例所提供的一种电子设备的结构示意图。电子设备10旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备(如头盔、眼镜、手表等)和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本发明的实现。

如图10所示，电子设备10包括至少一个处理器11，以及与至少一个处理器11通信连接的存储器，如只读存储器(ROM)12、随机访问存储器(RAM)13等，其中，存储器存储有可被至少一个处理器执行的计算机程序，处理器11可以根据存储在只读存储器(ROM)12中的计算机程序或者从存储单元18加载到随机访问存储器(RAM)13中的计算机程序，来执行各种适当的动作和处理。在RAM 13中，还可存储电子设备10操作所需的各种程序和数据。处理器11、ROM 12以及RAM 13通过总线14彼此相连。输入/输出(I/O)接口15也连接至总线14。

电子设备10中的多个部件连接至I/O接口15，包括：输入单元16，例如键盘、鼠标等；输出单元17，例如各种类型的显示器、扬声器等；存储单元18，例如磁盘、光盘等；以及通信单元19，例如网卡、调制解调器、无线通信收发机等。通信单元19允许电子设备10通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据。

处理器11可以是各种具有处理和计算能力的通用和/或专用处理组件。处理器11的一些示例包括但不限于中央处理单元(CPU)、图形处理单元(GPU)、各种专用的人工智能(AI)计算芯片、各种运行机器学习模型算法的处理器、数字信号处理器(DSP)、以及任何适当的处理器、控制器、微控制器等。处理器11执行上文所描述的各个方法和处理，例如上述实施例提供的模块运行器的生成方法和/或页面加载方法。

在一些实施例中，上述实施例提供的模块运行器的生成方法和/或页面加载方法可被实现为计算机程序，其被有形地包含于计算机可读存储介质，例如存储单元18。在一些实施例中，计算机程序的部分或者全部可以经由ROM 12和/或通信单元19而被载入和/或安装到电子设备10上。当计算机程序加载到RAM 13并由处理器11执行时，可以执行上文描述的模块运行器的生成方法和/或页面加载方法中的一个或多个步骤。备选地，在其他实施例中，处理器11可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行模块运行器的生成方法和/或页面加载方法。

本文中以上描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、芯片上系统的系统(SOC)、负载可编程逻辑设备(CPLD)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

用于实施本发明的方法的计算机程序可以采用一个或多个编程语言的任何组合来编写。这些计算机程序可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器，使得计算机程序当由处理器执行时使流程图和/或框图中所规定的功能/操作被实施。计算机程序可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。

在本发明的上下文中，计算机可读存储介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的计算机程序。计算机可读存储介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。备选地，计算机可读存储介质可以是机器可读信号介质。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。

为了提供与用户的交互，可以在电子设备上实施此处描述的系统和技术，该电子设备具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给电子设备。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。

可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)、区块链网络和互联网。

计算系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。服务器可以是云服务器，又称为云计算服务器或云主机，是云计算服务体系中的一项主机产品，以解决了传统物理主机与VPS服务中，存在的管理难度大，业务扩展性弱的缺陷。

应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本发明中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本发明的技术方案所期望的结果，本文在此不进行限制。

上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。