微前端随笔
✨ single-spa:
-
js-entry
通过es-module 或 umd 动态插入 js 脚本 ,在主应用中发送请求,来获取子应用的包,
该子应用的包singleSpa.registerApplication({name: 'app1',app: () => import('http://localhost:8080/app1.js'),activeWhen: '/app1' });
主应用直接执行
app: () => import('http://localhost:8080/app1.js')
该脚本,拿到子应用包。该包中暴露了主应用规定的那几个生命周期函数,
🎨 qiankun:
1. html-entry
qiankun 库的核心插件
import-html-entry 是 qiankun 实现 HTML Entry 模式的关键工具,具体功能包括:
- 请求并解析 HTML 文件
从 HTML 中提取所有<script>
和<link>
标签的资源路径(包括外链和内联脚本)。 - 资源分类与处理
将资源分为 JS、CSS 和 入口脚本,并处理资源路径(如相对路径转绝对路径)。 - 生成加载队列
根据资源类型和依赖关系生成加载队列,确保资源按正确顺序加载。 - 执行入口脚本并获取生命周期
import-html-entry
通过劫持全局变量或模块系统,获取子应用导出的生命周期方法。 - 执行环境隔离
提供沙箱机制(如 Proxy),隔离子应用的 JS 执行环境。
2. js沙箱
防止js全局污染
当在主应用环境中,开始加载子应用的 JS 文件(或内联脚本)时
qiankun 会通过 es6 Proxy 为该子应用创建一个 代理的window,
// 创建一个虚拟的全局对象const fakeWindow = {};// 保存子应用对全局变量的修改this.modifiedProps = new Map();// 代理 window 对象
this.proxy = new Proxy(fakeWindow, {get: (target, prop) => {// 优先从子应用的修改中读取,否则从真实的 window 读取return this.modifiedProps.has(prop) ? this.modifiedProps.get(prop): window[prop];},set: (target, prop, value) => {// 所有对 window 的修改记录到 modifiedProps,不影响真实 windowthis.modifiedProps.set(prop, value);return true;},
- 读操作:子应用读取 window.xxx 时,优先从 modifiedProps 中获取子应用自己修改的值;若未修改,则从真实 window 读取。
- 写操作:子应用修改 window.xxx 时,值被记录到 modifiedProps,不会影响真实 window。
3. 样式隔离
- 严格样式隔离(Shadow DOM):==创建一个封闭的 DOM 树,外部样式无法影响内部,内部样式也不会泄漏到外部。
- 配置方式:
什么是Shadow DOM?是 Web Components 技术中的一部分start({sandbox: {strictStyleIsolation: true, // 启用 Shadow DOM}, })
传统 DOM 是全局可见的,而 Shadow DOM 允许在组件内部创建一个私有的 DOM 子树,独立于主文档树。外部样式和脚本无法直接访问 Shadow DOM 内部的内容。
通过 element.attachShadow({ mode })
方法创建:
const host = document.createElement('div');// mode 可选 'open' 或 'closed'
// 是否允许外部通过 host.shadowRoot 访问 Shadow DOM。
const shadow = host.attachShadow({ mode: 'open' });
shadow.innerHTML = `<style>button { background: black; }</style><button>Shadow DOM 按钮</button>
`;
// 添加到页面后,按钮的样式不会受外部 CSS 影响
- 优点:完全隔离,最严格的样式保护。
- 缺点:
兼容性问题(部分旧浏览器不支持)。
子应用需适配 Shadow DOM 环境(如事件冒泡路径变化)
-
动态样式隔离(Scoped CSS)
为子应用的 CSS 选择器添加唯一前缀,限制其作用域。- 配置方式:
start({sandbox: {experimentalStyleIsolation: true, // 启用动态作用域}, })
原理:
子应用的根容器会被自动添加唯一属性(如 data-qiankun=“childApp”):<div data-qiankun="childApp"><!-- 子应用 DOM --><button class="button">Submit</button> </div>
子应用的所有 CSS选择器(如 .button)添加上具有唯一属性:
.button { background: red; }/* 重写后 */ [data-qiankun="childApp"] .button { background: red; }
- 优点:无需破坏子应用原有逻辑,兼容性好。
- 缺点:
无法处理全局样式(如 body 或 html 的样式)。
CSS-in-JS 或动态生成的样式可能需要额外处理。
如果子应用使用了 CSS-in-JS、内联样式或第三方 UI 库,可以结合以下方式彻底避免冲突:
- 子应用使用 CSS Modules 自动生成唯一的类名:
// 子应用组件
import styles from './App.module.css';function App() {return <div className={styles.title}>Child App</div>;
}
- CSS-in-JS
通过 Styled-components 或 Emotion 生成作用域样式:
const Title = styled.div`color: red;
`;
// 生成唯一的 class 名称(如 .css-1x2y3)
- UI 库前缀
修改第三方 UI 库的类名前缀(如 Ant Design):// 子应用中修改 less 变量 @ant-prefix: 'custom-prefix';
4. 路由(基于single-spa)
single-spa 对原生浏览器路由 做了以下事情;
-
监听的路由事件: hashchange 和 popstate
hashchange 和 popstate 是唯一原生支持无刷新路由的事件。
单页应用(SPA)和微前端架构中的路由切换 依靠这两个api具体来说,监听这两个事件有以下几个关键目的:
- 拦截路由变化 :
当用户在浏览器中导航(如点击前进/后退按钮、修改 URL hash、或通过 History API 进行导航)时,single-spa 需要知道这些变化,以便决定哪些微前端应用需要被加载、挂载或卸载。 - 控制事件触发顺序 :
通过捕获这些事件的监听器,single-spa 可以确保在完成应用的挂载/卸载操作后,才将这些事件传递给各个微前端应用,避免应用在不适当的时机接收到路由事件。 - 协调多个应用 :
当路由变化时,可能需要卸载一些应用并挂载其他应用。通过监听这些事件,single-spa 可以协调这个过程,确保应用之间的平滑切换。 - 统一的路由处理机制 :
无论是 hash 路由还是 history 路由,single-spa 都能通过监听这两个事件来处理,为不同类型的路由提供统一的处理机制。
- 拦截路由变化 :
-
修补 History API
具体来说,修补 History API 有以下几个关键目的:- 修补 pushState 或 replaceState 方法
这两个方法修改了URL,默认不触发 popstate,通过修补这些方法,single-spa 可以在它们被调用后手动触发一个人工的 popstate 事件,确保所有应用都能感知到路由变化。
- 修补 pushState 或 replaceState 方法
总的来说
- 完善原生 URL的路由响应机制
- 协调 子应用在不同URL间的挂载卸载
5. publicPath
静态文件在浏览器中被请求时的基础 URL 路径。
eg:
module.exports = {output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist'), // 与服务器无关,仅决定本地输出位置。publicPath: '/assets/', // 浏览器访问路径 需在前面加上 /assets},
};
若部署在服务器根目录,访问资源时会请求:http://xxx.com/assets/bundle.js。
在微应用中:
当子应用被主应用加载时,其资源路径可能相对于主应用的 URL,而非子应用的真实部署路径。
- 示例:子应用部署在 http://child.com/sub-app/,但主应用在 http://main.com/ 加载子应用,此时子应用的 JS/CSS 可能错误地从 http://main.com/js/app.js 加载(404 错误)。
通过配置 publicPath,子应用可以区分当前是独立运行还是被主应用加载,动态修正
资源路径。
⚠️ 且需要与子应用路由配置的协同:
问题场景:
如果子应用不配置路由的 basename(基础路径),当主应用通过 /sub-app 加载子应用时,
子应用的路由会直接拼接在 请求地址的根路径(/)
下,导致路径匹配丢失。例如:
- 主应用匹配子应用路径:http://main.com/sub-app
- 子应用内部路由:/user/list
- 访问子应用实际路径:http://main.com/user/list(错误,跳出了主应用的上下文)
- 预期路径:http://main.com/sub-app/user/list(正确)
总结:为什么必须协同?
静态资源路径(publicPath)和 路由路径(basename)共同决定了子应用的完整上下文:
- publicPath 解决资源从哪里加载。
- basename 解决路由在哪里生效。
两者缺一不可,否则会导致:
- 资源加载成功,但页面渲染错位。
- 路由跳转正确,但资源加载失败。
相关文章:
微前端随笔
✨ single-spa: js-entry 通过es-module 或 umd 动态插入 js 脚本 ,在主应用中发送请求,来获取子应用的包, 该子应用的包 singleSpa.registerApplication({name: app1,app: () > import(http://localhost:8080/app1.js),active…...
实操(不可重入函数、volatile、SIGCHLD、线程)Linux
1 不可重入函数 为什么会导致节点丢失内存泄露?main函数在执行insert,但是没执行完就被信号中断了,又进了这个函数里,所以这个insert函数在不同的执行流中,同一个函数被重复进入,如果没有问题,…...
如何在Linux系统上通过命令调用AI大模型?
如何在Linux系统上通过命令调用AI大模型? 文章目录 如何在Linux系统上通过命令调用AI大模型?一、准备工作二、编写API调用脚本三、配置命令行工具 使用AI命令帮我做一个文档总结提问技术问题编写简单的shell脚本帮我写一个docker-compose 在这个AI技术飞…...
数据分析-Excel-学习笔记Day1
Day1 复现报表聚合函数:日期联动快速定位区域SUMIF函数SUMIFS函数环比、同比计算IFERROR函数混合引用单元格格式总结汇报 拿到一个Excel表格,首先要看这个表格的构成(包含了哪些数据),几行几列,每一列的名称…...
负载均衡是什么,Kubernetes如何自动实现负载均衡
负载均衡是什么? 负载均衡(Load Balancing) 是一种网络技术,用于将网络流量(如 HTTP 请求、TCP 连接等)分发到多个服务器或服务实例上,以避免单个服务器过载,提高系统的可用性、可扩…...
洞察 Linux 进程管理
一、进程和线程的概念 1.进程 (1)概念 进程是程序在操作系统中的一次执行过程,是系统进行资源分配和调度的基本单位。进程是程序的执行实例,拥有独立的资源(如内存、文件描述符等)。每个进程在创建时会被…...
http协议版本的区别 -- 2和3
目录 http2和http3的区别 传输层协议 QUIC协议 介绍 连接建立与握手 建立安全连接的过程 RTT 建连为什么需要两个过程 原因 解决 QUIC协议的1-RTT 建连 必要性 连接过程 第一次握手(Client Hello) 版本号 key_share 其他 第二次握手 介绍 Server Hello 身…...
Vue2-实现elementUI的select全选功能
文章目录 使用 Element UI 的全选功能自定义选项来模拟全选 在使用 Element UI 的 el-select组件时,实现“全选”功能,通常有两种方式:一种是使用内置的全选功能,另一种是通过自定义选项来模拟全选。 使用 Element UI 的全选功能…...
Spring Boot 与 TDengine 的深度集成实践(四)
优化与扩展 批量插入数据 在实际应用中,当需要插入大量数据时,逐条插入会导致性能低下,因为每次插入都需要建立数据库连接、解析 SQL 语句等操作,这些操作会带来额外的开销 。为了提高数据插入效率,我们可以采用批量…...
2025年【山东省安全员C证】考试题及山东省安全员C证考试内容
在当今建筑行业蓬勃发展的背景下,安全生产已成为企业生存与发展的基石。安全员作为施工现场安全管理的直接责任人,其专业能力和资质认证显得尤为重要。山东省安全员C证作为衡量安全员专业水平的重要标准,不仅关乎个人职业发展,更直…...
提升Spring Boot开发效率的Idea插件:Spring Boot Helper
一、Spring Boot Helper插件介绍 Spring Boot Helper是一款专为Spring Boot开发者设计的IntelliJ IDEA插件,它提供了丰富的功能来简化和加速Spring Boot应用程序的开发过程。 该插件能够智能识别Spring Boot项目结构,提供专属的代码生成、配置辅助和运…...
【USTC 计算机网络】第三章:传输层 - 面向连接的传输:TCP
本文介绍了面向连接的传输协议:TCP,首先介绍 TCP 报文段的结构以及如何设置超时定时器,接着介绍 TCP 如何实现可靠数据传输以及流量控制,最后介绍 TCP 中最重要的三次握手与四次挥手的连接建立与关闭过程。 1. TCP 概述与段结构 …...
Linux主要开发工具之gcc、gdb与make
此系列还有两篇,大家想完整掌握可以阅读另外两篇 Linux文本编辑与shell程序设计-CSDN博客 Linux基础知识详解与命令大全(超详细)-CSDN博客 1.gcc编译系统 1.1 文件名后缀 文件名后缀 文 件 类 型 文件名后缀 文 件 类 型 .c C源…...
23种设计模式-行为型模式-观察者
文章目录 简介问题解决代码关键实现说明 总结 简介 观察者是一种行为设计模式, 允许你定义一种订阅通知机制, 可在事件发生时通知多个“观察/订阅”该对象的其他对象。 问题 假如你有两种类型的对象: 顾客和商店。顾客对某个新品非常感兴趣࿰…...
去中心化预测市场
去中心化预测市场 核心概念 预测市场类型: 类别型市场:二元结果(YES/NO),例如“BTC在2024年突破10万美元?” 多选型市场:多个选项(如总统候选人),赔付基于…...
springboot-ai接入DeepSeek
1、引入pom依赖 <dependency><groupId>org.springframework.ai</groupId><artifactId>spring-ai-starter-model-openai</artifactId> </dependency><dependencyManagement><dependencies><dependency><groupId>o…...
【C语言】数据在内存中的储存(整形)
目录 前言: 预备知识 整数在内存中的储存 原码 反码 补码 总结: 前言: 在上两章中讲解了五大内存函数,其中memchr函数,这个函数考察到数据内存的存储。 接下来为大家讲解整数在内存中的储存。 预备知识 认识…...
PCL 树木树干粗提取(地基数据,TLS)
文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 主要的思路如下: 1、首先,使用之前的CSF算法提取点云的地面点,在提取的过程中我们可以得到一个布料结构(地面模型)。 2、在得到这个布料结构之后,我们也就可以得到整个地面模型的高度了,之后我们只需要遍历每…...
Spring 中的 IOC
🌱 一、什么是 IOC? 📖 定义(通俗理解): IOC(Inversion of Control,控制反转) 是一种设计思想:对象不再由你自己创建和管理,而是交给 Spring 容器…...
尚硅谷2019版Java集合和泛型
第十一章 Java集合框架 集合框架全景图 mindmaproot((Java集合))Collection单列List有序可重复ArrayListLinkedListVectorSet无序唯一HashSetLinkedHashSetTreeSetMap双列HashMapLinkedHashMapTreeMapHashtablePropertiesToolsCollectionsArrays三大核心接口对比 特性ListSe…...
车载诊断架构 --- 整车重启先后顺序带来的思考
我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 周末洗了一个澡,换了一身衣服,出了门却不知道去哪儿,不知道去找谁,漫无目的走着,大概这就是成年人最深的孤独吧! 旧人不知我近况,新人不知我过…...
华为eNSP:实验 配置单区域集成ISIS
单区域集成ISIS是一种基于中间系统到中间系统(IS-IS)协议的网络架构优化方案,主要用于简化网络设计并提升数据传输效率。其核心特点包括: 单一区域部署 ISIS协议在单一逻辑区域内运行,消除多区域间的分层复杂性&am…...
常见框架漏洞(五)----中间件IIS6
一、【PUT漏洞】 漏洞描述:IIS Server 在 Web 服务扩展中开启了 WebDAV ,配置了可以写⼊的权限,造成任意⽂件上传。 版本:IIS 6.0 1. 环境 fofa搜素环境:"IIS-6.0" 或者环境搭建:本地搭建2003…...
leetcode221.最大正方形
class Solution {public int maximalSquare(char[][] matrix) {int result 0; // 记录正方形边长int m matrix.length, n matrix[0].length;int[][] dp new int[m 1][n 1];// 动态规划for (int i 1; i < m; i) {for (int j 1; j < n; j) {if (matrix[i - 1][j - …...
C++实现AVL树
一 AVL树的概念 上上节我们学习了二叉搜索树,他的理想查找的时间复杂度是o(log n),但是如果是下面这种情况,那么它的时间复杂度就会变成o(n). 这种情况就是出现一边高的那种,它的个数和它的高度相差不大。 那么这样就会把二叉搜索…...
Linux系统安全及应用
目录 一.账号安全措施 1.1系统账号清理 1.1.1将非登录用户的shell设为无法登录 1.1.2删除无用用户 userdel 1.1.3锁定账号文件 1.1.4锁定长期不使用的账号 1.2密码安全控制 1.2.1 对新建用户 1.2.2对已有用户 1.3命令历史限制 1.3.1临时清除历史命令 1.3.2限制命令…...
JAVA反序列化深入学习(十三):Spring2
让我们回到Spring Spring2 在 Spring1 的触发链上有所变换: 替换了 spring-beans 的 ObjectFactoryDelegatingInvocationHandler使用了 spring-aop 的 JdkDynamicAopProxy ,并完成了后续触发 TemplatesImpl 的流程 简而言之,换了一个chain&am…...
迭代器运算详解(四十二)
1. 迭代器的随机访问运算 对于 vector 和 string 这样的容器,它们的迭代器支持以下随机访问运算符: 运算符说明iter n返回一个新的迭代器,该迭代器比原来的迭代器 iter 向前移动了 n 个位置(即指向后面的第 n 个元素࿰…...
Linux中Squid服务常用操作
在 Linux 中 Squid 服务常用操作介绍 1. Squid 基础操作 启动 Squid # 前台启动(调试用) squid -N -d 1# 后台启动(-s 表示将日志输出到 syslog) squid -s停止 Squid # 安全停止(需配置 pid_file) squid…...
Linux操作系统--进程的概念
目录 1.了解进程前的前景知识 冯诺依曼体系结构 操作系统(OS) 2.进程 2.1进程的概念 2.2描述进程-PCB 2.2.1task_struct 2.3查看进程 2.4通过系统调用获取进程的标识符 2.5认识fork()--创建进程 该专栏会持续更新 更新时间一周一更。下周更新内容进程状态 1.了解进程前…...
C++假期练习
思维导图 牛客练习...
HTML零基础入门笔记:狂神版
前言 本笔记是学习狂神的java教程,建议配合视频,学习体验更佳。 【狂神说Java】HTML5完整教学通俗易懂_哔哩哔哩_bilibili 第1-2章:Java零基础入门笔记:(1-2)入门(简介、基础知识)-CSDN博客 第3章&…...
算法竞赛备赛——【图论】链式前向星
图论 图的存储方式: 通用的三种:邻接矩阵、邻接表、边集数组 有向图:十字链表 无向图:多重邻接表 刷题常用:邻接矩阵、链式前向星(邻接表变形) 链式前向星 算法题常用: 邻接矩阵、二维vector模…...
JAVA_类和对象
目录 1.面向对象的初步认知 1.1.什么是面向对象 1.2.面向对象与面向过程 2.类的定义和使用 2.1.简单认识类 2.2类的定义格式 2.3.练习 学生类 动物类(可爱猫猫🐱) 3.类的实例化 3.1.什么是实例化 3.2.类和对象的说明 4.this引用…...
高频面试题(含笔试高频算法整理)基本总结回顾65
干货分享,感谢您的阅读! (暂存篇---后续会删除,完整版和持续更新见高频面试题基本总结回顾(含笔试高频算法整理)) 备注:引用请标注出处,同时存在的问题请在相关博客留言…...
数据库系统-数据库控制
并发控制 事务的ACID特性: 原子性(Atomicity):事务包含的所有操作要么全部成功(commit提交),要么全部失败(rollback回滚)一致性(Consistency)&a…...
Python Cookbook-5.3 根据对象的属性将对象列表排序
任务 需要根据各个对象的某个属性来完成对整个对象列表的排序。 解决方案 DSU方法仍然一如既往地有效: def sort_by_attr(sed,attr):intermed [ (getattr(x,attr),i,x) for i,x in enumerate(seg)]intermed.sort()return [ x[-1] for x in intermed def sort_by_attr_inpl…...
Java MCP SDK 开发笔记(一)
MCP 简介 AI 大模型诞生之初,其高度模拟人的对话之能力惊为天人。但我们肯定不希望止步于此—— 工具化就是我们希望 AI 能够完成的目标,由此可以从单纯的对话发展为代替繁复人力的“干活”。这条道路上毋庸置疑 AI 大模型任重道远。而 MCP(Model Contr…...
AF3 OpenFoldDataLoader类_prep_batch_properties_probs方法解读
AlphaFold3 data_modules 模块的 OpenFoldDataLoader 类的 _prep_batch_properties_probs 方法是为每个批次数据准备 recycling 维度 的概率分布。它将根据配置文件中的设定为每个批次数据生成 recycling 轮次的概率分布,并存储到 prop_probs_tensor 中,用于后续抽样选择特定…...
寻找字符串数组中的最长共同前缀字符串
问题描述:给定一个字符串数组 strs,编写一个函数来找到这些字符串的最长公共前缀字符串,如果没有则返回空字符串"" 算法思路 横向扫描法: 从数组的第一个字符串开始,逐个和后面的字符串比较,逐…...
leetcode_数组 56. 合并区间
56. 合并区间 以数组 intervals 表示若干个区间的集合,其中单个区间为 intervals[i] [starti, endi] 。请你合并所有重叠的区间,并返回 一个不重叠的区间数组,该数组需恰好覆盖输入中的所有区间 。 示例 1: 输入:int…...
Jenkins学习(B站教程)
文章目录 1.持续集成CI2.持续交付CD3.持续部署4.持续集成的操作流程5.jenkins简介6.后续安装部署,见视频 bilibili视频 Jenkins是一个开源的、提供友好操作界面的持续集成(CI)工具,起源于Hudson(Hudson是商用的),主要用…...
学习笔记—C++—类和对象(一)
目录 类和对象 类的定义 类定义格式 访问限定符 类域 实例化 实例化概念 对象的大小 this指针 C和C语言实现Stack对比 类和对象 类的定义 类定义格式 ● class为定义类的关键字,Stack为类的名字,{}中为类的主体,注意类定义结束时后…...
PyTorch 深度学习 || 6. Transformer | Ch6.3 Transformer 简单案例
1. 简单案例 这个代码是一个简单的 Transformer 模型的实现,这个例子展示了一个基本的序列到序列(seq2seq)任务,比如将一个数字序列转换为另一个数字序列。可以用于学习和理解 Transformer 的基本结构和工作原理。 import torch import torch.nn as nn import math# 位置…...
体育风暴篮球足球体育球员综合资讯网站模板
源码名称:篮球足球体育球员综合资讯网站模板 开发环境:帝国cms7.5 空间支持:phpmysql 带软件采集,可以挂着自动采集发布,无需人工操作! 演示地址:https://www.52muban.com/shop/184016.html …...
Visual Studio Code SSH 连接超时对策( keep SSH alive)
文章目录 问题解决方法一:配置服务端关于ClientAliveInterval和ClientAliveCountMax1、打开终端,打开SSH配置文件:输入以下命令:2、打开配置文件后,添加以下内容:3、添加后,Esc按 <Enter>…...
Docker容器中的ubuntu apt update报错 解决办法
问题现象 # apt update Get:1 http://archive.ubuntu.com/ubuntu noble InRelease [256 kB] Get:2 http://security.ubuntu.com/ubuntu noble-security InRelease [126 kB] Err:2 http://security.ubuntu.com/ubuntu noble-security InRelease At least one invalid signa…...
CV - 目标检测
物体检测 目标检测和图片分类的区别: 图像分类(Image Classification) 目的:图像分类的目的是识别出图像中主要物体的类别。它试图回答“图像是什么?”的问题。 输出:通常输出是一个标签或一组概率值&am…...
linux提权 corn 提权
corn提权 corn的基本使用方法 corn的作用就是可以定时的完成一下任务(如备份一下log 或者清除一下日志文件 这些就是运维人员用的) 先找一下定时任务的工作表 cat /bin/corntab 这个是普通用户 我们直接看都看不了 说明什么说明这个 是root高权限执…...
1Panel安装失败 国内docker安装失败
本文仅针对学习交流,只为了帮助计算机相关专业大学生个人技能实操而记录 非学习目的严禁学习!!!否则后果自负 1、离线安装1Panel(不需要手动安装docker,离线安装包里包括了docker) 离线包下载地…...