微前端系统、子应用加载方法及计算机可读存储介质技术方案

本申请实施例提供一种微前端系统、子应用加载方法及计算机可读存储介质，该微前端系统包括：路由注册服务、命令行工具和微前端运行框架，其中，所述路由注册服务，为独立维护运行的node后端服务，用于为所述主应用的微前端运行框架提供子应用的路由信息、加载模式和子应用的部署信息；所述命令行工具，用于通过命令行提供新建子应用、接入子应用、服务注册功能；所述微前端运行框架，为运行在主应用的框架，用于基于获取到的网络请求加载并运行子应用，并能够提供多框架下的子应用运行能力。本申请提供的微前端系统具有较好的扩容和容灾能力，并且还具有多框架子应用运行能力。并且还具有多框架子应用运行能力。并且还具有多框架子应用运行能力。

【技术实现步骤摘要】
微前端系统、子应用加载方法及计算机可读存储介质


[0001]本申请实施例涉及互联网
，涉及但不限于一种微前端系统、子应用加载方法及计算机可读存储介质。

技术介绍

[0002]目前，在进行前端开发的过程中，开发工程越来越庞大，并且产品功能复杂，代码冲突频繁，影响面巨大。针对这一系列的问题，微前端应运而生。微前端借鉴后端微服务的概念，将一个巨大的前端工程拆分成一个个的小工程，这些小工程完全具备独立开发、运行能力。整个系统由这些小工程协同合作，实现所有页面的展示与交互。
[0003]现有的微前端框架路由服务使用nginx服务转发，效率低下，容灾处理方案复杂且维护成本高，或者通信手段单一，应用过多后事件难以管理。

技术实现思路

