微前端样式隔离、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。
在这里插入图片描述
在这里插入图片描述
为了避免冲突,主子应用可以人为做隔离
在这里插入图片描述
为了避免溢出,子应用卸载的时候,可以做一些合理化的移除
在这里插入图片描述
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

c语言易错题之数据类型变换

1.题目 #include<stdio.h> int main() {int arr[]{1,2,3,4,5};short*p (short*)arr;int i 0;for(i0;i<4;i){*(pi)0;}for(i0;i<5;i){printf("%d ",arr[i];}return 0; }2.解析 这道题主要容易错在&#xff0c;大家会以为通过指针赋值的时候&#xff0c;…

pickle反序列化

文章目录 基础知识pickle简介可序列化对象object.__reduce__() 函数 pickle过程详细解读opcode简介pickletools 漏洞利用利用思路如何手写opcode 工具pker实战例题[MTCTF 2022]easypickle 基础知识 pickle简介 与PHP类似&#xff0c;python也有序列化功能以长期储存内存中的数…

docusaurus简介及使用心得

docusaurus简介 Docusaurus 是 Facebook 专门为开源项目开发者提供的一款易于维护的静态网站创建工具&#xff0c;使用 Markdown 即可更新网站。构建一个带有主页、文档、API、帮助以及博客页面的静态网站&#xff0c;只需5分钟。 同类竞品还有vuepress&#xff0c;docusaurus…

基于Linux下gcc学习C/C++——编译过程

前提&#xff1a;WSL2&#xff08;Ubuntu&#xff09;、gcc编译器。gcc安装命令&#xff1a; sudo apt-get install gcc 查看gcc版本&#xff1a; 目录 1、编译过程 1.1、预处理 1.2、编译与汇编 1.3、链接 2、gcc实验 2.1、预处理 2.2、编译 2.3、汇编 2.4、链接 1、…

Win系统修改Nginx配置结合内网穿透实现远程访问多个Web站点

