一种前端应用数据架构系统技术方案

本发明专利技术涉及微前端技术领域，具体涉及一种前端应用数据架构系统，包括基座应用，子应用

【技术实现步骤摘要】
一种前端应用数据架构系统


[0001]本专利技术涉及微前端
，尤其涉及一种前端应用数据架构系统
。

技术介绍

[0002]微前端是一种多个团队通过独立发布功能的方式来共同构建现代化
web
应用的技术手段及方法策略，微前端与自包含系统
(Self
‑
contained System)
概念一脉相承
。
微前端之类的思路，会被称为面向垂直划分系统的前端集成
。
[0003]申请号为
CN202211244472.2
的中国专利技术专利申请提供了
vue
微前端架构系统及其构建方法，包括主应用与微应用，主应用与微应用的技术框架均为
vue
实现，采用
webpack
工具构建；所述主应用负责登录鉴权
、
菜单管理和微应用注册，并为微应用载入提供加载
dom
容器，微应用按照
qiankun
框架导出生命周期钩子后，接入到主应用中；所述主应用与微应用部署在一台服务器上，端口号不同，并分别配置
nginx
服务；微应用仓库独立
。
[0004]但是，本申请人发现现有技术至少存在以下问题：
[0005]现有技术使用复杂，对于微前端的组件化渲染效果不好
。

技术实现思路

[0006]有鉴于此，本专利技术的目的在于提出一种前端应用数据架构系统，以解决现有技术使用复杂，对于微前端的组件化渲染效果不好的问题
。
[0007]基于上述目的，本专利技术提供了一种前端应用数据架构系统，包括：基座应用，基座应用包含子应用
A
和子应用
B
；子应用
A
和子应用
B
注册到基座应用中，基座应用用于对子应用
A
以及子应用
B
的访问；
[0008]Micro APP
，包括：
[0009]CustomElement
组件库，
Micro APP
将功能封装到
CustomElement
组件库中；
[0010]数据信号单元，用于
Micro APP
与基座应用中的子应用
A
以及子应用
B
进行数据传输；
[0011]插件单元，用于提供给开发者灵活处理静态资源的能力，对有问题的资源文件进行修改
。
[0012]可选的，所述
CustomElement
组件库包括生命周期单元，用于
MicroApp
在基座应用注册的时候可以注册全局的生命周期监听函数
。
[0013]可选的，所述
CustomElement
组件库包括
JS
沙箱，使用
Proxy
拦截了用户全局操作的行为，防止对
window
的访问和修改，避免全局变量污染，
micro
‑
app
中的每个子应用都运行在沙箱环境，以获取相对纯净的运行空间
。
[0014]可选的，所述
CustomElement
组件库包括样式隔离：用于在父子元素同样设置样式时，样式隔离排除父子相同设置时候的影响
。
[0015]可选的，所述
CustomElement
组件库包括元素隔离：用于限制元素，使元素不会逃离
MicroApp
元素边界，子应用只能对自身的元素进行增
、
删
、
改
、
查的操作
。
[0016]可选的，所述
CustomElement
组件库包括资源地址补全，用于将子应用静态资源的相对地址补全为绝对地址，保证地址指向正确的资源路径
。
[0017]可选的，所述
CustomElement
组件库包括预加载，用于在子应用尚未渲染时提前加载资源并缓存，从而提升首屏渲染速度，预加载并不同步执行，在浏览器空闲时间，依照开发者传入的顺序，依次加载每个应用的静态资源
。
[0018]可选的，所述基座应用和子应用
A
以及子应用
B
分别具有一套路由系统，基座应用分配一个基础路由给子应用
A
和子应用
B
，
[0019]可选的，基础路由用于子应用
A
和子应用
B
在基础路由下渲染，且不超过基础路由的范围
。
[0020]本专利技术的有益效果：通过设置基座应用，包括：子应用
A
和子应用
B
；子应用
A
和子应用
B
注册到基座应用中，基座应用用于对子应用
A
以及子应用
B
的访问；
Micro APP
，包括：
CustomElement
组件库，
Micro APP
将功能封装到
CustomElement
组件库中；数据信号单元，用于
Micro APP
与基座应用中的子应用
A
以及子应用
B
进行数据传输；插件单元，用于提供给开发者灵活处理静态资源的能力，对有问题的资源文件进行修改
。
将微前端封装成一个类
WebComponent
组件，从而实现微前端的组件化渲染
。
使用更加方便，组件化渲染的效果更好
。
附图说明
[0021]为了更清楚地说明本专利技术或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本专利技术，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图
。
[0022]图1为本专利技术实施例一种前端应用数据架构系统的结构示意图；
[0023]图2为本专利技术实施例一种前端应用数据架构系统
Micro APP
的结构示意图
。
具体实施方式
[0024]为使本专利技术的目的
、
技术方案和优点更加清楚明白，以下结合具体实施例，对本专利技术进一步详细说明
。
[0025]需要说明的是，除非另外定义，本专利技术使用的技术术语或者科学术语应当为本专利技术所属领域内具有一般技能的人士所理解的通常意义
。
本专利技术中使用的“第一”、“第二”以及类似的词语并不表示任何顺序
、
数量或者重要性，而只是用来区分不同的组成部分
。“包括”或者“包含”等类似的词语意指出现该词本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.
一种前端应用数据架构系统，其特征在于，包括：基座应用，基座应用包含子应用
A
和子应用
B
；子应用
A
和子应用
B
注册到基座应用中，基座应用用于对子应用
A
以及子应用
B
的访问；
Micro APP
，包括：
CustomElement
组件库，
Micro APP
将功能封装到
CustomElement
组件库中；数据信号单元，用于
Micro APP
与基座应用中的子应用
A
以及子应用
B
进行数据传输；插件单元，用于提供给开发者灵活处理静态资源的能力，对有问题的资源文件进行修改
。2.
根据权利要求1所述的一种前端应用数据架构系统，其特征在于，所述
CustomElement
组件库包括生命周期单元，用于
MicroApp
在基座应用注册的时候可以注册全局的生命周期监听函数
。3.
根据权利要求1所述的一种前端应用数据架构系统，其特征在于，所述
CustomElement
组件库包括
JS
沙箱，使用
Proxy
拦截了用户全局操作的行为，防止对
window
的访问和修改，避免全局变量污染，
micro
‑
app
中的每个子应用都运行在沙箱环境，以获取相对纯净的运行空间
。4.
根据权利要求1所述的一种前端...

【专利技术属性】
技术研发人员：郑能欢，
申请(专利权)人：深圳优制云工业互联网有限公司，
类型：发明
国别省市：