JavaScript 中全局作用域怎么在微前端架构中通过 Sandbox 沙箱隔离

陌静君_2288

陌静君_2288

2026-10-28

607人浏览

原创

微前端全局作用域隔离核心是切断子应用对真实window的直接读写,qiankun通过Proxy沙箱(动态拦截读写)、快照沙箱(静态快照还原)、globals配置(只读注入)和插件机制(生命周期接管)实现多维度隔离。

javascript 中全局作用域怎么在微前端架构中通过 sandbox 沙箱隔离

微前端中,全局作用域隔离的核心是切断子应用对真实 window 的直接读写,让每个子应用运行在“看似有全局环境、实则互不干扰”的独立上下文中。qiankun 默认通过沙箱(Sandbox)实现这一点,关键不在消灭全局作用域,而在于重定向和拦截。

Proxy 沙箱:默认且主流的动态隔离方式

它为每个子应用创建一个 fakeWindow 代理对象,所有 JS 执行时的 this 和全局引用(如 console、fetch、localStorage)都指向这个代理,而非真实 window:

  • 读取(get):先查 fakeWindow 本地是否有该属性;没有则委托给真实 window(只读访问主应用能力)
  • 写入(set):只写入 fakeWindow,真实 window 完全不受影响
  • 子应用挂载时激活代理,卸载时释放引用,多个子应用可并行运行,彼此的 window.xxx = 1 互不可见

快照沙箱:兼容性兜底的静态隔离方式

当浏览器不支持 Proxy 或配置 singleton: false 时启用。它不拦截操作,而是靠“时间切片”管理状态:

java-api-doc-generator
java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码,自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载
  • 子应用激活前,遍历并保存当前 window 所有属性快照
  • 子应用运行期间自由修改 window(如挂载 window.MyLib)
  • 子应用卸载时,还原快照值,并清理新增属性
  • 仅适用于单实例场景——若两个子应用同时运行,后激活的会覆盖前者的快照,导致状态错乱

globals 配置:安全注入只读全局变量

这是沙箱之上的轻量扩展,用于向子应用提供主应用侧可控的上下文,不破坏隔离原则:

  • 普通值(如 tenantId: 'acme')会作为只读全局变量注入子应用的执行环境
  • 带描述符的对象(如含 value、configurable)会被按 Object.defineProperty 方式定义,可设为不可写、不可枚举
  • 避免误判:若业务对象本身含 writable 等字段,必须用 { value: obj } 显式包裹

插件机制(plugins):接管更复杂的隔离需求

当需要在沙箱生命周期中注入副作用(如监听、定时器、DOM 事件绑定)或重建状态时,使用插件:

  • 插件需实现 init、patch(激活)、restore(失活)方法
  • 例如:拦截并重定向子应用对 document.cookie 的访问,或为每个子应用维护独立的 localStorage 分区
  • 比 globals 更重,但能应对多次挂载/卸载、状态持久化等复杂场景

Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2703

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

5863

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6830

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

6558

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

943

5

js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

2023.06.20

5306

5

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

2023.07.04

1309

3

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

2023.07.04

5244

6

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

2023.09.01

1000

4

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.3万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.7万人学习