乾坤js隔离

乾坤,作为一款微前端领域的知名框架,其建立在single-spa基础上。相较于single-spa,乾坤做了两件重要的事情,其一是加载资源,第二是进行资源隔离。而资源隔离又分为Js资源隔离和css资源隔离。

我们把Js隔离机制常常称作沙箱,事实上,乾坤有三种Js隔离机制,并且在源代码中也是以 SnapshotSandbox、LegacySandbox、ProxySandbox三个类名来指代三种不同的隔离机制。下文我们统一以快照沙箱、支持单应用的代理沙箱、支持多应用的代理沙箱,来代表这三种不同的Js隔离机制。

1、快照沙箱SnapshotSandbox:有个缺点,就是需要遍历window上的所有属性,性能较差。
2、LegacySandbox,可以实现和快照沙箱一样的功能,但是却性能更好,和SnapshotSandbox一样,由于会污染全局的window,LegacySandbox也仅仅允许页面同时运行一个微应用,所以我们也称LegacySandbox为支持单应用的代理沙箱。
3、ProxySandbox,可以支持一个页面运行多个微应用,因此我们称ProxySandbox为支持多应用的代理沙箱。
LegacySandbox在未来应该会消失,因为LegacySandbox可以做的事情,ProxySandbox都可以做,而SanpsshotSandbox因为向下兼容的原因反而会和ProxySandbox长期并存。下面我们就编码实现这三种沙箱机制的核心逻辑。

1、快照沙箱-极简版

class SnapshotSandBox{windowSnapshot = {};modifyPropsMap = {};active(){for(const prop in window){this.windowSnapshot[prop] = window[prop];}Object.keys(this.modifyPropsMap).forEach(prop=>{window[prop] = this.modifyPropsMap[prop];});}inactive(){for(const prop in window){if(window[prop] !== this.windowSnapshot[prop]){this.modifyPropsMap[prop] = window[prop];window[prop] = this.windowSnapshot[prop];}}}
}
// 验证:
let snapshotSandBox = new SnapshotSandBox();
snapshotSandBox.active();
window.city = 'Beijing';
console.log("window.city-01:", window.city);
snapshotSandBox.inactive();
console.log("window.city-02:", window.city);
snapshotSandBox.active();
console.log("window.city-03:", window.city);
snapshotSandBox.inactive();//输出:
//window.city-01: Beijing
//window.city-02: undefined
//window.city-03: Beijing

从上面的代码可以看出,快照沙箱的核心逻辑很简单,就是在激活沙箱和沙箱失活的时候各做两件事情。

注:沙箱激活 就是此时我们的微应用处于运行中,这个阶段有可能对window上的属性进行操作改变;沙箱失活 就是此时我们的微应用已经停止了对window的影响

在沙箱激活的时候:

  • 记录window当时的状态(我们把这个状态称之为快照,也就是快照沙箱这个名称的来源);

  • 恢复上一次沙箱失活时记录的沙箱运行过程中对window做的状态改变,也就是上一次沙箱激活后对window做了哪些改变,现在也保持一样的改变。

在沙箱失活的时候:

  • 记录window上有哪些状态发生了变化(沙箱自激活开始,到失活的这段时间);

  • 清除沙箱在激活之后在window上改变的状态,从代码可以看出,就是让window此时的属性状态和刚激活时候的window的属性状态进行对比,不同的属性状态就以快照为准,恢复到未改变之前的状态。

从上面可以看出,快照沙箱存在两个重要的问题:

  • 会改变全局window的属性,如果同时运行多个微应用,多个应用同时改写window上的属性,势必会出现状态混乱,这也就是为什么快照沙箱无法支持多各微应用同时运行的原因。关于这个问题,下文中支持多应用的代理沙箱可以很好的解决这个问题;

  • 会通过for(prop in window){}的方式来遍历window上的所有属性,window属性众多,这其实是一件很耗费性能的事情。关于这个问题支持单应用的代理沙箱支持多应用的代理沙箱都可以规避。

2、支持单应用的代理沙箱-极简版

class LegacySandBox{addedPropsMapInSandbox = new Map();modifiedPropsOriginalValueMapInSandbox = new Map();currentUpdatedPropsValueMap = new Map();proxyWindow;setWindowProp(prop, value, toDelete = false){if(value === undefined && toDelete){delete window[prop];}else{window[prop] = value;}}active(){this.currentUpdatedPropsValueMap.forEach((value, prop)=>this.setWindowProp(prop, value));}inactive(){this.modifiedPropsOriginalValueMapInSandbox.forEach((value, prop)=>this.setWindowProp(prop, value));this.addedPropsMapInSandbox.forEach((_, prop)=>this.setWindowProp(prop, undefined, true));}constructor(){const fakeWindow = Object.create(null);this.proxyWindow = new Proxy(fakeWindow,{set:(target, prop, value, receiver)=>{const originalVal = window[prop];if(!window.hasOwnProperty(prop)){this.addedPropsMapInSandbox.set(prop, value);}else if(!this.modifiedPropsOriginalValueMapInSandbox.has(prop)){this.modifiedPropsOriginalValueMapInSandbox.set(prop, originalVal);}this.currentUpdatedPropsValueMap.set(prop, value);window[prop] = value;},get:(target, prop, receiver)=>{return target[prop];}});}
}
// 验证:
let legacySandBox = new LegacySandBox();
legacySandBox.active();
legacySandBox.proxyWindow.city = 'Beijing';
console.log('window.city-01:', window.city);
legacySandBox.inactive();
console.log('window.city-02:', window.city);
legacySandBox.active();
console.log('window.city-03:', window.city);
legacySandBox.inactive();
// 输出:
// window.city-01: Beijing
// window.city-02: undefined
// window.city-03: Beijing

