qiankun解决的问题

news2025/5/25 16:10:48
  1. qiankun 中的沙箱机制是如何实现的?解决了什么问题?

一、实现方式

qiankun 的沙箱机制主要用于隔离微应用之间的运行环境,避免相互影响。其核心实现基于两种策略:

  1. 快照沙箱(SnapshotSandbox)

适用于不支持 Proxy 的低版本浏览器。

每次微应用切换时,记录 window 的状态(如全局变量),卸载时恢复原状态。

缺点:性能差、不支持多实例并发。

  1. Proxy 沙箱(ProxySandbox)

主要依赖于 Proxy 实现沙箱。

为每个微应用创建一个 Proxy(window) 的代理对象,拦截所有对 window 的修改,限制作用域。

示例:

const sandbox = new Proxy(window, {
set(target, prop, value) {
// 只修改沙箱中的对象,不影响全局
sandboxState[prop] = value;
return true;
},
get(target, prop) {
return sandboxState.hasOwnProperty(prop) ? sandboxState[prop] : target[prop];
}
});

优点:性能好,支持多个微应用并发运行。

  1. 样式隔离机制

除了 JS 沙箱外,还支持样式隔离:

Scoped CSS:通过添加前缀/标记隔离样式。

Shadow DOM:更彻底的样式隔离(实验性)。


二、解决的问题

  1. 全局变量污染

每个微应用都可能操作 window,如 window.appName = ‘a’,会造成冲突。

沙箱确保这些变量只在自己的作用域内生效。

  1. 样式冲突

不同微应用中的 CSS 可能互相覆盖。

样式隔离防止样式干扰。

  1. 多实例并发运行

Proxy 沙箱允许多个微应用同时存在于页面中,互不影响。

  1. 应用卸载时状态回滚

退出微应用时能恢复主应用或其它子应用原本的状态。


三、总结一句话

qiankun 通过 Proxy 等技术实现沙箱机制,有效隔离微应用之间的 JS 和 CSS 环境,解决全局变量冲突、样式污染、多实例运行等问题,是微前端稳定运行的核心保障。

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

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

相关文章

虚拟环境中的PyQt5 Pycharm设置参考

假如虚拟环境名是p3939 里面安装了pyqt5相关的库 1.QtDesigner Qt Designer 是通过拖拽的方式放置控件,并实时查看控件效果进行快速UI设计 位置 内容 name 可以随便命名,只要便于记忆就可以,本次采取通用…

AUTOSAR图解==>AUTOSAR_SRS_LIN

AUTOSAR LIN模块分析 目录 LIN模块概述LIN模块架构LIN通信状态流程LIN通信序列LIN配置结构总结1. LIN模块概述 本文档基于AUTOSAR规范SRS_LIN文档,对LIN(Local Interconnect Network)相关模块进行详细分析。主要包括以下几个模块: LIN接口 (LinIf)LIN驱动 (Lin)LIN传输层…

华为昇腾使用ollama本地部署DeepSeek大模型

文章目录 前言一、本次使用的硬件资源二、Ollama介绍三、Ollama在arm64位的芯片的安装及使用方法总结 前言 本次打算在华为昇腾上面使用ollama进行部署DeepSeek大模型。 一、本次使用的硬件资源 存储资源 内存资源 cpu资源 二、Ollama介绍 Ollama 是一个开源的大型语言…

多态的总结

什么是多态? 答:多态是多种形态,是为了完成某种行为时,不同对象会产生不同的形态(结合车票例子解释) 2. 什么是重载、重写(覆盖)、重定义(隐藏)? 答:重载的条件是:在同一…

Windows 高分辨率屏幕适配指南:解决界面过小、模糊错位问题

🖥️ Windows 高分辨率屏幕适配指南:解决界面过小、模糊错位问题 摘要: 在使用高分辨率屏幕时,许多老旧的桌面软件会出现界面显示异常的问题,例如窗口过小、控件错位、文字模糊等。本文提供一套通用解决方案&#xff0…

K8S-statefulset-mysql-ha

需求 实现一个HA mysql,包括1个master,2个slave。在K8S上已statefulset部署。 mysql HA原理 略 K8S环境需要解决的问题 1、由于使用同一个statefulset配置,因此需要考虑master和slave使用不同的cnf文件。 2、不同pod之间文件的传输 3、…

【方案分享】展厅智能讲解:基于BLE蓝牙Beacon的自动讲解触发技术实现

【方案分享】展厅智能讲解:基于BLE蓝牙Beacon的自动讲解触发技术实现 让观众靠近展品即可自动弹出讲解页面,是智能展厅的核心功能之一。本文将从软硬件技术、BLE Beacon原理、微信小程序实现、优劣对比与拓展方案五个维度,系统讲解“靠近展台…

