CN113064676A - 基于js入口的前端运行时远程组件共享机制的方法 - Google Patents

Abstract

本发明公开了一种基于JS入口的前端运行时远程组件共享机制的方法，使得前端应用中的各个子应用能够独立开发、独立部署、独立运行，在整个生命周期内保持松耦合关系。其技术方案为：首先通过构造JS立即执行函数方式，将依赖模块作为函数参数的方式来达到依赖模块隔离，避免在主应用中，各个子应用的依赖互相影响。其次，本发明通CSS的AST方式，为每个CSS选择器添加命名空间，达到各个子应用的样式独立，不会冲突。本发明在运行时生成DIV标签，并将DIV ID通知到子应用，子应用获取ID后执行渲染逻辑，将子应用页面挂载到对应DIV中，达到在一个页面中挂载多个相同子应用实例并保持独立的功能。

Description

基于JS入口的前端运行时远程组件共享机制的方法

技术领域

本发明涉及前端应用业务开发技术，具体涉及基于JS入口实现的，将每一项业务作为一个子应用，通过前端运行时远程作为一个组件加载到主应用的技术。

背景技术

随着一个前端应用中承接的业务也越来越多，应用越来越复杂，并且不同业务涉及到不同团队，其技术和管理成本都是巨大的，这些往往会导致一个大型的系统会被拆分细化。但是分拆对于使用这些业务系统的用户来说，例如在金融领域内，业务人员会使用会员管理，套保套利，做市商，投资者教育培训等等业务，系统分拆后办理业务需要在各个网站之间来回切换，使用体验下降。用户对一个统一而友好的集成式网站的需求及其迫切，而一个个业务前端的集成涉及到各个业务团队的沟通配合，架构调整优化等工作。

发明内容

以下给出一个或多个方面的简要概述以提供对这些方面的基本理解。此概述不是所有构想到的方面的详尽综览，并且既非旨在指认出所有方面的关键性或决定性要素亦非试图界定任何或所有方面的范围。其唯一的目的是要以简化形式给出一个或多个方面的一些概念以为稍后给出的更加详细的描述之序。

本发明的目的在于解决上述问题，提供了一种基于JS入口的前端运行时远程组件共享机制的方法，使得前端应用中的各个子应用能够独立开发、独立部署、独立运行，在整个生命周期内保持松耦合关系。

本发明的技术方案为：本发明揭示了一种基于JS入口的前端运行时远程组件共享机制的方法，方法包括构建阶段的处理和运行阶段的处理，其中：

构建阶段的处理包括各子应用在构建阶段生成自身的描述文件和入口文件，入口文件包括JS入口文件和CSS入口文件，将前端应用中的HTML元素编译为JS代码混入JS资源，将前端应用中的CSS资源通过CSS入口文件加载；

运行阶段的处理流程包括：

步骤1：启动主应用和子应用，主应用生成一个全局的EventBus实例；

步骤2：主应用加载子应用的描述文件，获取子应用名称、资源地址、路由信息数据；

步骤3：主应用启动加载模块，其中包括：主应用动态生成一个DIV标签，主应用加载并执行子应用的JS入口文件和CSS入口文件，子应用JS执行时，检查是否存在全局的EventBus实例，若存在则使用该EventBus实例，若不存在则主动生成EventBus实例并作为全局EventBus实例，主应用通过初始化事件将DIV标签的标识号通过事件的方式通知给子应用，其中不同的子应用监听的事件名称不同；

步骤4：子应用监听初始化事件，收到主应用发送的ID的通知后执行渲染逻辑，将JS中的HTML挂载到该ID对应的DIV标签中，以使在一个页面中挂载多个相同子应用实例并保持独立。

根据本发明的基于JS入口的前端运行时远程组件共享机制的方法的一实施例，描述文件用于供主应用在运行阶段访问各子应用的描述文件，通过识别描述文件信息，获取各子应用的入口文件的地址，其中描述文件包含子应用的版本号、子应用名称、资源地址、路由信息在内的数据。

根据本发明的基于JS入口的前端运行时远程组件共享机制的方法的一实施例，入口文件用于当主应用加载子应用时，加载子应用的入口文件并执行入口文件，将子应用挂载到主应用的指定区域。

根据本发明的基于JS入口的前端运行时远程组件共享机制的方法的一实施例，在构建阶段通过webpack打包工具将子应用打包成静态资源，生成JS入口文件、CSS入口文件、描述文件，完成上线部署。

