03解决隔离的方案

子应用之间样式隔离:
  • Dynamic StyleSheet  动态样式表,当应用切换时移除老应用样式,添加对应的子应用新样式
 
主应用和子应用之间的样式隔离:
  • BEM(Block Element Modifier) 约定项目前缀,也就是每个子应用有自己独立的样式前缀
  • CSS-Modules 打包时生成不冲突的选择器名 ,这个比较常用,比较主流
  • Shadow DOM 真正意义上的隔离   qiankun中使用的方案
  • css-in-js  以前老的方案,不建议使用了,不太好管理
 
 
            
  css-in-js
 
 
注:这个是dom的api
注:这个影子会划分一个区域,这个区域外界是访问不到的,外界的样式是影响不到影子划分的区域中的
注:但是它有一个缺陷,就是挂到body上会出现问题
注:shadow DOM可以实现真正的隔离机制
 
JS沙箱机制
背景:如果我刚开始加载A应用,在window上挂载了一个a变量,那么我在加载B应用,这个a变量也会出现在window上,全局被污染了
 
沙箱:创造一个干净的环境给这个子应用使用,当切换时,可以选择丢弃属性和恢复属性
 
JS沙箱实现方式:
  • 快照沙箱,在应用沙箱挂载或卸载时记录快照,在切换时依据快照恢复环境,这也是qiankun的实现方式
  • proxy
 
快照沙箱
  • 激活时将当前window属性进行快照处理
  • 失活时将快照中的内容和当前window属性对比
  • 如果属性发生变化保存到modifyPropsMap中,并用快照还原window属性
  • 再次激活时,再次进行快照,并用上次修改的结果还原window
 
 
测试:
 
 
注:快照沙箱只能针对单实例应用场景,如果是多个实例同时挂载的情况则无法解决,只能通过proxy代理沙箱来实现
 
Proxy代理沙箱
 
注:每个应用都创建一个proxy来代理window,好处是每个应用都是相对独立,不需要直接更改全局window属性
 
陌生人,愿你永不迷失自己,心中永远有梦去追逐。 ---随笔签名写于2020.1.3 00:28:00 博主VX:stf569318425
原文地址:https://www.cnblogs.com/tengfeiS/p/15062319.html