当前位置: 首页 > java >正文

微前端架构核心要点对比

1. 样式隔离

常见的隔离方式有以下几种,还是根据自身业务来确定:

1.1. shadowDOM

目前相对来说使用最多的样式隔离机制。

但shadowDOM并不是银弹,由于子应用的样式作用域仅在 shadow 元素下,那么一旦子应用中出现运行时“翻墙”跑到外面构建 DOM 的场景,必定会导致构建出来的 DOM 无法应用于应用的样式的情况。比如:子应用里调用了 antd modal 组件,由于 modal 是动态挂载到 document.body 的,而 antd 的样式只在 shadow 这个作用域下生效,结果就是弹出框无法应用到 antd 的样式。解决的办法是把 antd 的样式上浮一层,丢到主应用的DOM上。

1.2. BEM、CSS Modules

1.2.1. BEM:Block Element Module命名约束

  • B:Block 一个独立的模块,一个本身就有意义的独立实体 比如:header、menu、container.

  • E:Element 元素,块的一部分但是自身没有独立的含义 比如:header title、container input.

  • M:Modifier 修饰符,块或者元素的一些状态或者属性标志 比如:small、checked.

模块:.Block
模块多单词:.Header-Block
模块_状态:.Block_Modifier
模块__子元素:.Block__Element
模块__子元素_状态:.Block__Element_Modifier
http://www.xdnf.cn/news/18591.html

相关文章:

  • C++ 使用最新 MySQL Connector/C++(X DevAPI)+ CMake 完整教程
  • 力扣 30 天 JavaScript 挑战 第38天 (第九题)学习了 语句表达式的区别 高级函数 promise async await 节流
  • 《P3623 [APIO2008] 免费道路》
  • Redis Set 类型详解:从基础命令到实战应用
  • git实战(8)git高阶命令分析【结合使用场景】
  • 本地Docker部署开源Web相册图库Piwigo与在线远程访问实战方案
  • 如何优雅解决 OpenCV 分段错误(Segfault):子进程隔离实战
  • pig框架导入总结
  • 动手学深度学习(pytorch版):第六章节—卷积神经网络(1)从全连接层到卷积
  • 新能源汽车热管理仿真:蒙特卡洛助力神经网络训练
  • Text2SQL、ChatBI简介
  • [Vid-LLM] 功能分类体系 | 视频如何被“观看“ | LLM的主要作用
  • Flink2.0学习笔记:使用HikariCP 自定义sink实现数据库连接池化
  • 一键部署开源 Coze Studio
  • 第三阶段数据库-9:循环,编号,游标,分页
  • 字节跳动开源Seed-OSS:36B参数模型以512K上下文与可控思考预算重新定义AI实用主义
  • [激光原理与应用-320]:结构设计 - Solidworks - 软件工具UI组织的核心概念
  • 解决散点图绘制算法单一导致的数据异常问题
  • STM32窗口看门狗(WWDG)深度解析:精准守护嵌入式系统的实时性
  • python学习DAY49打卡
  • SHAP分析+KOA-RIME开普勒结合霜冰算法双重优化BP神经网络+9种映射方法+新数据预测!机器学习可解释分析!
  • 【升级版】从零到一训练一个 0.6B 的 MoE 大语言模型
  • 云原生俱乐部-k8s知识点归纳(8)
  • day40-tomcat
  • k8s之 Pod 资源管理与 QoS
  • Angular初学者入门第三课——工厂函数(精品)
  • 日志搜索系统前端页面(暂无后端功能)
  • webrtc弱网-SendSideBandwidthEstimation类源码分析与算法原理
  • 手机横屏适配方案
  • 20250823给荣品RD-RK3588开发板刷Rockchip原厂的Buildroot【linux-5.10】时调通AP6275P的WIFI【源码部分】