文章目录 1. 下载windows版Nginx2. 配置Nginx3. 测试局域网访问4. cpolar内网穿透5. 测试公网访问6. 配置固定二级子域名7. 测试访问公网固定二级子域名 1. 下载windows版Nginx 进入官方网站(http://nginx.org/en/download.html)下载windows版的nginx 下载好后解压进入nginx目…

[笔记]netty随笔

记录使用过程中偶然发现的一些关键逻辑。先做记录&#xff0c;以后netty知识有一定体系再做整理 childGroup 服务器中有俩group&#xff0c;一个是parentGroup&#xff0c;负责处理链接请求&#xff0c;一个是childGroup&#xff0c;负责业务逻辑。 channelActive是在childG…

Spring中你一定要知道的@PostConstruct/@PreDestroy

文章目录 功能源码解析执行 功能 Spring中存在很多回调&#xff0c;但是执行他们的时机都不相同&#xff0c;也许大家用的最多的是InitializingBean.afterPropertiesSet&#xff0c;这个方法的作用如名称一样&#xff0c;是bean初始化后执行的一个回调操作&#xff0c;而PostC…

C语言学习NO.9-指针(一)内存和地址,指针变量和地址,指针变类型的意义,const修饰指针,指针运算,野指针,assret断言,指针的使用和传址调用

指针是什么&#xff1f; 指针是什么&#xff1f; 指针理解的2个要点&#xff1a; 1.指针是内存中一个最小单元的编号&#xff0c;也就是地址&#xff1b; 2.平时口语中说的指针&#xff0c;通常指的是指针变量&#xff0c;是用来存放内存地址的变量。 总结&#xff1a;指针就是…

MySQL中CASE when 实战

CASE 语法 CASEWHEN condition1 THEN result1WHEN condition2 THEN result2WHEN conditionN THEN resultNELSE result END; 将表中的内容转换为右边的形式&#xff1a; 1、创建表&#xff0c;创建数据 CREATE TABLEchapter10_7 (order_id VARCHAR(255) NULL,price VARCHAR(25…

手写题 - 实现一个带并发限制的异步调度器

题目 实现一个带并发限制的异步调度器 Scheduler&#xff0c;保证同时运行的任务最多有N个。 完善下面代码中的 Scheduler 类&#xff0c;使得以下程序能正确输出&#xff1a;class Scheduler {add(promiseCreator) { ... }// ... }const timeout (time) > new Promise(re…

从零学算法5

5.给你一个字符串 s&#xff0c;找到 s 中最长的回文子串。 如果字符串的反序与原始字符串相同&#xff0c;则该字符串称为回文字符串。 示例 1&#xff1a; 输入&#xff1a;s “babad” 输出&#xff1a;“bab” 解释&#xff1a;“aba” 同样是符合题意的答案。 示例 2&…

Vue中为什么data属性是一个函数而不是一个对象?(看完就会了)

文章目录 一、实例和组件定义data的区别二、组件data定义函数与对象的区别三、原理分析四、结论 一、实例和组件定义data的区别 vue实例的时候定义data属性既可以是一个对象&#xff0c;也可以是一个函数 const app new Vue({el:"#app",// 对象格式data:{foo:&quo…

springboot学习笔记(五)

MybatisPlus进阶 1.MybatisPlus一对多查询 2.分页查询 1.MybatisPlus一对多查询 场景&#xff1a;我有一个表&#xff0c;里面填写的是用户的个人信息&#xff08;姓名&#xff0c;生日&#xff0c;密码&#xff0c;用户ID&#xff09;。我还有一个表填写的订单信息&#x…

Linux系统管理、服务器设置、安全、云数据中心

前言 「作者主页」&#xff1a;雪碧有白泡泡 「个人网站」&#xff1a;雪碧的个人网站 我们来快速了解liunx命令 文章目录 前言解析命令提示符linux的文件和目录文件和目录管理文件操作 进程管理命令系统管理网络管理 书籍推荐 本文以服务器最常用的CentOS为例 解析命令提示…

图片怎么转文字?这几个图片提取文字方法教会你!

在数字时代&#xff0c;我们每天都与大量的图片、文本信息打交道。当我们需要从图片中提取文字时&#xff0c;传统的方式可能是手动输入或者借助某些付费工具&#xff0c;今天介绍这三个工具不仅易于使用&#xff0c;而且效果卓越&#xff0c;我只需上传图片&#xff0c;工具便…

uniapp地图开发(APP,H5)

uniapp地图开发&#xff08;APP&#xff0c;H5&#xff09; 背景实现页面实现功能实现注意事项 尾巴 背景 最近项目中需要使用地图相关功能&#xff0c;需要用到聚合&#xff0c;marker拖拽&#xff0c;自定义marker显示内容&#xff0c;根据角色不同maker显示不同图标等功能。…

Nacos教程

常见的微服务架构&#xff1a; 1. dubbo: zookeeper dubbo SpringMVC/SpringBoot 配套 通信方式&#xff1a;rpc 注册中心&#xff1a;zookeeper / redis 2.SpringCloud &#xff1a; 全家桶 轻松嵌入第三方组件 (Netflix) 配套 通信方式&#xff1a;http restful 注册中心…

【MATLAB】史上最全的13种数据拟合算法全家桶

有意向获取代码&#xff0c;请转文末观看代码获取方式~ 1 【MATLAB】傅里叶级数拟合算法 傅里叶级数拟合算法是一种强大而灵活的数学方法&#xff0c;可以将复杂的函数拆解成多个简单的正弦和余弦函数的和。通过求解函数中的系数&#xff0c;我们可以用有限项傅里叶级数来拟合…

类和对象(下篇)

再谈构造函数 构造函数体赋值 在之前的学习中我们知道&#xff0c;在创建一个对象时&#xff0c;我们的编译器就会自动调用构造函数将对象初始化&#xff0c;给对象中各个成员变量一个合适的初始值。 例如&#xff1a; class Date { public:Date(int year, int month, int d…

Java文件流大家族(通俗易懂,学习推荐版,很详细)——操作文件本身和文件中的数据

1.File&#xff08;操作文件本身&#xff09; 1.定义 目录 2.常用方法 3.路径引用符 可以用/或者\\分隔路径 还可以用File.separator分隔路径&#xff0c;会根据不同系统使用啥分隔符。 4.绝对路径、相对路径及桌面路径表示 桌面路径为&#xff1a; 我电脑的用户名为X 5.示例…