CN114327688B - 基于微前端的数据处理方法、框架、存储介质及终端设备 - Google Patents
基于微前端的数据处理方法、框架、存储介质及终端设备 Download PDFInfo
- Publication number
- CN114327688B CN114327688B CN202210249919.9A CN202210249919A CN114327688B CN 114327688 B CN114327688 B CN 114327688B CN 202210249919 A CN202210249919 A CN 202210249919A CN 114327688 B CN114327688 B CN 114327688B
- Authority
- CN
- China
- Prior art keywords
- sub
- file
- application
- style
- micro front
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Landscapes
- Stored Programmes (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本申请实施例提供一种基于微前端的数据处理方法、框架、存储介质及终端设备，该方法包括：接收各子应用的定制信息，并将各子应用的定制信息发送至微前端主工程模块，根据定制信息生成各子应用对应的加载菜单和初始化文件；根据加载菜单加载各子应用对应的微前端子工程模块；将初始化文件发送至微前端子工程模块，根据初始化文件生成各子应用对应的主入口文件，数据状态集文件和内部样式文件，完成各子应用的部署操作。本申请实施例通过在整合多种前端技术栈的微前端子工程模块，并基于同一模块架构构建而成，使得多技术栈开发人员可以共同服务于同一个微前端平台业务系统，极大的提高了业务平台系统的技术兼容性。
Description
技术领域
本申请涉及电子通信技术领域，尤其涉及一种基于微前端的数据处理技术领域，特别涉及一种基于微前端的数据处理方法、框架、存储介质及终端设备。
背景技术
现代企业在数字化转型上加速进行，企业的软件工程体量越来越大，软件开发过程中前后端分离，后端的微服务化已经有行业较成熟的解决方案；前端工程采用React，Vue，Angular三个框架其一来构建单页应用是行业中的常规开发模式。随着业务的发展，一个前端工程包含了上百甚至更多的个业务模块，前端单页应用已成为一个单页巨石应用。传统的前端开发技术面临着如下的技术问题：
巨石前端工程体量巨大，运维实施编译发布时间长，哪怕是一个文案的改动也需要整个工程重新编译，发布几个小时；每次发布都需要将前端单一工程编译增加发布分支，一个前端工程里包含了十几个项目，几乎每天都会有项目发布，发布分支冗余，常出现发布分支不对造成的错发漏发；代码耦合度高，通过分支管控，每个项目都会有十几个研发分支，十几个项目在一个工程每天会有分支冲突解决，需要大量时间成本，研发效率越来越低；一个前端工程里有成千上百个页面，页面跳转路由由一个文件集中管理，页面路由的身份表示号(ID)冲突，命名空间冲突，权限冲突等，管控复杂度高；单页前端工程所有业务逻辑都在一起，采用逻辑隔离，共有和私有组件边界不清晰，各个团队维护的代码冗余且容易污染全局。
在这种情况下，基于微服务架构的微前端开发技术应运而生，微前端是一种由独立交付的多个前端应用组成整体的架构风格。具体的，通过将前端应用分解成一些更小、更简单的模块，并且各个模块均能够独立开发，测试跟部署，而在用户看来仍然是内聚的单个产品。
目前行业中常用的微前端解决方案有Iframe和路由分发等方式。其中，Iframe在使用过程中，解决了以上问题同时，也会带来新的问题，如不同微前端之间隔离后，层叠样式表(CascadingStyle Sheets，CSS)，JavaScript无法共用，在不同微前端工程中要重复开发；不同微前端工程不同源，ookie无法共用等问题。
发明内容
本申请实施例提供一种基于微前端的数据处理方法、框架、存储介质及终端设备，通过统一不同技术栈前端项目的架构和关键输出，解决了在一个系统中多技术栈实现的子应用不能共存的技术问题。
本申请实施例一方面提供了一种基于微前端的数据处理方法，所述方法基于微前端的数据处理框架实现，所述微前端的数据处理框架包括：微前端主工程模块和至少两个不同类别的微前端子工程模块，所述至少两个不同类别的微前端子工程模块基于同一预设的模块架构构建而成，通过所述模块架构构建的微前端子工程模块能够生成主入口文件，数据状态集文件和内部样式文件；
所述方法包括：
接收各子应用的定制信息，并将所述各子应用的定制信息发送至所述微前端主工程模块，根据所述定制信息生成所述各子应用对应的加载菜单和初始化文件；
根据所述加载菜单加载所述各子应用对应的微前端子工程模块；
将所述初始化文件发送至所述微前端子工程模块，根据所述初始化文件生成各子应用对应的主入口文件，数据状态集文件和内部样式文件，完成各子应用的部署操作。
在本申请实施例所述的基于微前端的数据处理方法中，所述模块架构包括：
业务模块定义单元，用于定义生成对应不同功能的业务模块；
内部样式定义单元，用于定义所述业务模块的内部样式，并生成对应不同业务模块的内部样式文件；
数据状态定义单元，用于定义所述业务模块在不同节点的状态，并生成对应不同业务模块的数据状态文件；
主入口文件生成单元，用于定义生成不同业务模块的主入口文件。
在本申请实施例所述的基于微前端的数据处理方法中，所述内部样式文件包括CSS文件，所述方法还包括：
分别定义JS文件和CSS文件的生命周期，所述生命周期至少包括加载事件与卸载事件，所述加载事件用于加载展示所述JS文件或CSS文件，所述卸载事件用于关闭停用所述JS文件或CSS文件。
在本申请实施例所述的基于微前端的数据处理方法中，所述微前端主工程模块包括路由分发单元、第三方依赖映射配置单元、子应用入口路径配置单元、样式管理中心、消息分发中心及主工程基础前端单元；
所述路由分发单元用于接收各子应用的定制信息，并将所述各子应用的定制信息发送至所述主工程基础前端单元；
所述第三方依赖映射配置单元用于配置系统所使用到的第三方依赖库文件地址及对应别名的映射，以及在不同运行环境下的依赖集合切换；
所述子应用入口路径配置单元用于配置各子应用在不同运行环境下的主入口文件和数据集文件的资源路径，以及各子应用的下的所有模块相关信息；
所述样式管理中心用于配置系统相关内部样式和各子应用所依赖的第三方组件库样式，并在系统运行时控制样式版本切换；
所述消息分发中心用于构建全局事件分发器，用于集合各子应用数据和数据修改时间的统一分发；
所述主工程基础前端单元用于根据各子应用的定制信息生成所述各子应用对应的加载菜单和初始化文件。
在本申请实施例所述的基于微前端的数据处理方法中，所述方法还包括：
将所述主入口文件的路由表中配置的子应用进行注册，基于各子应用的数据状态文件的路径获取store对象；
在所述全局事件分发器中对各子应用的store对象进行注册；
将携带对应所述store对象和全局事件分发器的自定义属性传入对应的子应用，实现各子应用之间的状态分享和事件分发。
在本申请实施例所述的基于微前端的数据处理方法中，所述在所述全局事件分发器中对各子应用的store对象进行注册，包括：
通过registerStore函数对每个子应用的store对象进行注册并存储在stores对象中作为数据状态聚合树；
通过getTargetDispatch函数获取子应用的数据状态集合和数据修改方法，用于子应用间的消息分发；
通过getTargetState函数获取子应用的数据状态树，用于子应用间的状态共享。
在本申请实施例所述的基于微前端的数据处理方法中，所述方法还包括：
预加载所述第三方依赖库中的所有第三方样式文件，将所述所有第三方样式文件设置为未激活状态；
当确定好所述子应用待调用的指定样式文件时，从所述处于未激活状态的所有第三方样式文件中单独激活所述指定样式文件；
根据处于激活状态的所述指定样式文件对子应用进行样式渲染操作。
相应的，本申请实施例另一方面还提供了一种数据处理框架，其特征在于，包括：
微前端主工程模块和至少两个不同类别的微前端子工程模块，所述至少两个不同类别的微前端子工程模块基于同一预设的模块架构构建而成，通过所述模块架构构建的微前端子工程模块能够生成主入口文件，数据状态集文件和内部样式文件；
所述数据处理框架用于执行以下方法：
接收各子应用的定制信息，并将所述各子应用的定制信息发送至所述微前端主工程模块，根据所述定制信息生成所述各子应用对应的加载菜单和初始化文件；
根据所述加载菜单加载所述各子应用对应的微前端子工程模块；
将所述初始化文件发送至所述微前端子工程模块，根据所述初始化文件生成各子应用对应的主入口文件，数据状态集文件和内部样式文件，完成各子应用的部署操作。
相应的，本申请实施例另一方面还提供了一种存储介质，所述存储介质存储有多条指令，所述指令适于处理器进行加载，以执行如上所述的基于微前端的数据处理方法。
相应的，本申请实施例另一方面还提供了一种终端设备，包括处理器和存储器，所述存储器存储有多条指令，所述处理器加载所述指令以执行如上所述的基于微前端的数据处理方法。
本申请实施例提供了一种基于微前端的数据处理方法、框架、存储介质及终端设备，该方法基于微前端的数据处理框架实现，所述微前端的数据处理框架包括：微前端主工程模块和至少两个不同类别的微前端子工程模块，至少两个不同类别的微前端子工程模块基于同一预设的模块架构构建而成，通过模块架构构建的微前端子工程模块能够生成主入口文件，数据状态集文件和内部样式文件；方法包括：接收各子应用的定制信息，并将各子应用的定制信息发送至微前端主工程模块，根据定制信息生成各子应用对应的加载菜单和初始化文件；根据加载菜单加载各子应用对应的微前端子工程模块；将初始化文件发送至微前端子工程模块，根据初始化文件生成各子应用对应的主入口文件，数据状态集文件和内部样式文件，完成各子应用的部署操作。本申请实施例通过在技术层面整合了多种前端技术栈的微前端子工程模块，通过将多种微前端子工程模块基于同一预设的模块架构构建而成，使得子应用间和主项目与子应用间的数据共享和消息分发变得统一和安全，并且打破了不同技术栈之间的隔离，使得多技术栈开发人员可以共同服务于同一个微前端平台业务系统，极大的提高了业务平台系统的技术兼容性，且理论上可在不提高平台复杂度的基础上随着业务的增长不断拓展。
附图说明
为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍。显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本申请实施例提供的基于微前端的数据处理方法的流程示意图。
图2为本申请实施例提供的基于微前端的数据处理框架的结构示意图。
图3为本申请实施例提供的基于微前端的数据处理方法的另一流程示意图。
图4为本申请实施例提供的数据处理装置的结构示意图。
图5为本申请实施例提供的数据处理装置的另一结构示意图。
图6为本申请实施例提供的终端设备的结构示意图。
具体实施方式
下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述。显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域技术人员在没有付出创造性劳动前提下所获得的所有其他实施例，都属于本申请的保护范围。
本申请实施例提供一种基于微前端的数据处理方法，所述基于微前端的数据处理方法可以应用于终端设备中。所述终端设备可以是智能手机、电脑等设备。
目前行业中常用的微前端解决方案有Iframe和路由分发等方式。其中，Iframe在使用过程中，解决了以上问题同时，也会带来新的问题，如不同微前端之间隔离后，层叠样式表(CascadingStyle Sheets，CSS)，JavaScript无法共用，在不同微前端工程中要重复开发；不同微前端工程不同源，ookie无法共用等问题。为了解决上述技术问题，本申请实施例提供一种基于微前端的数据处理方法。利用本申请实施例提供的基于微前端的数据处理方法，通过统一不同技术栈前端项目的架构和关键输出，解决了在一个系统中多技术栈实现的子应用不能共存的技术问题。
请参阅图1，图1为本申请实施例提供的基于微前端的数据处理方法的流程示意图。所述基于微前端的数据处理方法，应用于终端设备中，所述方法基于微前端的数据处理框架实现，所述微前端的数据处理框架包括：微前端主工程模块和至少两个不同类别的微前端子工程模块，所述至少两个不同类别的微前端子工程模块基于同一预设的模块架构构建而成，通过所述模块架构构建的微前端子工程模块能够生成主入口文件，数据状态集文件和内部样式文件。
需要说明的是，本方案是以开源微前端框架-SingleSpa为基础，通过一种合理可行的项目编译，资源加载和路由控制方法，统一不同技术栈（例如React，Vue，Angular）前端项目的架构和关键输出，解决了在一个系统中多技术栈实现的子应用不能共存的技术问题。
其中，微前端是一种由独立交付的多个前端应用组成整体的架构风格。具体的，通过将前端应用分解成一些更小、更简单的模块，并且各个模块均能够独立开发，测试跟部署，而在用户看来仍然是内聚的单个产品。
本申请的方法是通过微前端的数据处理框架实现的，图2示出了根据本申请的一个实施例的微前端的数据处理框架的结构示意图，从图2可以看出，所述微前端的数据处理框架包括微前端主工程模块和至少两个不同类别的微前端子工程模块，微前端主工程模块通讯连接微前端子工程模块。在本申请的一些实施例中，在微前端子工程模块为多个情况的条件下，各个微前端子工程模块之间是互相隔离的。另外，微前端主工程模块和微前端子工程模块都具有API接口。
需要说明的是，本方案所述的微前端子工程模块都是基于同一预设的模块架构构建而成，通过模块架构构建的微前端子工程模块均能够生成主入口文件（mian文件），数据状态集文件（store文件）和内部样式文件（scc文件）。从而统一不同技术栈（例如React，Vue，Angular）前端项目的架构和关键输出，解决了在一个系统中多技术栈实现的子应用不能共存的技术问题。
具体地，在技术层面整合了三大前端技术栈（例如React，Vue，Angular）的项目结构，通过构造结构相似数据状态管理机制，使得子应用间和主项目与子应用间的数据共享和消息分发变得统一和安全，并且打破了不同技术栈之间的隔离，使得多技术栈开发人员可以共同服务于同一个微前端平台业务系统，极大的提高了业务平台系统的技术兼容性，且理论上可在不提高平台复杂度的基础上随着业务的增长不断拓展。
本申请的方法可以包括以下步骤：
步骤101，接收各子应用的定制信息，并将所述各子应用的定制信息发送至所述微前端主工程模块，根据所述定制信息生成所述各子应用对应的加载菜单和初始化文件。
在本实施例中，搭载有本方案提供的数据处理框架的终端设备在接收到各子应用的定制信息后，并将各子应用的定制信息发送至微前端主工程模块，微前端主工程模块根据定制信息生成各子应用对应的加载菜单和初始化文件。其中定制信息包括例如应用信息，菜单信息及权限配置信息中的至少一种。
在一些实施例中，微前端子工程模块基于预设的模块架构构建而成，所述模块架构包括：
业务模块定义单元，用于定义生成对应不同功能的业务模块；
内部样式定义单元，用于定义所述业务模块的内部样式，并生成对应不同业务模块的内部样式文件；
数据状态定义单元，用于定义所述业务模块在不同节点的状态，并生成对应不同业务模块的数据状态文件；
主入口文件生成单元，用于定义生成不同业务模块的主入口文件。
在一些实施例中，所述微前端主工程模块包括路由分发单元、第三方依赖映射配置单元、子应用入口路径配置单元、样式管理中心、消息分发中心及主工程基础前端单元。
其中，所述路由分发单元用于接收各子应用的定制信息，并将所述各子应用的定制信息发送至所述主工程基础前端单元；
所述第三方依赖映射配置单元用于配置系统所使用到的第三方依赖库文件地址及对应别名的映射，以及在不同运行环境下的依赖集合切换；
所述子应用入口路径配置单元用于配置各子应用在不同运行环境下的主入口文件和数据集文件的资源路径，以及各子应用的下的所有模块相关信息；
所述样式管理中心用于配置系统相关内部样式和各子应用所依赖的第三方组件库样式，并在系统运行时控制样式版本切换；
所述消息分发中心用于构建全局事件分发器，用于集合各子应用数据和数据修改时间的统一分发；
所述主工程基础前端单元用于根据各子应用的定制信息生成所述各子应用对应的加载菜单和初始化文件。
步骤102，根据所述加载菜单加载所述各子应用对应的微前端子工程模块。
在本实施例中，根据各子应用的加载菜单中的postMessage确定组成主应用的各子应用，根据组成主应用的各子应用确定各子应用对应的微前端子工程模块，加载各子应用对应的微前端子工程模块。
步骤103，将所述初始化文件发送至所述微前端子工程模块，根据所述初始化文件生成各子应用对应的主入口文件，数据状态集文件和内部样式文件，完成各子应用的部署操作。
在本实施例中，根据初始化文件调用微前端主工程模块的主工程共享组件以完成各子应用的开发，将开发形成的各子应用中的主工程共享组件剔除后，将各子应用打包后，与各子应用的页面加载生命周期对应发送至微前端主工程模块。
以下将分别描述上述方法的实现流程和技术细节，其中将基于React，Vue，Angular框架实现的单体项目改造为微前端项目的过程类似，以基于React框架自定义实现的微前端项目为例，参阅图3：
首先基于React脚手架生成项目的初始架构，基于业务定义好Pages，Actions，Reducer，Less，Utils等基本的代码模块单元，Reducer为消息处理单元，Action为消息发送单元，Less为样式集合，Pages中定义了各个具体页面。
将多个页面模块的Reducer（消息处理单元）聚合成完整的项目数据状态树，以Store对象导出，该Store对象中包含每个模块定义的state(状态)和消息类型和消息处理方法。页面渲染所依赖的数据和消息处理都集中在此处理。
为防止用户使用系统时加载不必要的模块，这里对系统按业务单元进行页面拆分，完成相关配置后即可在最后编译时拆分成单个资源文件，做到随用随加载。在配置中定义了模块的获取路径、模块名、模块下操作列表、模块icon以及访问模块时进行懒加载的资源路径，这种定义方法可以保证该模块在整个系统下访问路径唯一，模块名可实现多语言配置，以及模块查看权限和模块下的所有操作权限可配置。
上述三步完成了项目内部的功能、样式、路由、状态管理定义和实现后，接下来将项目改造成微前端项目，增加对JS和CSS的生命周期定义，保证CSS和JS有独立生命周期的前提是通过在webpack中使用相应处理插件在项目编译时进行资源抽取。所述生命周期至少包括加载事件与卸载事件，所述加载事件用于加载展示所述JS文件或CSS文件，所述卸载事件用于关闭停用所述JS文件或CSS文件。
定义CSS生命周期的目的是因为后续要将项目全部的自定义样式进行文件抽离，有助于将JS文件与CSS文件进行分离使用，并保持装载、卸载等生命周期的同步。定义React生命周期时，要使用异步加载的方式，保证主入口项目一些自定义数据的可注入到微项目中，达到数据传递作用。
完成上述开发后，在webpack配置文件中定义main和store两个文件入口，并以system模式导出各文件块。编译即可得到主入口main文件，数据状态store文件，样式style文件以及若干按业务模块划分的chunk文件，按需求部署即可。
通过对React，Vue，Angular三种技术栈实现的微前端项目编译打包出结构相似的输出目录，并为了区分不同技术栈的版本，通过给每个文件都添加6位hash以实现版本区分。在输出文件中，其中main.xxxxxx.js都作为微前端项目的入口文件，store.xxxxxx.js作为数据状态存储相关文件，style.xxxxxx.css作为抽取出的自定义样式文件，以及若干按路由拆分出的模块文件准备用于异步加载。由此，可以基于这个统一的文件结构来配置主入口项目。
在一些场景中，由于每个微项目都可能使用不同的组件库，而且同一个组件库也存在新旧版本切换使用情况。所以在大型复杂的微前端项目中大概率会遇到处理样式隔离问题、第三方样式使用策略以及保证子应用内部自定义的样式不受影响的问题。由于在编译时对JS文件和CSS文件进行了拆分，并且保证样式的生命周期与子应用生命周期同步，所以子应用内部的样式对外是隔离的，而对于一些第三方组件的样式，例如antd.css或elementUI.css等，这是大部分子应用都要依赖使用的，所以当存在有不同的子应用需要引用同类样式的不同版本时，需要保证旧版本的组件样式不会被新版本的组件样式给覆盖，而对于这些公共样式，通过统一在index.html文件中加载。为了在子应用间隔离使用正确的样式版本，需要结合<link>标签的disabled属性和当前location来进行控制。
具体地，通过预加载所述第三方依赖库中的所有第三方样式文件，由于全加载会存在后加载的覆盖先加载的，所以要针对当前子应用用到的样式让它们单独生效，因此将所有第三方样式文件设置为未激活状态；
当确定好所述子应用待调用的指定样式文件时，从所述处于未激活状态的所有第三方样式文件中单独激活所述指定样式文件；
根据处于激活状态的所述指定样式文件对子应用进行样式渲染操作。
通过上述基于配置实现样式文件生命周期和标签有效性动态控制的方法，可以在不影响渲染效果的前提下有效避免相同的资源多次进行网络获取，以实现资源最小化和易于控制的效果，同时很好解决了第三方样式切换使用策略以及子应用内部自定义的样式隔离问题。
在一些实施例中，对于第三方的CDN资源，即内容分发网络（Content DeliveryNetwork，简称CDN），通过提供三个不同版本的资源链接以用于不同环境，然后通过执行package.json文件中的特定指令来启动特定的编译环境，环境变量值记录在自定义全局变量process.env.RUNNING_ENV中。主入口项目启动过程中，通过当前环境变量值获取到每个子应用对应配置的入口main文件和store文件路径以及对应的第三方cdn资源文件。整合后为每一项资源生成script标签，script标签type值为"systemjs-importmap"，最后将这些script标签插入到特定位置即可。
在一些实施例中，对于微前端项目之间状态、数据的共享传递问题，现有的一些方案如使用浏览器本地存储或者通过postmessage来跨域通信等都有一些弊端。
如果使用浏览器存储，如localStorage，cookies等，不仅需要自己构造合理的复杂数据结构，定义数据更新销毁的方式，在存储时效，存储空间，数据隐私安全上也有很大问题。
而使用HTML5的新API postMessage虽然可以实现跨源通信，但它有两个明显的问题。第一，他是无差别进行发送的，黑客很有可能通过构造恶意脚本同样使用postMessage进行消息伪造。所以发送消息和接受消息都有可能被拦截或篡改。第二，postMessage发送消息时，目标系统不一定处于激活状态，也就是数据的发送方和接收方不一定同时在线，这样也就起不到数据成功传递的效果。
所以为了解决上述方法存在的缺陷，本提案提供基于数据状态聚合树的“总-分”消息分发模式来定义了一套跨技术栈的数据存储，消息分发框架。
具体地，通过将所述主入口文件的路由表中配置的子应用进行注册，基于各子应用的数据状态文件的路径获取store对象；
在所述全局事件分发器中对各子应用的store对象进行注册；
将携带对应所述store对象和全局事件分发器的自定义属性传入对应的子应用，实现各子应用之间的状态分享和事件分发。
首先基于上述方案为不同技术栈（React，Vue，Angular）实现的业务系统构建具有类似数据状态管理机制的微前端应用，以Action-Reducer-Store-View流程形成状态管理闭环，View层触发Action，Action中dispatch事件，Reducer中处理事件，并改变Store中的数据，最后反映在View层面。并在编译中以此作为一个单独入口输出入口文件。生成的store文件部署后将其路径链接配置在主入口项目路由表的对应子应用配置中。在主入口项目中，构建全局事件分发器，该事件分发器中包含以下方法：
通过registerStore函数对每个子应用的store对象进行注册并存储在stores对象中作为数据状态聚合树；
通过getTargetDispatch函数获取子应用的数据状态集合和数据修改方法，用于子应用间的消息分发；
通过getTargetState函数获取子应用的数据状态树，用于子应用间的状态共享。
dispatch方法将触发stores中所有store的dispatch方法，由于每个子应用所定义的消息名不会重复，所以虽然触发了所有子应用的dispatch，但只有能处理该消息的子应用才能据此更新数据状态，且dispatch是内部方法，不存在会被外部脚本利用劫持的风险。
在整个系统初始化时，首先会将路由表中所有配置的子应用进行注册，基于每个子应用store文件的路径获取store对象，然后在全局事件分发器中对每一个子应用store模块进行注册，最后再将携带对应store对象和全局事件分发器的自定义属性传入对应子应用。
由于在整个系统初始化时，会对所有子应用的store模块进行加载初始化，所以即使有些子应用还未激活，但该子应用的数据状态共享机制已经运行，待未激活的子应用激活后就可以保证已经是以最新状态进行运行，很好的解决了通过postMessage方式进行消息传递的痛点。
综上，本方案提出一种统一各技术栈的微前端架构及系统实现方法，区别于通过iframe实现的微前端方案，避免了因为浏览器跨域保护而导致各子系统被分割为较为独立的系统，数据不便共享的问题。而且对比通过iframe实现的样式隔离，每个ifrmae中运行的子系统需要独立获取加载所用到的样式文件，本方法考虑到第三方样式的通用特性，通过配置实现样式文件生命周期动态控制，保证子应用内部自定义样式对外部隔离，通过激活判断逻辑控制样式标签有效性来实现第三方样式的按需使用，在保证不影响子应用渲染的情况下，大大减小了第三方样式的使用下载次数，对网站加载速度有较大帮助，同时使得样式的多版本多类型兼容使用得以实现。在提升开发效率，减低多技术栈前端团队合作门槛方面，本方案提出的基于判断环境标识进行特定环境的资源链接配置获取的方法有效的解决了在一份代码中解决了多种环境的集成配置和灵活切换的痛点，极大的提高了开发人员的工作效率。对比于通过postMessage方式实现的消息分发手段，本方案在技术层面整合了三大前端技术栈的项目结构，通过构造结构相似数据状态管理机制，使得子应用间和主项目与子应用间的数据共享和消息分发变得统一和安全，并且打破了不同技术栈之间的隔离，使得多技术栈开发人员可以共同服务于同一个微前端平台业务系统，极大的提高了业务平台系统的技术兼容性，且理论上可在不提高平台复杂度的基础上随着业务的增长不断拓展，具有很高实际价值。
上述所有可选技术方案，可以采用任意结合形成本申请的可选实施例，在此不再一一赘述。
具体实施时，本申请不受所描述的各个步骤的执行顺序的限制，在不产生冲突的情况下，某些步骤还可以采用其它顺序进行或者同时进行。
由上可知，本申请实施例提供的基于微前端的数据处理方法基于微前端的数据处理框架实现，所述微前端的数据处理框架包括：微前端主工程模块和至少两个不同类别的微前端子工程模块，所述至少两个不同类别的微前端子工程模块基于同一预设的模块架构构建而成，通过所述模块架构构建的微前端子工程模块能够生成主入口文件，数据状态集文件和内部样式文件；所述方法包括：接收各子应用的定制信息，并将所述各子应用的定制信息发送至所述微前端主工程模块，根据所述定制信息生成所述各子应用对应的加载菜单和初始化文件；根据所述加载菜单加载所述各子应用对应的微前端子工程模块；将所述初始化文件发送至所述微前端子工程模块，根据所述初始化文件生成各子应用对应的主入口文件，数据状态集文件和内部样式文件，完成各子应用的部署操作。
本申请实施例还提供一种数据处理装置，所述数据处理装置可以集成在终端设备中。所述终端设备可以是智能手机、平板电脑等设备。
请参阅图4，图4为本申请实施例提供的数据处理装置的结构示意图。数据处理装置30可以包括：
接收模块31，用于接收各子应用的定制信息，并将所述各子应用的定制信息发送至所述微前端主工程模块，根据所述定制信息生成所述各子应用对应的加载菜单和初始化文件；
加载模块32，用于根据所述加载菜单加载所述各子应用对应的微前端子工程模块；
部署模块33，用于将所述初始化文件发送至所述微前端子工程模块，根据所述初始化文件生成各子应用对应的主入口文件，数据状态集文件和内部样式文件，完成各子应用的部署操作。
在一些实施例中，所述模块架构包括：业务模块定义单元，用于定义生成对应不同功能的业务模块；内部样式定义单元，用于定义所述业务模块的内部样式，并生成对应不同业务模块的内部样式文件；数据状态定义单元，用于定义所述业务模块在不同节点的状态，并生成对应不同业务模块的数据状态文件；
主入口文件生成单元，用于定义生成不同业务模块的主入口文件。
在一些实施例中，所述装置还包括定义模块，用于分别定义所述JS文件和CSS文件的生命周期，所述生命周期至少包括加载事件与卸载事件，所述加载事件用于加载展示所述JS文件或CSS文件，所述卸载事件用于关闭停用所述JS文件或CSS文件。
在一些实施例中，所述微前端主工程模块包括路由分发单元、第三方依赖映射配置单元、子应用入口路径配置单元、样式管理中心、消息分发中心及主工程基础前端单元；所述路由分发单元用于接收各子应用的定制信息，并将所述各子应用的定制信息发送至所述主工程基础前端单元；所述第三方依赖映射配置单元用于配置系统所使用到的第三方依赖库文件地址及对应别名的映射，以及在不同运行环境下的依赖集合切换；所述子应用入口路径配置单元用于配置各子应用在不同运行环境下的主入口文件和数据集文件的资源路径，以及各子应用的下的所有模块相关信息；所述样式管理中心用于配置系统相关内部样式和各子应用所依赖的第三方组件库样式，并在系统运行时控制样式版本切换；所述消息分发中心用于构建全局事件分发器，用于集合各子应用数据和数据修改时间的统一分发；所述主工程基础前端单元用于根据各子应用的定制信息生成所述各子应用对应的加载菜单和初始化文件。
在一些实施例中，所述装置还包括注册模块，用于将所述主入口文件的路由表中配置的子应用进行注册，基于各子应用的数据状态文件的路径获取store对象；在所述全局事件分发器中对各子应用的store对象进行注册；将携带对应所述store对象和全局事件分发器的自定义属性传入对应的子应用，实现各子应用之间的状态分享和事件分发。
在一些实施例中，所述注册模块，用于通过registerStore函数对每个子应用的store对象进行注册并存储在stores对象中作为数据状态聚合树；通过getTargetDispatch函数获取子应用的数据状态集合和数据修改方法，用于子应用间的消息分发；通过getTargetState函数获取子应用的数据状态树，用于子应用间的状态共享。
在一些实施例中，所述装置还包括预加载模块，用于预加载所述第三方依赖库中的所有第三方样式文件，将所述所有第三方样式文件设置为未激活状态；当确定好所述子应用待调用的指定样式文件时，从所述处于未激活状态的所有第三方样式文件中单独激活所述指定样式文件；根据处于激活状态的所述指定样式文件对子应用进行样式渲染操作。
具体实施时，以上各个模块可以作为独立的实体来实现，也可以进行任意组合，作为同一或若干个实体来实现。
由上可知，本申请实施例提供的数据处理装置30，通过接收模块31接收各子应用的定制信息，并将所述各子应用的定制信息发送至所述微前端主工程模块，根据所述定制信息生成所述各子应用对应的加载菜单和初始化文件；加载模块32根据所述加载菜单加载所述各子应用对应的微前端子工程模块；部署模块33将所述初始化文件发送至所述微前端子工程模块，根据所述初始化文件生成各子应用对应的主入口文件，数据状态集文件和内部样式文件，完成各子应用的部署操作。
请参阅图5，图5为本申请实施例提供的数据处理装置的另一结构示意图，数据处理装置30包括存储器120、一个或多个处理器180、以及一个或多个应用程序，其中该一个或多个应用程序被存储于该存储器120中，并配置为由该处理器180执行；该处理器180可以包括接收模块31、加载模块32，以及部署模块33。例如，以上各个部件的结构和连接关系可以如下：
存储器120可用于存储应用程序和数据。存储器120存储的应用程序中包含有可执行代码。应用程序可以组成各种功能模块。处理器180通过运行存储在存储器120的应用程序，从而执行各种功能应用以及数据处理。此外，存储器120可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。相应地，存储器120还可以包括存储器控制器，以提供处理器180对存储器120的访问。
处理器180是装置的控制中心，利用各种接口和线路连接整个终端的各个部分，通过运行或执行存储在存储器120内的应用程序，以及调用存储在存储器120内的数据，执行装置的各种功能和处理数据，从而对装置进行整体监控。可选的，处理器180可包括一个或多个处理核心；优选的，处理器180可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等。
具体在本实施例中，处理器180会按照如下的指令，将一个或一个以上的应用程序的进程对应的可执行代码加载到存储器120中，并由处理器180来运行存储在存储器120中的应用程序，从而实现各种功能：
接收模块31，用于接收各子应用的定制信息，并将所述各子应用的定制信息发送至所述微前端主工程模块，根据所述定制信息生成所述各子应用对应的加载菜单和初始化文件；
加载模块32，用于根据所述加载菜单加载所述各子应用对应的微前端子工程模块；
部署模块33，用于将所述初始化文件发送至所述微前端子工程模块，根据所述初始化文件生成各子应用对应的主入口文件，数据状态集文件和内部样式文件，完成各子应用的部署操作。
在一些实施例中，所述模块架构包括：业务模块定义单元，用于定义生成对应不同功能的业务模块；内部样式定义单元，用于定义所述业务模块的内部样式，并生成对应不同业务模块的内部样式文件；数据状态定义单元，用于定义所述业务模块在不同节点的状态，并生成对应不同业务模块的数据状态文件；
主入口文件生成单元，用于定义生成不同业务模块的主入口文件。
在一些实施例中，所述装置还包括定义模块，用于分别定义所述JS文件和CSS文件的生命周期，所述生命周期至少包括加载事件与卸载事件，所述加载事件用于加载展示所述JS文件或CSS文件，所述卸载事件用于关闭停用所述JS文件或CSS文件。
在一些实施例中，所述微前端主工程模块包括路由分发单元、第三方依赖映射配置单元、子应用入口路径配置单元、样式管理中心、消息分发中心及主工程基础前端单元；所述路由分发单元用于接收各子应用的定制信息，并将所述各子应用的定制信息发送至所述主工程基础前端单元；所述第三方依赖映射配置单元用于配置系统所使用到的第三方依赖库文件地址及对应别名的映射，以及在不同运行环境下的依赖集合切换；所述子应用入口路径配置单元用于配置各子应用在不同运行环境下的主入口文件和数据集文件的资源路径，以及各子应用的下的所有模块相关信息；所述样式管理中心用于配置系统相关内部样式和各子应用所依赖的第三方组件库样式，并在系统运行时控制样式版本切换；所述消息分发中心用于构建全局事件分发器，用于集合各子应用数据和数据修改时间的统一分发；所述主工程基础前端单元用于根据各子应用的定制信息生成所述各子应用对应的加载菜单和初始化文件。
在一些实施例中，所述装置还包括注册模块，用于将所述主入口文件的路由表中配置的子应用进行注册，基于各子应用的数据状态文件的路径获取store对象；在所述全局事件分发器中对各子应用的store对象进行注册；将携带对应所述store对象和全局事件分发器的自定义属性传入对应的子应用，实现各子应用之间的状态分享和事件分发。
在一些实施例中，所述注册模块，用于通过registerStore函数对每个子应用的store对象进行注册并存储在stores对象中作为数据状态聚合树；通过getTargetDispatch函数获取子应用的数据状态集合和数据修改方法，用于子应用间的消息分发；通过getTargetState函数获取子应用的数据状态树，用于子应用间的状态共享。
在一些实施例中，所述装置还包括预加载模块，用于预加载所述第三方依赖库中的所有第三方样式文件，将所述所有第三方样式文件设置为未激活状态；当确定好所述子应用待调用的指定样式文件时，从所述处于未激活状态的所有第三方样式文件中单独激活所述指定样式文件；根据处于激活状态的所述指定样式文件对子应用进行样式渲染操作。
本申请实施例还提供一种终端设备。所述终端设备可以是智能手机、电脑、平板电脑等设备。
请参阅图6，图6示出了本申请实施例提供的终端设备的结构示意图，该终端设备可以用于实施上述实施例中提供的基于微前端的数据处理方法。该终端设备1200可以为电视机或智能手机或平板电脑。
如图6所示，终端设备1200可以包括RF（Radio Frequency，射频）电路110、包括有一个或一个以上（图中仅示出一个）计算机可读存储介质的存储器120、输入单元130、显示单元140、传感器150、音频电路160、传输模块170、包括有一个或者一个以上（图中仅示出一个）处理核心的处理器180以及电源190等部件。本领域技术人员可以理解，图6中示出的终端设备1200结构并不构成对终端设备1200的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。其中：
RF电路110用于接收以及发送电磁波，实现电磁波与电信号的相互转换，从而与通讯网络或者其他设备进行通讯。RF电路110可包括各种现有的用于执行这些功能的电路元件，例如，天线、射频收发器、数字信号处理器、加密/解密芯片、用户身份模块（SIM）卡、存储器等等。RF电路110可与各种网络如互联网、企业内部网、无线网络进行通讯或者通过无线网络与其他设备进行通讯。
存储器120可用于存储软件程序以及模块，如上述实施例中基于微前端的数据处理方法对应的程序指令/模块，处理器180通过运行存储在存储器120内的软件程序以及模块，从而执行各种功能应用以及数据处理，可以根据终端设备所处的当前场景来自动选择振动提醒模式来进行桌面布局迁移，既能够保证会议等场景不被打扰，又能保证用户可以感知来电，提升了终端设备的智能性。存储器120可包括高速随机存储器，还可包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中，存储器120可进一步包括相对于处理器180远程设置的存储器，这些远程存储器可以通过网络连接至终端设备1200。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
输入单元130可用于接收输入的数字或字符信息，以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。具体地，输入单元130可包括触敏表面131以及其他输入设备132。触敏表面131，也称为触摸显示屏或者触控板，可收集用户在其上或附近的触摸操作（比如用户使用手指、触笔等任何适合的物体或附件在触敏表面131上或在触敏表面131附近的操作），并根据预先设定的程式驱动相应的连接装置。可选的，触敏表面131可包括触摸检测装置和触摸控制器两个部分。其中，触摸检测装置检测用户的触摸方位，并检测触摸操作带来的信号，将信号传送给触摸控制器；触摸控制器从触摸检测装置上接收触摸信息，并将它转换成触点坐标，再送给处理器180，并能接收处理器180发来的命令并加以执行。此外，可以采用电阻式、电容式、红外线以及表面声波等多种类型实现触敏表面131。除了触敏表面131，输入单元130还可以包括其他输入设备132。具体地，其他输入设备132可以包括但不限于物理键盘、功能键（比如音量控制按键、开关按键等）、轨迹球、鼠标、操作杆等中的一种或多种。
显示单元140可用于显示由用户输入的信息或提供给用户的信息以及终端设备1200的各种图形用户接口，这些图形用户接口可以由图形、文本、图标、视频和其任意组合来构成。显示单元140可包括显示面板141，可选的，可以采用LCD(Liquid CrystalDisplay，液晶显示器)、OLED(Organic Light-Emitting Diode，有机发光二极管)等形式来配置显示面板141。进一步的，触敏表面131可覆盖显示面板141，当触敏表面131检测到在其上或附近的触摸操作后，传送给处理器180以确定触摸事件的类型，随后处理器180根据触摸事件的类型在显示面板141上提供相应的视觉输出。虽然在图6中，触敏表面131与显示面板141是作为两个独立的部件来实现输入和输出功能，但是在某些实施例中，可以将触敏表面131与显示面板141集成而实现输入和输出功能。
终端设备1200还可包括至少一种传感器150，比如光传感器、运动传感器以及其他传感器。具体地，光传感器可包括环境光传感器及接近传感器，其中，环境光传感器可根据环境光线的明暗来调节显示面板141的亮度，接近传感器可在终端设备1200移动到耳边时，关闭显示面板141和/或背光。作为运动传感器的一种，重力加速度传感器可检测各个方向上（一般为三轴）加速度的大小，静止时可检测出重力的大小及方向，可用于识别手机姿态的应用（比如横竖屏切换、相关游戏、磁力计姿态校准）、振动识别相关功能（比如计步器、敲击）等; 至于终端设备1200还可配置的陀螺仪、气压计、湿度计、温度计、红外线传感器等其他传感器，在此不再赘述。
音频电路160、扬声器161，传声器162可提供用户与终端设备1200之间的音频接口。音频电路160可将接收到的音频数据转换后的电信号，传输到扬声器161，由扬声器161转换为声音信号输出；另一方面，传声器162将收集的声音信号转换为电信号，由音频电路160接收后转换为音频数据，再将音频数据输出处理器180处理后，经RF电路110以发送给比如另一终端，或者将音频数据输出至存储器120以便进一步处理。音频电路160还可能包括耳塞插孔，以提供外设耳机与终端设备1200的通信。
终端设备1200通过传输模块170（例如Wi-Fi模块）可以帮助用户收发电子邮件、浏览网页和访问流式媒体等，它为用户提供了无线的宽带互联网访问。虽然图6示出了传输模块170，但是可以理解的是，其并不属于终端设备1200的必须构成，完全可以根据需要在不改变发明的本质的范围内而省略。
处理器180是终端设备1200的控制中心，利用各种接口和线路连接整个手机的各个部分，通过运行或执行存储在存储器120内的软件程序和/或模块，以及调用存储在存储器120内的数据，执行终端设备1200的各种功能和处理数据，从而对手机进行整体监控。可选的，处理器180可包括一个或多个处理核心；在一些实施例中，处理器180可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器180中。
终端设备1200还包括给各个部件供电的电源190，在一些实施例中，电源可以通过电源管理系统与处理器180逻辑相连，从而通过电源管理系统实现管理放电、以及功耗管理等功能。电源190还可以包括一个或一个以上的直流或交流电源、再充电系统、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。
尽管未示出，终端设备1200还可以包括摄像头（如前置摄像头、后置摄像头）、蓝牙模块等，在此不再赘述。具体在本实施例中，终端设备1200的显示单元140是触摸屏显示器，终端设备1200还包括有存储器120，以及一个或者一个以上的程序，其中一个或者一个以上程序存储于存储器120中，且经配置以由一个或者一个以上处理器180执行一个或者一个以上程序包含用于进行以下操作的指令：
接收指令，用于接收各子应用的定制信息，并将所述各子应用的定制信息发送至所述微前端主工程模块，根据所述定制信息生成所述各子应用对应的加载菜单和初始化文件；
加载指令，用于根据所述加载菜单加载所述各子应用对应的微前端子工程模块；
部署指令，用于将所述初始化文件发送至所述微前端子工程模块，根据所述初始化文件生成各子应用对应的主入口文件，数据状态集文件和内部样式文件，完成各子应用的部署操作。
在一些实施例中，所述模块架构包括：业务模块定义单元，用于定义生成对应不同功能的业务模块；内部样式定义单元，用于定义所述业务模块的内部样式，并生成对应不同业务模块的内部样式文件；数据状态定义单元，用于定义所述业务模块在不同节点的状态，并生成对应不同业务模块的数据状态文件；主入口文件生成单元，用于定义生成不同业务模块的主入口文件。
在一些实施例中，所述程序还包括定义指令，用于分别定义所述JS文件和CSS文件的生命周期，所述生命周期至少包括加载事件与卸载事件，所述加载事件用于加载展示所述JS文件或CSS文件，所述卸载事件用于关闭停用所述JS文件或CSS文件。
在一些实施例中，所述微前端主工程模块包括路由分发单元、第三方依赖映射配置单元、子应用入口路径配置单元、样式管理中心、消息分发中心及主工程基础前端单元；所述路由分发单元用于接收各子应用的定制信息，并将所述各子应用的定制信息发送至所述主工程基础前端单元；所述第三方依赖映射配置单元用于配置系统所使用到的第三方依赖库文件地址及对应别名的映射，以及在不同运行环境下的依赖集合切换；所述子应用入口路径配置单元用于配置各子应用在不同运行环境下的主入口文件和数据集文件的资源路径，以及各子应用的下的所有模块相关信息；所述样式管理中心用于配置系统相关内部样式和各子应用所依赖的第三方组件库样式，并在系统运行时控制样式版本切换；所述消息分发中心用于构建全局事件分发器，用于集合各子应用数据和数据修改时间的统一分发；所述主工程基础前端单元用于根据各子应用的定制信息生成所述各子应用对应的加载菜单和初始化文件。
在一些实施例中，所述程序还包括注册指令，用于将所述主入口文件的路由表中配置的子应用进行注册，基于各子应用的数据状态文件的路径获取store对象；在所述全局事件分发器中对各子应用的store对象进行注册；将携带对应所述store对象和全局事件分发器的自定义属性传入对应的子应用，实现各子应用之间的状态分享和事件分发。
在一些实施例中，所述注册指令，用于通过registerStore函数对每个子应用的store对象进行注册并存储在stores对象中作为数据状态聚合树；通过getTargetDispatch函数获取子应用的数据状态集合和数据修改方法，用于子应用间的消息分发；通过getTargetState函数获取子应用的数据状态树，用于子应用间的状态共享。
在一些实施例中，所述程序还包括预加载指令，用于预加载所述第三方依赖库中的所有第三方样式文件，将所述所有第三方样式文件设置为未激活状态；当确定好所述子应用待调用的指定样式文件时，从所述处于未激活状态的所有第三方样式文件中单独激活所述指定样式文件；根据处于激活状态的所述指定样式文件对子应用进行样式渲染操作。
本申请实施例还提供一种终端设备。所述终端设备可以是智能手机、电脑等设备。
由上可知，本申请实施例提供了一种终端设备1200，所述终端设备1200执行以下步骤：
本申请实施例还提供一种存储介质，所述存储介质中存储有计算机程序，当所述计算机程序在计算机上运行时，所述计算机执行上述任一实施例所述的基于微前端的数据处理方法。
需要说明的是，对本申请所述基于微前端的数据处理方法而言，本领域普通测试人员可以理解实现本申请实施例所述基于微前端的数据处理方法的全部或部分流程，是可以通过计算机程序来控制相关的硬件来完成，所述计算机程序可存储于一计算机可读存储介质中，如存储在终端设备的存储器中，并被该终端设备内的至少一个处理器执行，在执行过程中可包括如所述基于微前端的数据处理方法的实施例的流程。其中，所述存储介质可为磁碟、光盘、只读存储器（ROM，Read Only Memory）、随机存取记忆体（RAM，Random AccessMemory）等。
对本申请实施例的所述数据处理装置而言，其各功能模块可以集成在一个处理芯片中，也可以是各个模块单独物理存在，也可以两个或两个以上模块集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读存储介质中，所述存储介质譬如为只读存储器，磁盘或光盘等。
以上对本申请实施例所提供的基于微前端的数据处理方法、框架、存储介质及终端设备进行了详细介绍。本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。
Claims (8)
1.一种基于微前端的数据处理方法，其特征在于，所述方法基于微前端的数据处理框架实现，所述微前端的数据处理框架包括：微前端主工程模块和至少两个不同类别的微前端子工程模块，所述至少两个不同类别的微前端子工程模块基于同一预设的模块架构构建而成，通过所述模块架构构建的微前端子工程模块能够生成主入口文件，数据状态集文件和内部样式文件；所述微前端主工程模块包括第三方依赖映射配置单元，所述第三方依赖映射配置单元用于配置系统所使用到的第三方依赖库文件地址及对应别名的映射，以及在不同运行环境下的依赖集合切换；
所述方法包括：
接收各子应用的定制信息，并将所述各子应用的定制信息发送至所述微前端主工程模块，根据所述定制信息生成所述各子应用对应的加载菜单和初始化文件；
根据所述加载菜单加载所述各子应用对应的微前端子工程模块；
将所述初始化文件发送至所述微前端子工程模块，根据所述初始化文件生成各子应用对应的主入口文件，数据状态集文件和内部样式文件，完成各子应用的部署操作；
所述内部样式文件包括CSS文件，所述方法还包括：
分别定义JS文件和CSS文件的生命周期，所述生命周期至少包括加载事件与卸载事件，所述加载事件用于加载展示所述JS文件或CSS文件，所述卸载事件用于关闭停用所述JS文件或CSS文件；
所述方法还包括：
预加载所述第三方依赖库中的所有第三方样式文件，将所述所有第三方样式文件设置为未激活状态；
当确定好所述子应用待调用的指定样式文件时，从处于所述未激活状态的所有第三方样式文件中单独激活所述指定样式文件；
根据处于激活状态的所述指定样式文件对子应用进行样式渲染操作。
2.如权利要求1所述的数据处理方法，其特征在于，所述模块架构包括：
业务模块定义单元，用于定义生成对应不同功能的业务模块；
内部样式定义单元，用于定义所述业务模块的内部样式，并生成对应不同业务模块的内部样式文件；
数据状态定义单元，用于定义所述业务模块在不同节点的状态，并生成对应不同业务模块的数据状态文件；
主入口文件生成单元，用于定义生成不同业务模块的主入口文件。
3.如权利要求1所述的数据处理方法，其特征在于，所述微前端主工程模块包括路由分发单元、子应用入口路径配置单元、样式管理中心、消息分发中心及主工程基础前端单元；
所述路由分发单元用于接收各子应用的定制信息，并将所述各子应用的定制信息发送至所述主工程基础前端单元；
所述子应用入口路径配置单元用于配置各子应用在不同运行环境下的主入口文件和数据集文件的资源路径，以及各子应用的下的所有模块相关信息；
所述样式管理中心用于配置系统相关内部样式和各子应用所依赖的第三方组件库样式，并在系统运行时控制样式版本切换；
所述消息分发中心用于构建全局事件分发器，用于集合各子应用数据和数据修改时间的统一分发；
所述主工程基础前端单元用于根据各子应用的定制信息生成所述各子应用对应的加载菜单和初始化文件。
4.如权利要求3所述的数据处理方法，其特征在于，所述方法还包括：
将所述主入口文件的路由表中配置的子应用进行注册，基于各子应用的数据状态文件的路径获取store对象；
在所述全局事件分发器中对各子应用的store对象进行注册；
将携带对应所述store对象和全局事件分发器的自定义属性传入对应的子应用，实现各子应用之间的状态分享和事件分发。
5.如权利要求4所述的数据处理方法，其特征在于，所述在所述全局事件分发器中对各子应用的store对象进行注册，包括：
通过registerStore函数对每个子应用的store对象进行注册并存储在stores对象中作为数据状态聚合树；
通过getTargetDispatch函数获取子应用的数据状态集合和数据修改方法，用于子应用间的消息分发；
通过getTargetState函数获取子应用的数据状态树，用于子应用间的状态共享。
6.一种数据处理框架，其特征在于，包括：
微前端主工程模块和至少两个不同类别的微前端子工程模块，所述至少两个不同类别的微前端子工程模块基于同一预设的模块架构构建而成，通过所述模块架构构建的微前端子工程模块能够生成主入口文件，数据状态集文件和内部样式文件；所述微前端主工程模块包括第三方依赖映射配置单元，所述第三方依赖映射配置单元用于配置系统所使用到的第三方依赖库文件地址及对应别名的映射，以及在不同运行环境下的依赖集合切换；所述内部样式文件包括CSS文件，
所述数据处理框架用于执行以下方法：
分别定义JS文件和CSS文件的生命周期，所述生命周期至少包括加载事件与卸载事件，所述加载事件用于加载展示所述JS文件或CSS文件，所述卸载事件用于关闭停用所述JS文件或CSS文件；
接收各子应用的定制信息，并将所述各子应用的定制信息发送至所述微前端主工程模块，根据所述定制信息生成所述各子应用对应的加载菜单和初始化文件；
根据所述加载菜单加载所述各子应用对应的微前端子工程模块；
将所述初始化文件发送至所述微前端子工程模块，根据所述初始化文件生成各子应用对应的主入口文件，数据状态集文件和内部样式文件，完成各子应用的部署操作；
所述数据处理框架还用于执行以下方法：
预加载所述第三方依赖库中的所有第三方样式文件，将所述所有第三方样式文件设置为未激活状态；
当确定好所述子应用待调用的指定样式文件时，从处于所述未激活状态的所有第三方样式文件中单独激活所述指定样式文件；
根据处于激活状态的所述指定样式文件对子应用进行样式渲染操作。
7.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有多条指令，所述指令适于处理器进行加载，以执行权利要求1至5任一项所述的基于微前端的数据处理方法。
8.一种终端设备，其特征在于，包括处理器和存储器，所述存储器存储有多条指令，所述处理器加载所述指令以执行权利要求1至5任一项所述的基于微前端的数据处理方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210249919.9A CN114327688B (zh) | 2022-03-15 | 2022-03-15 | 基于微前端的数据处理方法、框架、存储介质及终端设备 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210249919.9A CN114327688B (zh) | 2022-03-15 | 2022-03-15 | 基于微前端的数据处理方法、框架、存储介质及终端设备 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN114327688A CN114327688A (zh) | 2022-04-12 |
| CN114327688B true CN114327688B (zh) | 2022-07-08 |
Family
ID=81033654
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210249919.9A Active CN114327688B (zh) | 2022-03-15 | 2022-03-15 | 基于微前端的数据处理方法、框架、存储介质及终端设备 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114327688B (zh) |
Families Citing this family (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114756212A (zh) * | 2022-06-13 | 2022-07-15 | 济南浪潮数据技术有限公司 | 低代码应用集成方法、装置、设备及介质 |
| CN115987959A (zh) * | 2022-12-02 | 2023-04-18 | 浪潮通信信息系统有限公司 | 一种基于远端加载的可定制app融合方法 |
| CN115665448B (zh) * | 2022-12-22 | 2023-03-21 | 广东省信息工程有限公司 | 一种基于微服务的权限控制方法、设备、存储介质 |
| CN116932251B (zh) * | 2023-09-18 | 2024-01-30 | 联通(广东)产业互联网有限公司 | 基于微前端的系统集成方法及系统 |
Citations (15)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107291523A (zh) * | 2017-08-01 | 2017-10-24 | 北京亚鸿世纪科技发展有限公司 | 一种Web前端消息总线系统 |
| CN108446141A (zh) * | 2018-02-28 | 2018-08-24 | 武汉智博创享科技股份有限公司 | 一种Web前端插件及基于Web前端插件进行调度和通信的方法 |
| CN110708368A (zh) * | 2019-09-25 | 2020-01-17 | 北京计算机技术及应用研究所 | 一种基于路由分发的微前端系统和方法 |
| CN111638870A (zh) * | 2020-05-14 | 2020-09-08 | 民生科技有限责任公司 | 一种基于react和redux的前端开发基础平台 |
| CN112114784A (zh) * | 2020-09-21 | 2020-12-22 | 广东电网有限责任公司电力科学研究院 | 一种基于Single-Spa的前端微服务化系统 |
| CN112162871A (zh) * | 2020-09-25 | 2021-01-01 | 同程网络科技股份有限公司 | 小程序与webview数据交换的方法、装置及存储介质 |
| CN112181432A (zh) * | 2020-10-13 | 2021-01-05 | 普元信息技术股份有限公司 | ReactNative框架中实现bundle的模块化打包处理的系统 |
| CN112491955A (zh) * | 2020-10-23 | 2021-03-12 | 北京思特奇信息技术股份有限公司 | 一种基于代理服务器实现iframe系统数据交换的方法和系统 |
| CN112860236A (zh) * | 2021-02-08 | 2021-05-28 | 杭州玳数科技有限公司 | 一种基于single-spa的微前端技术 |
| CN112988153A (zh) * | 2021-03-17 | 2021-06-18 | 薪得付信息技术(上海)有限公司 | 基于微前端的数据处理方法及框架 |
| CN113220273A (zh) * | 2021-05-20 | 2021-08-06 | 南方电网数字电网研究院有限公司 | 微前端应用资源处理方法、装置、设备和介质 |
| CN113448702A (zh) * | 2021-06-16 | 2021-09-28 | 浪潮软件股份有限公司 | 一种基于前端的微服务设计方法 |
| CN113626124A (zh) * | 2021-08-16 | 2021-11-09 | 南京赛宁信息技术有限公司 | 一种用于iFrame微前端架构的组件状态共享方法与装置 |
| CN113793169A (zh) * | 2021-08-12 | 2021-12-14 | 惠州Tcl云创科技有限公司 | 基于用户评论数据处理方法、装置、设备及存储介质 |
| CN113986226A (zh) * | 2021-12-28 | 2022-01-28 | 中国电子科技网络信息安全有限公司 | 一种基于qiankun和Web Component的微前端架构及其构建方法 |
Family Cites Families (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US9875119B2 (en) * | 2014-12-04 | 2018-01-23 | Business Objects Software Ltd. | Extensibility framework |
| CN109508438A (zh) * | 2018-11-23 | 2019-03-22 | 四川长虹电器股份有限公司 | 基于vue滚动事件的动态锚点的实现方法 |
| CN114138372A (zh) * | 2021-12-06 | 2022-03-04 | 中国工商银行股份有限公司 | 前端组件加载方法及装置 |
-
2022
- 2022-03-15 CN CN202210249919.9A patent/CN114327688B/zh active Active
Patent Citations (15)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107291523A (zh) * | 2017-08-01 | 2017-10-24 | 北京亚鸿世纪科技发展有限公司 | 一种Web前端消息总线系统 |
| CN108446141A (zh) * | 2018-02-28 | 2018-08-24 | 武汉智博创享科技股份有限公司 | 一种Web前端插件及基于Web前端插件进行调度和通信的方法 |
| CN110708368A (zh) * | 2019-09-25 | 2020-01-17 | 北京计算机技术及应用研究所 | 一种基于路由分发的微前端系统和方法 |
| CN111638870A (zh) * | 2020-05-14 | 2020-09-08 | 民生科技有限责任公司 | 一种基于react和redux的前端开发基础平台 |
| CN112114784A (zh) * | 2020-09-21 | 2020-12-22 | 广东电网有限责任公司电力科学研究院 | 一种基于Single-Spa的前端微服务化系统 |
| CN112162871A (zh) * | 2020-09-25 | 2021-01-01 | 同程网络科技股份有限公司 | 小程序与webview数据交换的方法、装置及存储介质 |
| CN112181432A (zh) * | 2020-10-13 | 2021-01-05 | 普元信息技术股份有限公司 | ReactNative框架中实现bundle的模块化打包处理的系统 |
| CN112491955A (zh) * | 2020-10-23 | 2021-03-12 | 北京思特奇信息技术股份有限公司 | 一种基于代理服务器实现iframe系统数据交换的方法和系统 |
| CN112860236A (zh) * | 2021-02-08 | 2021-05-28 | 杭州玳数科技有限公司 | 一种基于single-spa的微前端技术 |
| CN112988153A (zh) * | 2021-03-17 | 2021-06-18 | 薪得付信息技术(上海)有限公司 | 基于微前端的数据处理方法及框架 |
| CN113220273A (zh) * | 2021-05-20 | 2021-08-06 | 南方电网数字电网研究院有限公司 | 微前端应用资源处理方法、装置、设备和介质 |
| CN113448702A (zh) * | 2021-06-16 | 2021-09-28 | 浪潮软件股份有限公司 | 一种基于前端的微服务设计方法 |
| CN113793169A (zh) * | 2021-08-12 | 2021-12-14 | 惠州Tcl云创科技有限公司 | 基于用户评论数据处理方法、装置、设备及存储介质 |
| CN113626124A (zh) * | 2021-08-16 | 2021-11-09 | 南京赛宁信息技术有限公司 | 一种用于iFrame微前端架构的组件状态共享方法与装置 |
| CN113986226A (zh) * | 2021-12-28 | 2022-01-28 | 中国电子科技网络信息安全有限公司 | 一种基于qiankun和Web Component的微前端架构及其构建方法 |
Non-Patent Citations (3)
| Title |
|---|
| N年前写的微前端笔记——4.消息总线-微前端应用之间的通信工具(四);俞华;《https://blog.csdn.net/qq_17175013/article/details/120555441》;20210929;第1-10页 * |
| 可能是你见过最完善的微前端解决方案;kuitos;《https://zhuanlan.zhihu.com/p/78362028?spm=ata.13261165.0.0.72c96cbdj5cjws》;20200328;第1-14页 * |
| 浅析微前端qiankun的2种应用间通信方式（actions通信及shared通信、各自通信原理及实例代码）;古兰精;《https://www.cnblogs.com/goloving/p/15599561.html》;20211124;第1-11页 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN114327688A (zh) | 2022-04-12 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN114327688B (zh) | 基于微前端的数据处理方法、框架、存储介质及终端设备 | |
| CN109388453B (zh) | 应用页面的展示方法、装置、存储介质和电子设备 | |
| CN109857403B (zh) | 一种页面更新、页面处理方法及装置 | |
| CN104965722B (zh) | 一种显示信息的方法及装置 | |
| CN109933381B (zh) | 一种内核的加载方法及装置 | |
| CN111723002A (zh) | 一种代码调试方法、装置、电子设备及存储介质 | |
| CN109067751B (zh) | 一种非Root环境下ARP欺骗检测方法、装置及终端 | |
| CN110035181A (zh) | 一种快应用卡片主题设置方法及终端 | |
| CN106919458B (zh) | Hook目标内核函数的方法及装置 | |
| CN114327087A (zh) | 输入事件处理方法、装置、电子设备和存储介质 | |
| CN108959062B (zh) | 网页元素获取方法及装置 | |
| CN111359210B (zh) | 一种数据处理方法、装置、电子设备以及存储介质 | |
| CN107463395B (zh) | 组件调用方法及装置 | |
| CN109145598B (zh) | 脚本文件的病毒检测方法、装置、终端及存储介质 | |
| CN116594616A (zh) | 一种组件配置方法、装置及计算机可读存储介质 | |
| CN113742716B (zh) | 代码运行方法、装置、电子设备、存储介质和程序产品 | |
| CN114168148A (zh) | 源文件的处理方法、装置、介质及设备 | |
| CN109145182B (zh) | 数据采集方法、装置、计算机设备及系统 | |
| CN115589432A (zh) | 消息推送管理方法、装置、介质及设备 | |
| CN115828845A (zh) | 多媒体数据查看方法、装置、介质及设备 | |
| CN104700031B (zh) | 防止应用操作中远程代码被执行的方法、装置及系统 | |
| CN116149639A (zh) | 一种组件开发的方法、装置、电子设备和存储介质 | |
| CN112667868A (zh) | 一种数据检测方法以及装置 | |
| CN116582585B (zh) | 消息推送方法、装置、介质及设备 | |
| CN112799687B (zh) | 一种数据处理方法、装置、存储介质及计算机设备 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |