微前端样式隔离、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.mzph.cn/news/238765.shtml

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

相关文章

Hive-high Avaliabl

hive—high Avaliable ​ hive的搭建方式有三种,分别是 ​ 1、Local/Embedded Metastore Database (Derby) ​ 2、Remote Metastore Database ​ 3、Remote Metastore Server ​ 一般情况下,我们在学习的时候直接使用hive –service metastore的方式…

FreeRTOS之二值信号量(实践)

信号量相当于一个标志,实现对资源多少的管理。 比如停车场空位的数量。 这里使用的是二值信号量,其队列长度为1,只有空或满两种状态。 1、步骤: 1.1、创建信号量 1.2、释放信号量 1.3、获取信号量 注:若想深入还…

《深入理解计算机系统》学习笔记 - 第七课 - 机器级别的程序三

Lecture 07 Machine Level Programming III Procedures 机器级别的程序三 文章目录 Lecture 07 Machine Level Programming III Procedures 机器级别的程序三概述程序机制 栈结构栈说明栈定义推入数据弹出数据 调用控制代码示例程序控制流程%rip 传递数据ABI 标准示例 管理局部…

LangChain 29 调试Debugging 详细信息verbose

LangChain系列文章 LangChain 实现给动物取名字,LangChain 2模块化prompt template并用streamlit生成网站 实现给动物取名字LangChain 3使用Agent访问Wikipedia和llm-math计算狗的平均年龄LangChain 4用向量数据库Faiss存储,读取YouTube的视频文本搜索I…

计算机msvcp140.dll丢失的多种解决方法,哪种更值得推荐

在使用电脑进行工作,娱乐的时候,我们可能会遇到一些错误提示,其中之一就是“msvcp140.dll丢失”,这个问题可能会导致某些应用程序无法正常运行。msvcp140.dll是微软Visual C 2015运行库中的一个动态链接库文件,全名为M…

MyBatis的延迟加载!!!

首先:MyBatis的关联查询!!!(一对一、一对多、多对多)-CSDN博客以这个项目为基础。 1.在UserMapper接口中创建一个方法: package com.by.mapper;import com.by.pojo.User;import java.util.Lis…

STM32的以太网外设+PHY(LAN8720)使用详解(5):MAC及DMA配置

0 工具准备 1.野火 stm32f407霸天虎开发板 2.LAN8720数据手册 3.STM32F4xx中文参考手册1 MAC及DMA配置 1.1 使能ETH时钟 stm32的ETH外设挂载在AHB1总线上,位于RCC_AHB1ENR的bit25-bit27: 相关语句如下: RCC_AHB1PeriphClockCmd(RCC_AHB1…

家政上门服务系统|上门服务系统让家政服务更便捷

家政上门服务系统搭建的目的是为了让用户在家政服务的过程中能够更加轻松、便捷地完成各项服务需求。我们的系统集成了多项先进功能,使得用户无需再花费时间和精力去寻找合适的服务员工。通过系统,用户只需在手机或者电脑上输入相关需求,系统…

突破性能瓶颈:使用Asyncio构建高并发Python应用程序

是一种处理多个任务同时执行的编程方式,在Python中,asyncio是一种用于实现异步编程的强大工具。asyncio基于协程(coroutine)的概念,能够高效地处理I/O密集型任务。本文将介绍asyncio的基本原理和使用方法。 为啥需要a…

万界星空开源MES/注塑MES/开源注塑MES/免费MES/MES源码

一、系统概述: 万界星空科技免费MES、开源MES、商业开源MES、市面上最好的开源MES、MES源代码、适合二开的开源MES、好看的数据大屏、功能齐全开源mes. 1.万界星空开源MES制造执行系统的Java开源版本。 开源mes系统包括系统管理,车间基础数据管理&…

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之TextInput输入框组件

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之TextInput输入框组件 一、操作环境 操作系统: Windows 10 专业版 IDE:DevEco Studio 3.1 SDK:HarmonyOS 3.1 二、TextInput 接口 TextInput(value?:{placeholder?: ResourceStr, tex…

SpringSecurity深度解析与实践(2)

目录 引言1.Springboot结合SpringSecurity用户认证流程1.1 配置pom文件1.2.配置application.yml 2.自定义MD5加密3.BCryptPasswordEncoder密码编码器4.RememberMe记住我的实现5.CSRF防御5.1.什么是CSRF 引言 上篇网址 1.Springboot结合SpringSecurity用户认证流程 1.1 配置p…

过采样技术基本原理

本文介绍过采样技术基本原理。 过采样技术在ADC信号采集过程中使用还是比较多的。某些使用场景下,对采样速度要求并不是那么高(或ADC采样速度过剩),但是想要获取较高的分辨率,就会用到这种技术,如针对温度…

【爬虫软件】孔夫子二手书采集

项目演示 孔网爬取图书信息 目录结构 [ |-- api-ms-win-core-synch-l1-2-0.dll, |-- api-ms-win-core-sysinfo-l1-1-0.dll, |-- api-ms-win-core-timezone-l1-1-0.dll, |-- api-ms-win-core-util-l1-1-0.dll, |-- api-ms-win-crt-conio-l1-1-0.dll, |-- api…

表格实现合并单元格

实现的效果 一、列合并 此需求的列合并比较简单, 直接使用el-table-column包括即可 <el-table-column align"center" sortable label"目标"><el-table-column prop"target1" sortable label"预设目标" /><el-table-c…

如何在Linux下搭建接口自动化测试平台

我们今天来学习一下在Linux下如何搭建基于HttpRunner开发的接口自动化测试平台吧&#xff01; 需要在Linux上提前准备的环境&#xff08;下面是本人搭建时的环境&#xff09;&#xff1a; 1&#xff0c;Python 3.6.8 2&#xff0c;MySQL 5.7 一&#xff1a;下载HttpRunner…

JMeter---JSON提取器

JMeter的JSON提取器是一个用于从JSON响应中提取数据的元件。它可以从JSON响应中提取特定字段的值&#xff0c;并将这些值用于后续的测试步骤。 使用JSON提取器的步骤如下&#xff1a; 添加一个HTTP请求&#xff0c;用于获取包含JSON响应的数据。 在HTTP请求之后添加一个JSON提…

JavaScript高级 构造函数与原型篇

构造函数与原型 1、构造函数 构造函数是一种特殊的函数&#xff0c;主要用来初始化对象&#xff0c;即为对象成员变量赋初始值&#xff0c;它总与new一起使用。我们可以把对象中一些公共的属性和方法抽取出来&#xff0c;然后封装到这个函数里面。 // 定义学生构造函数func…

面试遇到了接口分析和测试用例分析题,该如何下手?

只要有软件产品的公司百分之九十以上都会做接口测试&#xff0c;要做接口测试的公司那是少不了接口测试工程师的&#xff0c;接口测试工程师相对于其他的职位又比较轻松并且容易胜任。如果你想从事接口测试的工作那就少不了对接口进行分析&#xff0c;同时也会对测试用例进行研…

软件测试十大必问面试题(附答案和解析)

01 介绍之前负责的项目 参考答案&#xff1a;先大概描述一下这个项目是做什么的&#xff08;主要功能&#xff09;&#xff0c;包括哪些模块&#xff0c;是什么架构的&#xff08;B/S、C/S、移动端&#xff1f;&#xff09;&#xff0c;你在其中负责哪些模块的测试。期间经历了…