微前端qiankun

webcomponent
微前端:将产品的各个功能模块作为一个个独立的应用系统,然后将这些模块整合起来组装成完整的产品。

具体使用 https://qiankun.umijs.org/zh/guide/tutorial
注意:微应用需要配置打包格式和跨域;

  • 打包格式:umd打包;
  • 允许跨域:让基座加载微应用;

1 微前端架构有何价值?

  • 技术栈无关;(优点)
    普通的library是通过npm包引入,但是微应用library是通过script标签引入;
    HTML entry
  • 微应用独立开发,部署(巨石应用解耦);(初衷)
  • 增量升级(渐进式重构);
  • 微应用状态隔离,运行时状态不共享;
    沙箱设计;

2 为什么不使用iframe?

  • URL不同步。浏览器刷新导致状态丢失、后退前进按钮无法使用(iframe内部跳转,url不做记录)。
    • 主页面嵌入一个iframe,并在iframe内加载了另外一个网页;浏览器地址显示主页面的URL;而不是iframe内部网页的实际URL;
    • 浏览器刷新导致iframe内部状态刷新;
      微前端可以使用URL查询参数携带微应用的路由信息;也可以使用localStorage、sessionStorage保存用户登录状态、偏好设置等重要信息;
    • 针对“后退前进按钮无法使用”,可以使用面包屑导航、内嵌后退/前进按钮来导航;
  • DOM结构不共享。
    • 带遮罩层的弹框无法在整个应用中展示;
  • 全局上下文完全隔离,内存变量不共享;微应用通信、微应用免登录都无法实现;
  • 加载慢。每次微应用进入都需要资源重新加载;

3 基于single-spa路由劫持方案

通过劫持路由来做子应用的切换,接入方式需要融合自身的路由;

4 HTML Entry接入方式

实现了 import-html-entry 插件,允许以 html文件为应用入口,通过html解析器从文件中提取jscss依赖,并且通过 fetch下载依赖。

const registerApps = [{name: 'app1',entry: 'http://localhost:8080',container: '#app',activeRule: '/app1',
}];

乾坤通过import-html-entry 请求 http://localhost:8080,得到对应的html文件,解析内部的所有 scriptstyle标签,依次下载和执行它们;

5 样式隔离

  1. shadowDom
    为每个微应用的根节点创建一个 shadow root。最终整个应用的所有 DOM 将形成一棵 shadow tree;

shadowDom 的特点是,内部所有节点的样式对树外面的节点无效;
这种方案有缺陷,某些UI框架可能会生成一些弹出框直接改在到 document.body下,此时脱离了 shadow tree;所以样式仍然会对全局造成污染。

let fetchAppContent = `
<div id="qiankun"><style>div {color: red;}</style><div>我是子应用</div>
</div>
`;// 创建空div,将微应用填充到 div 中
const containerElement = document.createElement('div');
containerElement.innerHTML = fetchAppContent;// 找到子应用的根节点
const appElement = containerElement.querySelector('#qiankun');
let html = appElement.innerHTML;
appElement.innerHTML = '';// 开启沙箱
let shadow = appElement.attachShadow({ mode: 'closed' });
shadow.innerHTML = html;document.body.appendChild(appElement);
  1. CSS Modules
    CSS Modules

6 JS沙箱

全局变量/事件不冲突;
参考 乾坤JS沙箱设计

7 资源预加载

8 应用间通信

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/2862.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C语言 |预处理指令】预处理指令详解(包括编译与链接)

目录 一、编译与链接 1.翻译环境 -预处理 -编译 -汇编 -链接 2.执行环境 二、预定义符号 三、#define定义常量 四、#define定义宏 五、带有副作用的宏参数 六、宏替换的规则 七、 宏函数的对比 八、#和## 1.#运算符 2.##运算符 九、命名约定 十、#undef 十一、 命…

IDEA本地将镜像推送到coding制品仓库

创建制品仓库 假设仓库名称为docker 在IDEA 添加Docker 注册表 IDEA必须先安装docker插件 地址 用户名和密码就是coding的登录名和密码服务器 最好本地安装docker桌面版&#xff0c;更容易操作 测试连接成功 推送镜像到coding的docker制品仓库 选中某个镜像 鼠标右键 注册表…

四.RocketMQ的几种消息发送方式应用

RocketMQ的几种消息发送方式应用 一&#xff1a;普通消息1&#xff09;发送同步消息2&#xff09;发送异步消息3&#xff09;单向发送消息4&#xff09;消费消息-负载均衡模式5&#xff09;消费消息-广播模式 二&#xff1a;顺序消息1.顺序消息指的是:严格按照消息的发送顺序进…

服务器数据恢复—ESXi无法识别数据存储和VMFS文件系统如何恢复数据?

服务器数据恢复环境&#xff1a; 一台某品牌服务器&#xff0c;通过FreeNAS来做iSCSI&#xff0c;然后使用两台同品牌服务器做ESXi虚拟化系统。 FreeNAS层为UFS2文件系统&#xff0c;使用整个存储建一个稀疏模式的文件&#xff0c;挂载到ESXi虚拟化系统。ESXi虚拟化系统中有3台…

react实现时钟翻牌效果

需求&#xff1a;随着数字的变动要求有时钟翻动动效 问题&#xff1a;只在加载时有动效 解决方案&#xff1a;通过判断数字改变&#xff08;这里通过新旧数值变动来判断&#xff0c;不贴代码啦&#xff09;&#xff0c;每次变动的时候手动把animationIterationCount设置为inf…

【blog项目】layui与jquery冲突导致鼠标悬停事件失效、如何调用layui.use()作用域里的方法