根据本发明的基于JS入口的前端运行时远程组件共享机制的方法的一实施例，在构建阶段的生成入口文件的处理中，通过使用JS立即执行函数的方式对JS代码进行封装，将子应用的依赖模块作为JS立即执行函数的参数，生成JS入口文件，以使不同的子应用的JS只能访问该子应用的依赖模块，避免在主应用中的各个子应用的依赖互相影响。

根据本发明的基于JS入口的前端运行时远程组件共享机制的方法的一实施例，在构建阶段的生成入口文件的处理中，对子应用的CSS文件进行AST解析，将子应用的名称添加到CSS选择器中，生成新的AST，最终将AST转成CSS入口文件。

根据本发明的基于JS入口的前端运行时远程组件共享机制的方法的一实施例，DIV标签的标识号是随机数。

根据本发明的基于JS入口的前端运行时远程组件共享机制的方法的一实施例，方法还包括：

步骤5：当主应用页面切换导致子应用不再需要时，主应用启动卸载子应用流程：一方面，主应用通过事件通知子应用执行卸载，然后子应用收到主应用发出的卸载事件通知后，处理自己的卸载逻辑，完成卸载；另一方面，主应用主动移除子应用CSS资源。

本发明对比现有技术有如下的有益效果：本发明首先通过构造JS(JavaScript)立即执行函数方式，将依赖模块作为函数参数的方式来达到依赖模块隔离，避免在主应用中，各个子应用的依赖互相影响。其次，本发明通过解析层叠样式表(CSS，Cascading StyleSheets)的抽象语法树(AST，Abstract Syntax Tree)的方式，为每个CSS选择器添加命名空间，达到各个子应用的样式独立，不会冲突。最后，本发明在运行时生成DIV标签，并将DIVID通知到子应用，子应用获取ID后执行渲染逻辑，将子应用页面挂载到对应DIV中，可以达到在一个页面中挂载多个相同子应用实例并保持独立的功能。

附图说明

在结合以下附图阅读本公开的实施例的详细描述之后，能够更好地理解本发明的上述特征和优点。在附图中，各组件不一定是按比例绘制，并且具有类似的相关特性或特征的组件可能具有相同或相近的附图标记。

图1示出了本发明的基于JS入口的前端运行时远程组件共享机制的方法的一实施例的流程图。

具体实施方式

以下结合附图和具体实施例对本发明作详细描述。注意，以下结合附图和具体实施例描述的诸方面仅是示例性的，而不应被理解为对本发明的保护范围进行任何限制。

本实施例的基于JS入口的前端运行时远程组件共享机制的方法包括构建阶段的处理和运行阶段的处理两部分。

构建阶段的处理如下：

各个子应用在构建阶段生成该子应用的描述文件和入口文件，其中入口文件包括JS入口和CSS入口文件。主应用在运行阶段访问各个子应用的描述文件，通过识别描述文件信息，获取各个子应用入口文件地址。当主应用需要加载子应用时，加载子应用入口文件并执行，将子应用挂载到主应用的指定区域。

前端应用的基础元素包括HTML，JS，CSS资源。本实施例使用HTML in JS的方式，将HTML元素编译为JS代码混入JS资源。CSS资源一般包括字体文件、图片等元素，导致整个资源文件过大，保留独立的CSS入口文件可以提高加载效率。本实施例在构建阶段依赖webpack打包工具将子应用打包成静态资源，生成JS入口文件、CSS入口文件、描述文件，完成上线部署。

在生成入口文件的处理中，为了保证各个子应用在主应用中互不干扰，需要解决JS和CSS的冲突问题。本实施例在构建阶段解决这种冲突问题，通过使用JS立即执行函数的方式对JS代码进行封装，将子应用的依赖模块作为JS立即执行函数的参数，生成JS入口文件，以使不同的子应用的JS只能访问该子应用的依赖模块，避免在主应用中的各个子应用的依赖互相影响。

在此基础之上，开发中各个业务开发团队可以做到进一步的解耦，可以不用统一某个模块的版本号，按照业务团队的技术栈来开发子应用。不同的子应用之间如果样式互相影响会导致整个显示混乱。本实施例选择在子应用构建阶段对子应用的CSS文件进行AST解析，将子应用的名称添加到CSS选择器中，生成新的AST，最终将AST转成CSS入口文件。由于每个子应用的名称不同，各个子应用能够做到样式独立。

描述文件包含子应用的版本号、子应用名称、资源地址、路由信息在内的数据。

