微前端样式隔离、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.rhkb.cn/news/222855.html

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

相关文章

FCIS 2023网络安全创新大会-核心PPT资料下载

一、峰会简介 本次会议的主题是“AI大模型、人工智能与智能制造安全、攻击面管理与供应链安全”。 1、AI大模型 会议首先探讨了AI大模型在网络安全领域的应用。AI大模型是一种基于深度学习的模型,具有强大的特征提取和分类能力,可以用于检测和防御各种…

MFC 自定义压缩,解压缩工具

界面效果如下: 对外提供的接口如下: public: void setCallback(zp::Callback callback, void* param); bool open(const zp::String& path, bool readonly false); bool create(const zp::String& path, const zp::String& inputPath)…

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

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

STM32G4x FLASH 读写配置结构体(LL库下使用)

主要工作就是把HAL的超时用LL库延时替代,保留了中断擦写模式、轮询等待擦写,我已经验证了部分。 笔者用的芯片为STM32G473CBT6 128KB Flash,开环环境为CUBEMXMDK5.32,因为G4已经没有标准库了,笔者还是习惯使用标准库的…

Ubuntu 常用命令之 fdisk 命令用法介绍

📑Linux/Ubuntu 常用命令归类整理 fdisk 是一个用于处理磁盘分区的命令行工具,它在 Linux 系统中广泛使用。fdisk 命令可以创建、删除、更改、复制和显示硬盘分区,以及更改硬盘的分区 ID。 fdisk 命令的常用参数如下 -l:列出所…

threejs中修改鼠标cursor不生效的问题修复

需求: 当鼠标hover一个元素时,cursor为自定义的图标 问题描述: threejs中修改canvas的鼠标cursor为自定义的图标不生效。 问题原因: 引入了dragcontrols,查看dragControls的代码,可以看到代码中有对cur…

鸿蒙ArkTS语言介绍与TS基础语法

1、ArkTS介绍 ArkTS是HarmonyOS主力应用开发语言,它在TS基础上,匹配ArkUI框架,扩展了声明式UI、状态管理等响应的能力,让开发者以更简洁、更自然的方式开发跨端应用。 JS 是一种属于网络的高级脚本语言,已经被广泛用…

数学建模学习笔记-皮尔逊相关系数

内容:皮尔逊相关系数 一.概念:是一个和线性线关的相关性系数 1.协方差概念: 协方差受到量纲的影响因此需要剔除 2.相关性的误区 根据这个结论,我们在计算该系数之前需要确定是否为线性函数 二.相关性的计算 1.Matlab&#xff…

关于Triple DES(3DES)对称加密算法

一、引言 在网络安全领域,对称加密算法作为一种常见的加密手段,被广泛应用于保障数据传输的保密性和完整性。其中,DES(Data Encryption Standard)算法作为一种经典的对称加密算法,由IBM于1970年代开发&…

solidity 重入漏洞

目录 1. 重入漏洞的原理 2. 重入漏洞的场景 2.1 msg.sender.call 转账 2.2 修饰器中调用地址可控的函数 1. 重入漏洞的原理 重入漏洞产生的条件: 合约之间可以进行相互间的外部调用 恶意合约 B 调用了合约 A 中的 public funcA 函数,在函数 funcA…

jar混淆,防止反编译,Allatori工具混淆jar包

文章目录 Allatori工具简介下载解压配置config.xml注意事项 Allatori工具简介 官网地址:https://allatori.com/ Allatori不仅混淆了代码,还最大限度地减小了应用程序的大小,提高了速度,同时除了你和你的团队之外,任何人…

持续集成交付CICD:基于ArgoCD 的GitOps 自动化完成前端项目应用发布与回滚

目录 一、实验 1. 环境 2. K8S master节点部署Argo CD 3.基于ArgoCD 实现GitOps (同步部署文件) 4.基于ArgoCD 实现GitOps (同步HELM文件) 二、问题 1. ArgoCD 连接K8S集群状态为 Unknown 2.ArgoCD 创建application失败 …

小鹅通基于 TSE 云原生 API 网关的落地实践

导语 2023腾讯全球数字生态大会已于9月7-8日完美落幕,40专场活动展示了腾讯最新的前沿技术、核心产品、解决方案。 微服务与消息队列专场,我们邀请到了小鹅通的基础架构组负责人黄徐震为我们带来了《小鹅通基于 TSE 云原生网关的落地实践》的精彩演讲。…

【K8s】1# 使用kuboard-spray安装K8s集群

文章目录 搭建k8s集群1.推荐配置1.1.服务器配置1.2.软件版本 2.使用Kuboard-Spray安装k8s集群2.1.配置要求2.2.操作系统兼容性2.3.安装 Kuboard-Spray2.4.加载离线资源包2.5.规划并安装集群2.6.安装成功2.7.访问集群 3.涉及的命令3.1.linux 4.问题汇总Q1:启动离线集…

java八股jvm

JVM虚拟机篇-01-JVM介绍、运行流程_哔哩哔哩_bilibili 1.PC程序计数器 2.堆 3.虚拟机栈 4.方法区/永久代/元空间 5.直接内存 JVM虚拟机篇-06-JVM组成-你听过直接内存吗_哔哩哔哩_bilibili 6.双亲委派 从下往上找,有同名类优先使用上级加载器的,不用自…

anconda常用命令

一、基础指令说明 1、查看anconda版本号 conda --version 2、查看当前已有虚拟环境 conda env list 3、创建新环境 conda create -n classify python3.9 创建一个叫做classify的虚拟环境,其中python等于3.9 4、进入虚拟环境 activate classify 5、安装包 接下来…

微软官方镜像下载大全(windows iso 官方镜像)

原本只是想下一个Windows Server 2022中文版的镜像,后面发现要么就是慢得一批的某盘,要么就是磁力,我想直接下载简简单单,找了一圈没有找到。官网下载需要注册、登录乱七八糟,最终终于找到下载方法了,适用于…

DRF之引入

目录 一、web应用模式 【1】前后端混合开发 【2】前后端分离 二、API接口 三、接口测试工具:Postman 四、RESTful API规范 【1】什么是RESTful 【2】RESTful API的规范 2.1 数据的安全保障 2.2 接口特征表现 2.3 多数据版本共存 2.4 数据即是资源&#…

Ubuntu 常用命令之 top 命令用法介绍

📑Linux/Ubuntu 常用命令归类整理 top命令是Linux下常用的性能分析工具,可以实时动态地查看系统中各个进程的资源占用状况,类似于Windows的任务管理器。它可以显示系统总的和分区的CPU使用率、内存使用率、交换区使用率、系统负载、进程数、…

理解pom.xml中的parent标签

✅作者简介:大家好,我是Leo,热爱Java后端开发者,一个想要与大家共同进步的男人😉😉 🍎个人主页:Leo的博客 💞当前专栏: 循序渐进学SpringBoot ✨特色专栏: MySQL学习 🥭本文内容:理解pom.xml中的parent标签 📚个人知识库: Leo知识库,欢迎大家访问 1.前言…