blog项目前台展示——查询数据库中的文章类型并展示时出现的bug 1 正常演示 2 用jquery查询数据库并添加到页面后 3 相关代码 <script src"/static/jquery-2.1.4.js"></script> <script src"/static/layui/layui.js"></script> …

dpdk tap设备不能转发大于1500报文问题分析

背景 在使用dpdk做流转发的时候,期望将部分流量转到tap设备,以供Linux协议栈消费。 做测试的时候发现两个问题, 问题一: 报文超过MTU 1500的报文,在tap设备上抓不到报文。 问题二: ifconfig 修改tap设备的MTU为 2000,在tap设备上依旧抓不到报文,猜测这个地方只是修改了L…

MySQL修改表时添加和删除约束

修改表时添加和删除约束 ①非空约束 alter table students modify column s_name varchar(20) not null; #添加 alter table students modify column s_name varchar(20) ; #删除 ②添加默认约束 alter table students modify column age int default 18; #添加 alter tabl…

分布式与一致性协议之CAP(一)

CAP理论 概述。 在开发分布式系统的时候&#xff0c;会遇到一个非常棘手的问题&#xff0c;那就是如何根据业务特点&#xff0c;为系统设计合适的分区容错一致性模型&#xff0c;以实现集群能力。这个问题棘手在当发生分区错误时&#xff0c;应该如何保障系统稳定运行而不影响…

面向对象设计与分析(41)建造者模式builder

文章目录 1 定义2 示例3 实际应用1 定义 看下builder模式的官方定义: The intent of the Builder design pattern is to separate the construction of a complex object from its representation. By doing so the same construction process can create different represe…

基于STM32和阿里云的智能台灯(STM32+ESP8266+MQTT+阿里云+语音模块)

一、主要完成功能 1、冷光模式和暖光模式两种灯光 主要支持冷光和暖光模式两种&#xff0c;可以通过语音模块或手机app远程切换冷暖光 2、自动模式和手动模式 主要支持手动模式和自动两种模式&#xff08;app或语音助手切换&#xff09; (1)自动模式&#xff1a;根据环境光照…

第七天 dfs剪枝优化

第七天 dfs剪枝&优化 1可行性剪枝 2最优性剪枝 3重复性剪枝 题 1 输入 5 5 6 …S. XX.X. …X… …D.X …X… 输出 YES —————————————— 题解 #include<iostream> #include<cstdio> using namespace std; const int N 10; int n,m,T; char …

架构师系列-Nginx、OpenResty(三)- 负载均衡配置

Nginx负载均衡 负载均衡用于从“upstream”模块定义的后端服务器列表中选取一台服务器接受用户的请求&#xff0c;一个最基本的upstream模块是这样的&#xff0c;模块内的server是服务器列表&#xff1a; #动态服务器组 upstream dynamicserver {server 172.16.44.47:9001; #…

绿色便携方式安装apache+mysql+tomcat+php集成环境并提供控制面板

绿色便携方式安装带控制面板的ApacheMariaDBTomcatPHP集成环境 目录 绿色便携方式安装带控制面板的ApacheMariaDBTomcatPHP集成环境[TOC](目录) 前言一、XAMPP二、安装和使用1.安装2.使用 三、可能的错误1、检查端口占用2、修改端口 前言 安装集成环境往往配置复杂&#xff0c…

无人机飞行特点

你知道吗&#xff1f;无人机飞行竟然有这么多的神奇特点&#xff01; &#x1f929;想象一下&#xff0c;它们如同天空中的自由精灵&#xff0c;不受束缚地穿梭在云端。 &#x1f681; 首先&#xff0c;无人机的飞行高度和角度都可以随心所欲地调整&#xff0c;无论是俯瞰美景…

自动化立体库安全使用管理制度

导语 大家好&#xff0c;我是智能仓储物流技术研习社的社长&#xff0c;老K。专注分享智能仓储物流技术、智能制造等内容。 新书《智能物流系统构成与技术实践》 完整版文件和更多学习资料&#xff0c;请球友到知识星球 【智能仓储物流技术研习社】自行下载 关于自动化立体库安…

四、Flask进阶

Flask-Cache pip install flask-caching安装flask_cache初始化 # ext.py from flask_sqlalchemy import SQLAlchemy from flask_migrate import Migrate from flask_caching import Cachedb SQLAlchemy() migrate Migrate() cache Cache(config{CACHE_TYPE: simple # 缓存…

webpack、rollup、vite、esbuild 前端构建工具到底有什么关系和区别?

一、为什么需要构建工具&#xff0c;前端构建工具具体干了些什么&#xff1f; 前端最开始的开发模式为HTMLJSCSS&#xff0c;写起来痛不欲生&#xff0c;要直面js操作dom、浏览器兼容js / css、代码压缩、开发中要不断手动刷新等问题。直到nodeJS后&#xff0c;出现了angular、…

MybatisPlus(简单CURD,MP的实体类注解,MP条件查询,MP分页查询,MP批量操作,乐观锁,代码生成器)

目录 一、MP入门 1. MP是什么 2. MP使用入门 1 说明 2 准备MP项目环境 1) 添加依赖 2) 创建配置文件 3) 创建引导类 3 MP使用入门 1 创建实体类 2 创建Mapper 3 使用测试 3. 小结 二、MP简单CURD【重点】 1. 说明 2. 示例 3. 小结 三、MP的实体类注解[重点] …

字符串漏洞注入深入学习

字符串型漏洞注入&#xff0c;特别是针对Web应用程序的SQL注入&#xff0c;是一种常见的网络安全威胁。它涉及攻击者在不受控制的情况下&#xff0c;通过构造特定的字符串输入&#xff0c;干扰或改变应用程序中原有的SQL查询语句&#xff0c;从而执行恶意的SQL代码。 要深入学…