[0004]本申请实施例提供一种微前端系统、子应用加载方法及计算机可读存储介质，通过可独立维护运行的node服务，提供很好的扩容，容灾能力，并提供多框架子应用能力。
[0005]本申请实施例的技术方案是这样实现的：
[0006]本申请实施例提供一种微前端系统，包括：
[0007]路由注册服务、命令行工具和微前端运行框架，其中，
[0008]所述路由注册服务，为独立维护运行的node后端服务，用于为所述主应用的微前端运行框架提供子应用的路由信息、加载方式和子应用的部署信息；
[0009]所述命令行工具，用于通过命令行提供新建子应用、接入子应用、服务注册功能；
[0010]所述微前端运行框架，为运行在主应用的框架，用于基于获取到的网络请求加载并运行子应用，并能够提供多框架下的子应用运行能力。
[0011]在一些实施例中，所述微前端运行框架还包括：数据管理模块、性能监控模块、错误处理模块，其中：
[0012]所述数据管理模块，用于通过props传输机制提供的数据，实现数据双向绑定功能；
[0013]所述性能监控模块，用于监控子应用的加载时长、运行时长；
[0014]所述错误处理模块，用于监控并处理子应用在加载和运行过程中的错误信息。
[0015]本申请实施例提供一种子应用加载方法，应用于微前端系统，所述方法包括：
[0016]获取用于访问子应用的网络访问请求，所述网络访问请求中携带有所述子应用的URL地址；
[0017]基于所述子应用的URL地址从所述微前端系统的路由注册服务拉取所述子应用对应的路由信息；
[0018]所述微前端系统的子应用加载模块基于所述路由信息，向路由注册服务查询所述路由信息对应的子应用资源；
[0019]当需要加载所述子应用资源时，所述子应用加载模块加载所述子应用资源；
[0020]所述微前端系统的子应用运行模块运行所述子应用资源，以渲染出所述子应用的页面。
[0021]在一些实施例中，该方法还包括：
[0022]确定所述子应用资源是否被预加载或者被打开；
[0023]当所述子应用资源没有被预加载并且没有被打开时，确定所述子应用资源需要被加载。
[0024]在一些实施例中，所述当需要加载所述子应用资源时，所述子应用加载资源加载所述子应用资源，包括：
[0025]当需要加载所述子应用资源时，获取所述子应用的框架标识和资源加载类型；
[0026]根据所述资源加载类型，在所述框架标识对应的子应用框架中加载所述子应用资源。
[0027]本申请实施例提供一种计算机可读存储介质，存储有可执行指令，用于引起处理器执行时，实现上述的方法。
[0028]本申请实施例具有以下有益效果：
[0029]在本申请实施例提供的微前端系统，包括路由注册服务、命令行工具和微前端运行框架，其中，所述路由注册服务，为独立维护运行的node后端服务，如此能够提供很好的扩容和容灾能力，该路由注册服务为所述主应用的微前端运行框架提供子应用的路由信息、加载方式和子应用的部署信息；命令行工具，用于通过命令行提供新建子应用、接入子应用、服务注册功能；微前端运行框架，为运行在主应用的框架，用于基于获取到的网络请求加载并运行子应用，并能够提供多框架下的子应用运行能力。
附图说明
[0030]图1为本申请实施例提供的微前端系统的组成结构示意图；
[0031]图2为本申请实施例提供的微前端系统的另一种组成结构示意图；
[0032]图3为本申请实施例提供的基于微前端的子应用加载方法的实现流程示意图；
[0033]图4为本申请实施例提供的基于微前端的子应用加载方法的另一种实现流程示意图；
[0034]图5为本申请实施例提供的基于微前端的子应用加载方法的实现流程示意图；
[0035]图6为本申请实施例提供的微前端系统架构示意图；
[0036]图7为本申请实施例提供的微前端系统中通信机制的示意图；
[0037]图8为本申请实施例提供的子应用加载模块加载子应用资源的实现流程示意图；
[0038]图9为本申请实施例提供的JS沙箱的设计示意图。
具体实施方式
[0039]为了使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请作进一步地详细描述，所描述的实施例不应视为对本申请的限制，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本申请保护的范围。
[0040]在以下的描述中，涉及到“一些实施例”，其描述了所有可能实施例的子集，但是可
以理解，“一些实施例”可以是所有可能实施例的相同子集或不同子集，并且可以在不冲突的情况下相互结合。除非另有定义，本申请实施例所使用的所有的技术和科学术语与属于本申请实施例的
的技术人员通常理解的含义相同。本申请实施例所使用的术语只是为了描述本申请实施例的目的，不是旨在限制本申请。
[0041]本申请实施例提供一种微前端系统架构，该系统架构提供应用加载器模块用于加载各个不同框架的前端应用，如vue、react等；实现JavaScript沙盒机制，保证js环境隔离；该系统架构还提供子应用web worker的跨域处理，通过子应用打包注入css前缀、子应用运行时注入css前缀、子应用shadow dom方式加载等方式实现css隔离，提供包括props传递、custom event、postmessage在内的三种父子应用通信机制，提供一个路由注册服务，提供中心化的路由发现能力，且兼容支持原始iframe下的运行。
[0042]下面说明本申请实施例提供的微前端系统的示例性应用，图1为本申请实施例提供的微前端系统的组成结构示意图，如图1所示，该微前端系统100包括：路由注册服务101、命令行工具102和微前端运行框架103，其中，
[0043]所述路由注册服务101，为独立维护运行的node后端服务，用于为所述主应用的微前端运行框架提供子应用的路由信息、加载方式和子应用的部署信息。
[0044]这里，路由注册服务可以是一个提供http服务的服务器，在实际实本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种微前端系统，其特征在于，包括：路由注册服务、命令行工具和微前端运行框架，其中，所述路由注册服务，为独立维护运行的node后端服务，用于为所述主应用的微前端运行框架提供子应用的路由信息、加载方式和子应用的部署信息；所述命令行工具，用于通过命令行提供新建子应用、接入子应用、服务注册功能；所述微前端运行框架，为运行在主应用的框架，用于基于获取到的网络请求加载并运行子应用，并能够提供多框架下的子应用运行能力。2.根据权利要求1中所述的微前端系统，其特征在于，所述微前端系统架构还包括：与所述路由注册服务对应的前端界面，通过所述前端界面获取针对子应用注册需要设置的子应用注册信息，并将所述子应用注册信息发送至路由注册服务；所述子应用注册信息至少包括：子应用框架、子应用路由模式、子应用加载模式；所述路由注册服务，用于接收所述子应用注册信息，并基于所述子应用注册信息注册所述子应用。3.根据权利要求1中所述的微前端系统，其特征在于，所述命令行工具用于接收新建子应用命令，获取子应用的路由信息、资源信息和子应用模板信息；所述命令行工具基于所述子应用模板信息生成子应用模板，并向路由注册服务发送子应用新建请求，所述子应用新建请求中携带有所述路由信息和资源信息；所述命令行工具向部署服务器发送子应用部署请求，以使得所述部署服务器基于所述部署请求中的子应用资源地址进行资源部署。4.根据权利要求2中所述的微前端系统，其特征在于，所述命令行工具用于接收接入子应用命令，获取子应用的路由信息和资源信息；所述命令行工具，还用于向路由注册服务发送子应用接入请求，所述子应用接入请求中携带有所述子应用的路由信息和资源信息；所述路由注册服务，还用于接收所述子应用接入请求，并基于所述子应用的路由信息和资源信息进行子应用注册。5.根据权利要求1所述的微前端系统，其特征在于，所述微前端运行框架至少包括：基础功能库模块、通信模块、统一路由模块、子应用加载模块和子应用运行模块，其中：所述基础功能库模块，用于提供公共方法和公共组件，以通过全局变量和函数的方式注入到子应用，供子应用使用；所述通信模块，用于支持父应用到子应用、子应用到子应用和子应用到父应用的通信机制；所述统一路由模块，用于监听浏览器路由变更；所述子应用加载模块，用于基于从路由注册服务获取到的子应用资源地址，获取并加载所述子应用资源地址对应的资源；所述子应用运行模块，用于运行所述子应用资源地址对应的资源，以渲染出子应用页面。6.根据权利要求5中所述的微前端系统，其特征在于，所述父应用到子应用的通信机制包括props传输和custom event传输，所述子应用到子应用的通信机制包括Postmessage传输，所述子应用到父应用的通信机制包括custom ev ent传输；
所述子...

【专利技术属性】
技术研发人员：陈思名，罗亮之，陈江松，蒋鹏，
申请(专利权)人：腾讯科技深圳有限公司，
类型：发明
国别省市：