基于微前端的数据处理方法及框架技术

本申请公开了一种基于微前端的数据处理方法和框架，该方法通过微前端的数据处理框架实现，该方法包括：应用配置中心接收各子应用的定制信息，并将各子应用的定制信息发送至微前端主工程模块；微前端主工程模块根据各子应用的定制信息生成各子应用的加载菜单和初始化文件；根据各子应用的加载菜单加载对应的微前端子工程模块；并将各子应用初始化文件发送至各子工程对应的微前端子工程模块；微前端子工程模块根据接收的初始化文件发布各子应用，以使微前端主工程模块对所述各子应用进行标准化，实现主应用的发布。该方法在前端开发的全流程上实现了各个前端子工程的独立开发，独立测试，独立部署；极大程度上降低了主应用以及各子应用之间的耦合。

【技术实现步骤摘要】
基于微前端的数据处理方法及框架
本申请涉及数据处理
，具体涉及一种基于微前端的数据处理方法及框架。
技术介绍
现代企业在数字化转型上加速进行，企业的软件工程体量越来越大，软件开发过程中前后端分离，后端的微服务化已经有行业较成熟的解决方案；前端工程采用VUE/REACT/AngularJS三个框架其一来构建单页应用是行业中的常规开发模式；随着业务的发展，一个前端工程包含了上百甚至更多的个业务模块，前端单页应用已成为一个单页巨石应用。传统的前端开发技术面临着如下的技术问题：巨石前端工程体量巨大，运维实施编译发布时间长，哪怕是一个文案的改动也需要整个工程重新编译，发布几个小时；每次发布都需要将前端单一工程编译增加发布(release)分支，一个前端工程里包含了十几个项目，几乎每天都会有项目发布，发布分支冗余，常出现发布分支不对造成的错发漏发；代码耦合度高，通过分支管控，每个项目都会有十几个研发分支，十几个项目在一个工程每天会有分支冲突解决，需要大量时间成本，研发效率越来越低；一个前端工程里有成千上百个页面，页面跳转路由由一个文件集中管理，页面路由的身份表示号(ID)冲突，命名空间冲突，权限冲突等，管控复杂度高；单页前端工程所有业务逻辑都在一起，采用逻辑隔离，共有和私有组件边界不清晰，各个团队维护的代码冗余且容易污染全局。在这种情况下，基于微服务架构的微前端开发技术应运而生，微服务是面向服务架构(SOA)的一种变体，把应用程序设计成一系列松耦合的细粒度服务，并通过轻量级的通信协议组织起来具体地，将应用构建成一组小型服务。这些服务都能够独立部署、独立扩展，每个服务都具有稳固的模块边界，甚至允许使用不同的编程语言来编写不同服务，也可以由不同的团队来管理。越来越重的前端工程也面临同样的问题，自然地想到了将微服务思想应用到前端开发，于是有了微前端(micro-frontends)的概念：微前端是一种由独立交付的多个前端应用组成整体的架构风格。具体的，将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的小块，而在用户看来仍然是内聚的单个产品。目前行业中常用的微前端解决方案有Iframe(中文暂无统一名称)、webcomponent(中文暂无统一名称)和路由分发等等方式。其中，Iframe在使用过程中，解决了以上问题同时，也会带来新的问题，如不同微前端之间隔离后，层叠样式表(CascadingStyleSheets，CSS)，JavaScript(中文暂无统一名称)无法共用，在不同微前端工程中要重复开发；不同微前端工程不同源，Cookie(中文暂无统一名称)无法共用；不同微前端将页面切分，无法实现绝对居中定位，隔离的系统加载状态不同，会出现较长时间白屏体验较差等等问题；webcomponent微前端弱隔离方案，是采用组件化来实现，但这种方案需要对已有系统采用整体重构，也会造成重复工作，对已有功能的大量复写。因此，兹待一种新的处理方法来解决单体应用的弊端同时，改善以上列举的传统微前端出现的种种问题。需要说明的是，这里的陈述仅提供与本申请有关的背景信息，而不必然地构成现有技术。
技术实现思路
鉴于上述问题，提出了本申请以便提供一种克服上述问题或者至少部分地解决上述问题的基于微前端的数据处理方法及框架。根据本申请的一方面，提供了一种基于微前端的数据处理方法，所述方法是通过微前端的数据处理框架实现的，所述微前端的数据处理框架包括应用配置中心、微前端主工程模块和至少一个微前端子工程模块，所述应用配置中心通讯连接所述微前端主工程模块，所述微前端主工程模块通讯连接所述微前端子工程模块；所述方法包括：所述应用配置中心接收各子应用的定制信息，并将所述各子应用的定制信息发送至所述微前端主工程模块；所述微前端主工程模块根据所述各子应用的定制信息生成所述各子应用的加载菜单和初始化文件；根据各子应用的加载菜单加载各子应用对应的微前端子工程模块；并将各子应用初始化文件发送至各子工程对应的微前端子工程模块；所述微前端子工程模块根据接收的初始化文件发布各子应用，以使所述微前端主工程模块对所述各子应用进行标准化，实现主应用的发布，其中，所述主应用与所述各子应用是同源的。可选的，在上述的数据处理方法中，所述定制信息包括：应用信息、菜单信息、权限配置信息。可选的，在上述的数据处理方法中，所述主应用与各所述子应用以及各所述子应用之间通过Iframe沙箱技术实现Javascript隔离和CascadingStyleSheets隔离。可选的，在上述的数据处理方法中，所述根据各子应用的加载菜单加载各子应用对应的微前端子工程模块包括：根据所述各子应用的加载菜单中的postMessage确定组成主应用的各子应用，根据所述组成主应用的各子应用确定所述各子应用对应的微前端子工程模块；加载所述各子应用对应的微前端子工程模块；所述微前端主工程模块还包括：加载主工程共享组件，其中，所述主工程共享组件包括常用开源依赖组件和公共共享依赖组件，所述公共共享依赖组件包括渲染组件和开发编译组件。可选的，在上述的数据处理方法中，所述微前端子工程模块根据接收的初始化文件发布各子应用包括：根据所述初始化文件调用所述微前端主工程模块的主工程共享组件以完成各子应用的开发；将开发形成的各子应用中的主工程共享组件剔除后，将所述各子应用打包后，与各子应用的页面加载生命周期对应发送至所述微前端主工程模块。可选的，在上述的数据处理方法中，所述微前端主工程模块对所述各子应用进行标准化，实现主应用的发布包括：调用工程标准化模块对所述各子应用的语言、样式、权限进行标准化，将标准化后的各子应用组合在一起形成主应用，并将所述主应用发布；可选的，在上述的数据处理方法中，所述主应用与所述各子应用的编译是基于Node.js技术实现的。根据本申请的第二方面，提供了一种基于微前端的数据处理框架，该框架包括：应用配置中心、微前端主工程模块和至少一个微前端子工程模块，所述应用配置中心通讯连接所述微前端主工程模块，所述微前端主工程模块通讯连接所述微前端子工程模块；所述应用配置中心，用于接收各子应用的定制信息，并将所述各子应用的定制信息发送至所述微前端主工程模块；所述微前端主工程模块，用于根据所述各子应用的定制信息生成所述各子应用的加载菜单和初始化文件；根据各子应用的加载菜单加载各子应用对应的微前端子工程模块；并将各子应用初始化文件发送至各子工程对应的微前端子工程模块；所述微前端子工程模块，用于根据接收的初始化文件发布各子应用，以使所述微前端主工程模块对所述各子应用进行标准化，以实现主应用的发布。可选的，在上述的数据处理框架中，所述微前端主工程模块包括路由分发单元和主工程基础前端单元，其中所述主工程基础前端单元包括应用管理及加载单元、公共通讯单元、工程标准化单元；所述路由分发单元分别通讯连接所述应用配置中心和所述应用管理及加载单元，用于接本文档来自技高网...