web常见的攻击方式有哪些?如何防御?

Web常见攻击方式及防御策略 SQL注入 (SQL Injection) 详细解析: SQL 注入是一种利用应用程序未正确验证用户输入的漏洞,通过向应用传递恶意 SQL 查询来操纵数据库的行为。这种攻击可能导致敏感数据泄露、篡改或删除。 步骤: 攻击者找到可接受动态参数的应用程序…

力扣:《螺旋矩阵》系列题目

今天做了一下螺旋矩阵主题的一系列题目 即力扣中的相似题目 还是有所感悟的 接下来一一回顾: 第一题: 59. 螺旋矩阵 II - 力扣(LeetCode) 这题让我们生成一个正方形的矩阵,注意是正方形,不是长方形&a…

发电厂进阶,modbus TCP转ethernet ip网关如何赋能能源行业

案例分享:稳联技术modbus TCP转ethernet ip网关wl-abc004赋能,发电厂自动化改造,推动能源行业智能化升级 随着全球能源结构转型和“双碳”目标的推进,传统发电厂(如火电、水电、生物质发电)正面临严峻挑战&…

深入了解linux系统—— 操作系统的路径缓冲与链接机制

前言 在之前学习当中,我们了解了被打开的文件是如何管理的;磁盘,以及ext2文件系统是如何存储文件的。 那我们要打开一个文件,首先要先找到这个文件,操作系统又是如何去查找的呢? 理解操作系统搜索文件 …

华为2025年校招笔试真题手撕教程(一)

一、题目 输入: 第一行为记录的版本迭代关系个数N,范围是[1,100000]; 第二行到第N1行:每行包含两个字符串,第一个字符串为当前版本,第二个字符串为前序版本,用空格隔开。字符串包含字符个数为…

第9.2讲、Tiny Decoder(带 Mask)详解与实战

自己搭建一个 Tiny Decoder(带 Mask),参考 Transformer Encoder 的结构,并添加 Masked Multi-Head Self-Attention,它是 Decoder 的核心特征之一。 1. 背景与动机 Transformer 架构已成为自然语言处理(NLP…

基于PCRLB的CMIMO雷达网络多目标跟踪资源调度

针对分布式组网CMIMO雷达多目标跟踪(MTT)场景,博客分析了一种目标-雷达匹配方案与功率联合优化算法。在采用分布式组网融合架构的基础上,推导包含波束和功率分配的后验克拉美罗界(PCRLB)。随后,将该效用函数结合CMIMO雷达系统资源&#xff0c…

AtCoder Beginner Contest 407(ABCDE)

A - Approximation 翻译&#xff1a; 给你一个正整数 A 和一个正奇数 B。 请输出与实数 的差最小的整数。 可以证明&#xff0c;在约束条件下&#xff0c;这样的整数是唯一的。 思路&#xff1a; 令。比较来判断答案。 实现&#xff1a; #include<bits/…

VILT模型阅读笔记

代码地址&#xff1a;VILT Abstract Vision-and-Language Pre-training (VLP) has improved performance on various joint vision-andlanguage downstream tasks. Current approaches to VLP heavily rely on image feature extraction processes, most of which involve re…

掌握 npm 核心操作:从安装到管理依赖的完整指南

图为开发者正在终端操作npm命令&#xff0c;图片来源&#xff1a;Unsplash 作为 Node.js 生态的基石&#xff0c;npm&#xff08;Node Package Manager&#xff09;是每位开发者必须精通的工具。每天有超过 1700 万个项目通过 npm 共享代码&#xff0c;其重要性不言而喻。本文…

OpenCV CUDA模块特征检测与描述------一种基于快速特征点检测和旋转不变的二进制描述符类cv::cuda::ORB

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 cv::cuda::ORB 是 OpenCV 库中 CUDA 模块的一部分&#xff0c;它提供了一种基于快速特征点检测和旋转不变的二进制描述符的方法&#xff0c;用于…

Awesome ChatGPT Prompts:释放AI对话潜力的开源利器

项目概览 Awesome ChatGPT Prompts 是由土耳其开发者 Fatih Kadir Akın 发起的开源项目,托管于 GitHub,旨在通过精心设计的提示词模板(Prompts)优化用户与 ChatGPT 的交互体验。项目以 Markdown 和 CSV 格式管理模板,无需复杂编程语言,但需文本处理能力,目前已在 GitH…

PP-YOLOE-SOD学习笔记2

一、解析X-Anylabeling标注后的json格式问题 最近在使用自动标注工具后json格式转化过程中&#xff0c;即标注框的四点坐标转换为两点坐标时&#xff0c;发现json格式的四点顺序是按顺时针方向开始的&#xff0c;那么在转换其实就是删除2、4坐标或者1、3坐标即可。 二、数据集…