diff --git a/docs/fe-basic/css/box-model.md b/docs/fe-basic/css/box-model.md index acc6e875..a27e0703 100644 --- a/docs/fe-basic/css/box-model.md +++ b/docs/fe-basic/css/box-model.md @@ -60,8 +60,8 @@ keywords: [css, box-model] - html/body 元素 - overflow 值不为 visible 的块元素 hidden/auto/scroll -- 浮动元素(元素的 float 不是 none) -- 定位元素(position 不是 static/relative) absolute/fixed +- float:(元素的 float 不是 none) +- position:(position 不是 static/relative) absolute/fixed - display 值为 flow-root 的元素: 成为块级元素,并创建 BFC - display:inline-block/table-cell/table diff --git a/docs/fe-basic/fe-engineering/micro-frontends.md b/docs/fe-basic/fe-engineering/micro-frontends.md index e5f714fd..a6e7f111 100644 --- a/docs/fe-basic/fe-engineering/micro-frontends.md +++ b/docs/fe-basic/fe-engineering/micro-frontends.md @@ -61,18 +61,60 @@ function createSandbox(window) { - 使用Worker 实现。 创建一个Worker,在独立线程中运行JS代码,将外部脚本隔离在一个独立线程中,避免影响主线程作用域。但是需要考虑线程通信和数据同步的问题。 - 一些沙箱库,比如 sandbox.js、vm.js 等。 +## CSS隔离 + +- qiankun 使用 Shadow DOM +- CSS Modules +- postCSS 插件 +- tailwind CSS + +## 实现通信机制 + +- 使用 CustomEvent ,派发和监听自定义事件。避免全局污染,也符合模块化的原则。 +- 或者实现一个发布订阅模式,通过emit/on来派发和监听事件。 +- 通过路由参数或者 localStorage 来实现。 + ## qiankun +基于 single-spa的微前端解决方案,通过js的import功能动态加载子应用,然后在主应用的dom中挂载子应用的dom。 + - CSS 隔离 - 通过Shadow DOM实现,是浏览器内置的web标准技术,可以创建一个封闭的DOM结构,对外部隔离,包括CSS样式。qiankun挂载子应用,会将子应用的HTML挂载到Shadow DOM上,从而实现CSS隔离 + 通过Shadow DOM实现,是浏览器内置的web标准技术,可以创建一个封闭的DOM结构,对外部隔离,包括CSS样式。qiankun挂载子应用,会将子应用的HTML挂载到Shadow DOM上,从而实现CSS隔离。 - 父子项目通信,通信机制 + - 观察者模式。通过 setGlobalState 设置 globalState,并通过 onGlobalStateChange 和 offGlobalStateChange 来注册和取消 观察者 函数,从而实现通信。 -## 实现通信机制 +- 优缺点 + - 提供完备的沙箱方案,包括js沙箱和CSS沙箱。 + - 支持静态资源预加载。 + - 适配成本高,包括工程化、生命周期、静态资源路径、路由等方面。 + - 不支持vite。 -- 使用CustomEvent ,派发和监听自定义事件。避免全局污染,也符合模块化的原则。 -- 或者实现一个发布订阅模式,通过emit/on来派发和监听事件。 +## wujie + +微前端框架,基于 iframe 实现。 + +### 应用加载机制和JS沙箱 + +将子应用的 js 注入到和主应用同域的 iframe 中运行。利用了 iframe 自己的沙箱机制,且有完整的 history 和location。 + +- 不用注册,不用改造路由,直接使用组件方式 + +- 一个页面可以同时激活多个子应用,iframe路由不用担心占用问题 + +- 天然js沙箱,不会污染主应用环境 + +- 不污染主应用所以销毁子应用也不需要清理 + +### CSS沙箱机制 + +通过 webcomponent 实现页面样式隔离。 +子应用的实例 instance 在 iframe 内运行,dom 在主应用的 webcomponent 中,通过代理iframe的document到webcomponent,实现iframe与webcomponet的互联。 + +### 路由同步 + +劫持子应用所在 iframe 的 history,将子应用的 url 同步到主应用。刷新浏览器初始化 iframe 时,再使用子应用的 replaceState 进行同步。 ## Reference