从上面的代码可以看出,其实现的功能和快照沙箱是一模一样的,不同的是,通过三个变量来记住沙箱激活后window发生变化过的所有属性,这样在后续的状态还原时候就不再需要遍历window的所有属性来进行对比,提升了程序运行的性能。但是这仍然改变不了这种机制仍然污染了window的状态的事实,因此也就无法承担起同时支持多个微应用运行的任务。

3、支持多应用的代理沙箱-极简版

class ProxySandBox{proxyWindow;isRunning = false;active(){this.isRunning = true;}inactive(){this.isRunning = false;}constructor(){const fakeWindow = Object.create(null);this.proxyWindow = new Proxy(fakeWindow,{set:(target, prop, value, receiver)=>{if(this.isRunning){target[prop] = value;}},get:(target, prop, receiver)=>{return  prop in target ? target[prop] : window[prop];}});}
}
// 验证:
let proxySandBox1 = new ProxySandBox();
let proxySandBox2 = new ProxySandBox();
proxySandBox1.active();
proxySandBox2.active();
proxySandBox1.proxyWindow.city = 'Beijing';
proxySandBox2.proxyWindow.city = 'Shanghai';
console.log('active:proxySandBox1:window.city:', proxySandBox1.proxyWindow.city);
console.log('active:proxySandBox2:window.city:', proxySandBox2.proxyWindow.city);
console.log('window:window.city:', window.city);
proxySandBox1.inactive();
proxySandBox2.inactive();
console.log('inactive:proxySandBox1:window.city:', proxySandBox1.proxyWindow.city);
console.log('inactive:proxySandBox2:window.city:', proxySandBox2.proxyWindow.city);
console.log('window:window.city:', window.city);
// 输出:
// active:proxySandBox1:window.city: Beijing
// active:proxySandBox2:window.city: Shanghai
// window:window.city: undefined
// inactive:proxySandBox1:window.city: Beijing
// inactive:proxySandBox2:window.city: Shanghai
// window:window.city: undefined

从上面的代码可以发现,ProxySandbox,完全不存在状态恢复的逻辑,同时也不需要记录属性值的变化,因为所有的变化都是沙箱内部的变化,和window没有关系,window上的属性至始至终都没有受到过影响。我们可能会问,ProxySandbox已经这么好了,性能优良还支持多个微应用同时运行,那自然也支持单个微应用运行,那LegacySandbox存在还有什么意义呢,这个问题问得很好,其实本身在未来存在的意义也不大了,只不过是因为历史原因还在服役罢了,从Legacy这个单词就已经能推断出LegacySandbox在乾坤中的位置。我们可能还会继续问,那SnapshotSandbox存在还有什么意义呢,这个还真有不小作用,Proxy是新ES6的新事物,低版本浏览器无法兼容所以SnapshotSandbox还会长期存在。虽然这里极简版本逻辑很少,但是由于ProxySandbox要支持多个微应用运行,里面的逻辑会SnapshotsSandbox、LegacySandbox的都要丰富一些。

其实到了这里,如果读者朋友已经理解了上面的思路,就可以说已经理解了乾坤的Js隔离机制。

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

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

相关文章

前端常用网址总结

https://blog.csdn.net/duanhy_love/article/details/110007515 在线CSS编辑 http://tool.alixixi.com/csseditor/ http://c.biancheng.net/css3/position.html https://www.runoob.com/css/css-positioning.html https://cssgrid-generator.netlify.app/ 开发常用组件网…

C#中获取代码执行时间的方法

在C#中,您可以使用System.Diagnostics.Stopwatch类来测量代码执行时间。以下是一个简单的示例: using System.Diagnostics; public static double MeasureExecutionTime(Action action) {Stopwatch stopwatch new Stopwatch();stopwatch.Start();actio…

SpringMVC(三)获取请求参数

1.1通过ServletAPI获取 SpringMVC封装的就是原生的servlet 我们进行测试如下所示: package com.rgf.controller.service;import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping;import javax.servlet.…

学习MAVEN

MAVEN的详细介绍和作用、意义 好的,小朋友们,我们今天来聊聊一个非常神奇的工具箱,它的名字叫做Maven! 🌟 1. **神奇的工具箱Maven**: Maven就像是一个神奇的工具箱🧰,它可以帮助大人们把他们的电脑工…

P2 B+树索引