图1示出了本发明的基于JS入口的前端运行时远程组件共享机制的方法的一实施例的在运行阶段的流程。请参见图1，本实施例的方法在运行阶段的实施步骤详述如下。

步骤1：启动主应用和子应用。主应用生成一个全局的EventBus实例。

步骤2：主应用加载子应用的描述文件，获取子应用名称、资源地址、路由信息数据。

步骤3：主应用启动加载模块。

这一步骤的实现进一步包括：

主应用动态生成一个DIV标签，其中DIV标签的ID为一个随机数。

主应用加载并执行子应用的JS、CSS入口文件。子应用JS执行时，检查是否存在全局的EventBus，如果存在则使用该EventBus，若不存在则主动生成EventBus，并作为全局EventBus。

主应用通过初始化事件将DIV标签的ID通过事件的方式通知给子应用，其中不同的子应用监听的事件名称不同。

步骤4：子应用监听初始化事件，收到主应用发送的ID的通知后执行渲染逻辑，将JS中的HTML挂载到该ID对应的DIV标签中，以使在一个页面中挂载多个相同子应用实例并保持独立。

步骤5：当主应用页面切换导致子应用不再需要时，主应用启动卸载子应用流程。

步骤5进一步包括以下并行的两个步骤：

一方面，主应用通过事件通知子应用执行卸载，然后执行步骤6。

另一方面，主应用主动移除子应用CSS资源。

步骤6：子应用收到主应用发出的卸载事件通知后，处理自己的卸载逻辑，完成卸载。

尽管为使解释简单化将上述方法图示并描述为一系列动作，但是应理解并领会，这些方法不受动作的次序所限，因为根据一个或多个实施例，一些动作可按不同次序发生和/或与来自本文中图示和描述或本文中未图示和描述但本领域技术人员可以理解的其他动作并发地发生。

本领域技术人员将进一步领会，结合本文中所公开的实施例来描述的各种解说性逻辑板块、模块、电路、和算法步骤可实现为电子硬件、计算机软件、或这两者的组合。为清楚地解说硬件与软件的这一可互换性，各种解说性组件、框、模块、电路、和步骤在上面是以其功能性的形式作一般化描述的。此类功能性是被实现为硬件还是软件取决于具体应用和施加于整体系统的设计约束。技术人员对于每种特定应用可用不同的方式来实现所描述的功能性，但这样的实现决策不应被解读成导致脱离了本发明的范围。

结合本文所公开的实施例描述的各种解说性逻辑板块、模块、和电路可用通用处理器、数字信号处理器(DSP)、专用集成电路(ASIC)、现场可编程门阵列(FPGA)或其它可编程逻辑器件、分立的门或晶体管逻辑、分立的硬件组件、或其设计成执行本文所描述功能的任何组合来实现或执行。通用处理器可以是微处理器，但在替换方案中，该处理器可以是任何常规的处理器、控制器、微控制器、或状态机。处理器还可以被实现为计算设备的组合，例如DSP与微处理器的组合、多个微处理器、与DSP核心协作的一个或多个微处理器、或任何其他此类配置。

结合本文中公开的实施例描述的方法或算法的步骤可直接在硬件中、在由处理器执行的软件模块中、或在这两者的组合中体现。软件模块可驻留在RAM存储器、闪存、ROM存储器、EPROM存储器、EEPROM存储器、寄存器、硬盘、可移动盘、CD-ROM、或本领域中所知的任何其他形式的存储介质中。示例性存储介质耦合到处理器以使得该处理器能从/向该存储介质读取和写入信息。在替换方案中，存储介质可以被整合到处理器。处理器和存储介质可驻留在ASIC中。ASIC可驻留在用户终端中。在替换方案中，处理器和存储介质可作为分立组件驻留在用户终端中。

在一个或多个示例性实施例中，所描述的功能可在硬件、软件、固件或其任何组合中实现。如果在软件中实现为计算机程序产品，则各功能可以作为一条或更多条指令或代码存储在计算机可读介质上或藉其进行传送。计算机可读介质包括计算机存储介质和通信介质两者，其包括促成计算机程序从一地向另一地转移的任何介质。存储介质可以是能被计算机访问的任何可用介质。作为示例而非限定，这样的计算机可读介质可包括RAM、ROM、EEPROM、CD-ROM或其它光盘存储、磁盘存储或其它磁存储设备、或能被用来携带或存储指令或数据结构形式的合意程序代码且能被计算机访问的任何其它介质。任何连接也被正当地称为计算机可读介质。例如，如果软件是使用同轴电缆、光纤电缆、双绞线、数字订户线(DSL)、或诸如红外、无线电、以及微波之类的无线技术从web网站、服务器、或其它远程源传送而来，则该同轴电缆、光纤电缆、双绞线、DSL、或诸如红外、无线电、以及微波之类的无线技术就被包括在介质的定义之中。如本文中所使用的盘(disk)和碟(disc)包括压缩碟(CD)、激光碟、光碟、数字多用碟(DVD)、软盘和蓝光碟，其中盘(disk)往往以磁的方式再现数据，而碟(disc)用激光以光学方式再现数据。上述的组合也应被包括在计算机可读介质的范围内。