【技术保护点】
1.一种基于微前端的数据处理方法，其特征在于，所述方法是通过微前端的数据处理框架实现的，所述微前端的数据处理框架包括应用配置中心、微前端主工程模块和至少一个微前端子工程模块，所述应用配置中心通讯连接所述微前端主工程模块，所述微前端主工程模块通讯连接所述微前端子工程模块；所述方法包括：/n所述应用配置中心接收各子应用的定制信息，并将所述各子应用的定制信息发送至所述微前端主工程模块；/n所述微前端主工程模块根据所述各子应用的定制信息生成所述各子应用的加载菜单和初始化文件；根据各子应用的加载菜单加载各子应用对应的微前端子工程模块；并将各子应用初始化文件发送至各子工程对应的微前端子工程模块；/n所述微前端子工程模块根据接收的初始化文件发布各子应用，以使所述微前端主工程模块对所述各子应用进行标准化，实现主应用的发布，其中，所述主应用与所述各子应用是同源的。/n

【技术特征摘要】
1.一种基于微前端的数据处理方法，其特征在于，所述方法是通过微前端的数据处理框架实现的，所述微前端的数据处理框架包括应用配置中心、微前端主工程模块和至少一个微前端子工程模块，所述应用配置中心通讯连接所述微前端主工程模块，所述微前端主工程模块通讯连接所述微前端子工程模块；所述方法包括：
所述应用配置中心接收各子应用的定制信息，并将所述各子应用的定制信息发送至所述微前端主工程模块；
所述微前端主工程模块根据所述各子应用的定制信息生成所述各子应用的加载菜单和初始化文件；根据各子应用的加载菜单加载各子应用对应的微前端子工程模块；并将各子应用初始化文件发送至各子工程对应的微前端子工程模块；
所述微前端子工程模块根据接收的初始化文件发布各子应用，以使所述微前端主工程模块对所述各子应用进行标准化，实现主应用的发布，其中，所述主应用与所述各子应用是同源的。


2.根据权利要求1所述的数据处理方法，其特征在于，所述定制信息包括：应用信息、菜单信息、权限配置信息。


3.根据权利要求1所述的数据处理方法，其特征在于，所述主应用与各所述子应用以及各所述子应用之间通过Iframe沙箱技术实现Javascript隔离和CascadingStyleSheets隔离。


4.根据权利要求1所述的数据处理方法，其特征在于，所述根据各子应用的加载菜单加载各子应用对应的微前端子工程模块包括：
根据所述各子应用的加载菜单中的postMessage确定组成主应用的各子应用，根据所述组成主应用的各子应用确定所述各子应用对应的微前端子工程模块；
加载所述各子应用对应的微前端子工程模块；
所述微前端主工程模块还包括：
加载主工程共享组件，其中，所述主工程共享组件包括常用开源依赖组件和公共共享依赖组件，所述公共共享依赖组件包括渲染组件和开发编译组件。


5.根据权利要求1所述的数据处理方法，其特征在于，所述微前端子工程模块根据接收的初始化文件发布各子应用包括：
根据所述初始化文件调用所述微前端主工程模块的主工程共享组件以完成各子应用的开发；
将开发形成的各子应用中的主工程共享组件剔除后，将所述各子应用打包后，与各子应用的页面加载生命周期对应发送至所述微前端主工程模块。


6.根据权利要求1所述的数据处理方法，其...

【专利技术属性】
技术研发人员：王炜，
申请(专利权)人：薪得付信息技术上海有限公司，
类型：发明
国别省市：上海;31