文章目录 Task1 B树页B树页B树内部结点B树叶子结点 Task2 B树操作Task2 B树插入和搜索的单一值插入单一值搜索单一值 Task2 B树删除 Task3 叶子扫描的迭代器Task4 并行索引 Task1 B树页 B树页 实际上是每个B树页面的标题部分,包含叶子页面和内部页面共享的信息。 …

【Docker】Dockerfile常用指令

参考官方文档:https://docs.docker.com/engine/reference/builder/ Dockerfile常用指令 指令说明from基础镜像,当前镜像基于(依赖)哪个镜像maintainer镜像的维护者和邮箱run镜像构建时需要执行的命令workdir镜像的工作目录expos…

基于springboot实现基于Java的超市进销存系统项目【项目源码+论文说明】

基于springboot实现基于Java的超市进销存系统演示 摘要 随着信息化时代的到来,管理系统都趋向于智能化、系统化,超市进销存系统也不例外,但目前国内仍都使用人工管理,市场规模越来越大,同时信息量也越来越庞大&#x…

最详细STM32,cubeMX外部中断

这篇文章将详细介绍 cubeMX外部中断的配置,实现过程。 文章目录 前言一、外部中断的基础知识。二、cubeMX 配置外部中断三、自动生成的代码解析四、代码实现。总结 前言 实验开发板:STM32F103C8T6。所需软件:keil5 , cubeMX 。实…

09 创建型模式-建造者模式

1.建造者模式介绍: 建造者模式 (builder pattern), 也被称为生成器模式 , 是一种创建型设计模式 定义: 将一个复杂对象的构建与表示分离,使得同样的构建过程可以创建不 同的表示。 2.建造者模式要解决的问题 建造者模式可以将部件和其组装过程分开&am…

【Unity程序技巧】公共Update管理器

👨‍💻个人主页:元宇宙-秩沅 👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍💻 本文由 秩沅 原创 👨‍💻 收录于专栏:Uni…

Spring Boot中捕获异常错误信息并将其保存到数据库中

Spring Boot中捕获异常错误信息并将其保存到数据库中: 1.创建数据库表: 首先,您需要创建一个用于存储异常信息的数据库表。可以使用SQL脚本或者使用Hibernate实体类来创建表。以下是一个用于存储异常信息的表的示例SQL: CREATE TABLE erro…

【29】c++设计模式——>策略模式

策略模式 C中的策略模式(Strategy Pattern)是一种行为型设计模式,它允许在运行时选择算法的行为。策略模式通过将算法封装成独立的类,并且使它们可以互相替换,从而使得算法的变化独立于使用算法的客户端。 策略模式通…

图像语义分割 pytorch复现DeepLab v1图像分割网络详解以及pytorch复现(骨干网络基于VGG16、ResNet50、ResNet101)

图像语义分割 pytorch复现DeepLab v1图像分割网络详解以及pytorch复现(骨干网络基于VGG16、ResNet50、ResNet101) 背景介绍2、 网络结构详解2.1 LarFOV效果分析 2.2 DeepLab v1-LargeFOV 模型架构2.3 MSc(Multi-Scale,多尺度(预测…

vim 使用文档笔记

1. i:进入编辑模式 2. ESC:进入一般命令模式 3. h 或 ←:光标向左移动一个字符 4. j 或 ↓:光标向下移动一个字符 5. k 或 ↑:光标向上移动一个字符 6. l 或 →:光标向右移动一个字符 7. num&#xf…

Matlab论文插图绘制模板第122期—函数折线图(fplot)

本期分享的是函数折线图的绘制模板。​ 所谓函数折线图,就是将自定义线函数进行可视化表达​。 先来看一下成品效果: 特别提示:本期内容『数据代码』已上传资源群中,加群的朋友请自行下载。有需要的朋友可以关注同名公号【阿昆的…

【JavaEE】网络编程---TCP数据报套接字编程

一、TCP数据报套接字编程 1.1 ServerSocket API ServerSocket 是创建TCP服务端Socket的API ServerSocket 构造方法: ServerSocket 方法: 1.2 Socket API Socket 是客户端Socket,或服务端中接收到客户端建立连接(accept方法&…

el-table表格的一些操作-表格实现单选、多选

表格实现多选 <el-table:data"dataList"borderselection-change"handleSelectionChange">//多选框<el-table-column type"selection" width"55" align"center" /></el-table> handleSelectionChange(val…

浅谈兼容性测试的关键步骤

兼容性测试是确保应用程序在多样化的技术环境中正常运行的关键步骤。它有助于提高用户满意度&#xff0c;扩大市场覆盖范围&#xff0c;同时确保法规合规性。通过正确执行兼容性测试&#xff0c;企业可以确保其应用程序在各种平台上提供一致的卓越用户体验&#xff0c;从而增强…

#电子电器架构 —— 车载网关初入门

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 PS:小细节,本文字数7000+,详细描述了网关在车载框架中的具体性能设置。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 没有人关注你。也无需有人关注你。你必须承认自己的价值,你不能站在他…