微前端样式隔离、sessionStorage、localStorage隔离

1、样式隔离

前端样式不隔离,会产生样式冲突的问题,这个点在qiankun也存在
子应用1修改一个样式

button {background: red!important;
}

其它应用也会受到影响
在这里插入图片描述

  • qiankun的css隔离方案(shadow dom)
    shadow dom 是 web components技术的一部分,其实就是一个 attachShadow 的 API
    在这里插入图片描述
    web components 添加内容的时候,不直接 appendChild,而是先 attach 个 shadow,然后再在下面 appendChild
    在这里插入图片描述

  • qiankun开启strictStyleIsolation
    在这里插入图片描述
    开启 strictStyleIsolation 这个属性后:
    1、外界的样式无法影响shadow dom内部;
    2、内部的样式也无法影响shadow dom外部;
    这样会派生一个很尴尬的问题:挂载到body上的dom的样式,就会全部乱了,比如modal,tootip,selection的dropdown。
    此外,项目中的一些全局的公共样式也无法用了
    在这里插入图片描述

  • qiankun开启experimentalStyleIsolation
    这个方案是qiankun借鉴了vue scoped css的思路,也就是对所有的样式加一层data-qiankun="应用名"的选择器来隔离
    这样的话,父应用样式,可以作用到子应用,比如在主应用全局写个样式,可以作用到子应用。但是子应用写个样式,无法影响到主应用,或者其它子应用。所以挂在body的弹框还是加不了样式,还是无法从子应用的角度为外部添加样式。
    当然,有同学可能说,加个global声明不久ok了?问题就在这里,qiankun没实现这个功能。
    在这里插入图片描述
    在这里插入图片描述

  • 微前端样式隔离
    1、子应用开启模块化
    vue一般用scoped
    在这里插入图片描述
    react一般用css-loader的modules true方案
    在这里插入图片描述
    子应用模块化之后,全局样式怎么做?这其实变成了代码规范的问题。
    组件内严禁使用global提升样式级别
    在这里插入图片描述
    子应用尽量不写全局样式,有主应用来维护
    大多数的微前端框架,其实子应用不会单独启动,一般都会运行在主应用环境内。
    在这里插入图片描述
    在这里插入图片描述
    子应用必须写全局样式时,做好命名空间
    在这里插入图片描述
    当然了,从自动化角度,这些可以通过自定义eslint等样式,进行代码自动化扫描,来避免此类规范问题产生

2、sessionStorage、localStorage隔离

微前端qiankun本身没有针对sessionStorage、localStorage做隔离。
微前端应用,如果用到持久化方案的时候,主子应用其实是在操作同一空间的sessionStorage、localStorage。
在这里插入图片描述
在这里插入图片描述
为了避免冲突,主子应用可以人为做隔离
在这里插入图片描述
为了避免溢出,子应用卸载的时候,可以做一些合理化的移除
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

华为 1+X 网络系统运维与建设中级实操模拟题

目 实验拓扑 配置中的注意事项:(针对新手) 实验目的 实验要求 实验步骤 一、搭建实验拓扑 二、配置主机名称 三、配置链路聚合 四、VLAN 配置 五、配置 RSTP 协议 六、配置 IP 地址 七、配置 VRRP 协议。 八、配置 OSPF 协议 九…

C语言中常用的sscanf函数

文章目录 1. 接受全部参数:2、分辨数字和字符3. 数字和字符一起会默认是字符4. 同时接收多个变量5. 指定长度的集合操作6. 排除部分字符 sscanf()定义于头文件stdio.h。sscanf()会将参数str的字符串根据参数format字符串来转换并格式化数据。格式转换形式请参考scan…

计算机网络——计算机网络的概述(一)

前言: 面对马上的期末考试,也为了以后找工作,需要掌握更多的知识,而且我们现实生活中也已经离不开计算机,更离不开计算机网络,今天开始我们就对计算机网络的知识进行一个简单的学习与记录。 目录 一、什么…

OpenCV4 工业缺陷检测的六种方法

文章目录 机器视觉缺陷检测工业上常见缺陷检测方法方法一:基于简单二值图像分析实现划痕提取,效果如下:方法二:复杂背景下的图像缺陷分析,基于频域增强的方法实现缺陷检测,运行截图:方法三&…

【C语言进阶篇】你真的了解预处理吗? 预处理详细解析

🎬 鸽芷咕:个人主页 🔥 个人专栏:《C语言初阶篇》 《C语言进阶篇》 ⛺️生活的理想,就是为了理想的生活! 文章目录 一、预定义符号的含义二、#define2.1 #define定义标识符2.2 在define定义标识符的注意事项 三、#define 定义宏&…

Unity 问题 之 ScrollView ,LayoutGroup,ContentSizeFitter 一起使用时,动态变化时无法及时刷新更新适配界面的问题

Unity 问题 之 ScrollView ,LayoutGroup,ContentSizeFitter 一起使用时,动态变化时无法及时刷新更新适配界面的问题 目录 Unity 问题 之 ScrollView ,LayoutGroup,ContentSizeFitter 一起使用时,动态变化时无法及时刷新更新适配界面的问题 一、简单介绍…

代码图形注释自动生成(通过文字图像)

0. 简介 大家在学(CTRL)习(C)别人代码的时候,看到别人的代码程序,在日志中有很多很酷的代码注释,或者是有一些图形化注释方便理解。之前本人以为都是一个个手敲出来的。然后在网上一番搜索&…

Unity头发飘动效果

Unity头发飘动 介绍动作做头发飘动头发骨骼绑定模拟物理组件 UnityChan插件下载UnityChan具体用法确定人物是否绑定好骨骼节点(要做的部位比如头发等)给人物添加SpringManager骨骼管理器给骨骼节点添加SpringBone这里给每个头发骨骼都添加上SpringBone。…

【Python必做100题】之第二十五题(统计字符)

题目:输入一行字符,分别统计出其中英文字母、空格、数字和其他字符的个数 代码如下: string input("请输入字符串:")char 0 number 0 space 0 other 0for i in string:if i.isalpha():char 1elif i.isdigit():number 1eli…

springboot集成springdoc-openapi(模拟前端请求)

目录 描述---痛点 Springfox对比springdoc-openapi 1. 成熟度和维护性: 2. 依赖和配置: 3. 注解和使用方式: 4. 特性和扩展性: 应用目录结构 pom文件 新增测试controller StaffController YUserController 启动测试看下…

亚马逊品牌分析ABA功能有哪些?亚马逊选品的量化标准有哪些?——站斧浏览器

亚马逊品牌分析ABA功能有哪些? 1、品牌市场份额(Share of Voice) ABA提供了品牌在特定类别中市场份额的详细数据。这一模块帮助品牌所有者准确评估其品牌在整个市场中的竞争地位和表现。通过了解市场份额,品牌方可以制定更具针对…

Guava的TypeToken在泛型编程中的应用

第1章:引言 在Java世界里,泛型是个相当棒的概念,能让代码更加灵活和类型安全。但是,泛型也带来了一些挑战,特别是当涉及到类型擦除时。这就是TypeToken大显身手的时候! 作为Java程序员的咱们,…