提供对本公开的先前描述是为使得本领域任何技术人员皆能够制作或使用本公开。对本公开的各种修改对本领域技术人员来说都将是显而易见的，且本文中所定义的普适原理可被应用到其他变体而不会脱离本公开的精神或范围。由此，本公开并非旨在被限定于本文中所描述的示例和设计，而是应被授予与本文中所公开的原理和新颖性特征相一致的最广范围。

Claims (8)

1.一种基于JS入口的前端运行时远程组件共享机制的方法，其特征在于，方法包括构建阶段的处理和运行阶段的处理，其中：

构建阶段的处理包括各子应用在构建阶段生成自身的描述文件和入口文件，入口文件包括JS入口文件和CSS入口文件，将前端应用中的HTML元素编译为JS代码混入JS资源，将前端应用中的CSS资源通过CSS入口文件加载；

运行阶段的处理流程包括：

步骤1：启动主应用和子应用，主应用生成一个全局的EventBus实例；

步骤2：主应用加载子应用的描述文件，获取子应用名称、资源地址、路由信息数据；

步骤3：主应用启动加载模块，其中包括：主应用动态生成一个DIV标签，主应用加载并执行子应用的JS入口文件和CSS入口文件，子应用JS执行时，检查是否存在全局的EventBus实例，若存在则使用该EventBus实例，若不存在则主动生成EventBus实例并作为全局EventBus实例，主应用通过初始化事件将DIV标签的标识号通过事件的方式通知给子应用，其中不同的子应用监听的事件名称不同；

步骤4：子应用监听初始化事件，收到主应用发送的ID的通知后执行渲染逻辑，将JS中的HTML挂载到该ID对应的DIV标签中，以使在一个页面中挂载多个相同子应用实例并保持独立。

2.根据权利要求1所述的基于JS入口的前端运行时远程组件共享机制的方法，其特征在于，描述文件用于供主应用在运行阶段访问各子应用的描述文件，通过识别描述文件信息，获取各子应用的入口文件的地址，其中描述文件包含子应用的版本号、子应用名称、资源地址、路由信息在内的数据。

3.根据权利要求1所述的基于JS入口的前端运行时远程组件共享机制的方法，其特征在于，入口文件用于当主应用加载子应用时，加载子应用的入口文件并执行入口文件，将子应用挂载到主应用的指定区域。

4.根据权利要求1所述的基于JS入口的前端运行时远程组件共享机制的方法，其特征在于，在构建阶段通过webpack打包工具将子应用打包成静态资源，生成JS入口文件、CSS入口文件、描述文件，完成上线部署。

5.根据权利要求1所述的基于JS入口的前端运行时远程组件共享机制的方法，其特征在于，在构建阶段的生成入口文件的处理中，通过使用JS立即执行函数的方式对JS代码进行封装，将子应用的依赖模块作为JS立即执行函数的参数，生成JS入口文件，以使不同的子应用的JS只能访问该子应用的依赖模块，避免在主应用中的各个子应用的依赖互相影响。

6.根据权利要求1所述的基于JS入口的前端运行时远程组件共享机制的方法，其特征在于，在构建阶段的生成入口文件的处理中，对子应用的CSS文件进行AST解析，将子应用的名称添加到CSS选择器中，生成新的AST，最终将AST转成CSS入口文件。

7.根据权利要求1所述的基于JS入口的前端运行时远程组件共享机制的方法，其特征在于，DIV标签的标识号是随机数。

8.根据权利要求1所述的基于JS入口的前端运行时远程组件共享机制的方法，其特征在于，方法还包括：

步骤5：当主应用页面切换导致子应用不再需要时，主应用启动卸载子应用流程：一方面，主应用通过事件通知子应用执行卸载，然后子应用收到主应用发出的卸载事件通知后，处理自己的卸载逻辑，完成卸载；另一方面，主应用主动移除子应用CSS资源。

Images