业务摘要

微前端

微前端沙箱实现：iframe、web components、IIFE（立即调用函数表达式，内部隔离）+proxy（代理window）

微前端实现原理：当路由切换的时候，去下载对应微应用都代码，然后跑到容器里面

微前端选型：qiankun、micro-app、无界（后出的）

工作原理：

qiankun的代码隔离是IIFE（立即调用函数表达式，内部隔离）+proxy（代理window）实现的

改造方案：

数据发送：

在手动加载微应用的时候，将所需数据传给微应用，包括获取用户信息的函数，获取token的函数，接口地址、获取按钮权限的函数等

qiankun样式隔离：

qiankun自带的样式隔离通过选项属性sandbox配置，可以设为两种值，一个是strictStyleIsolation，一个是experimentalStyleIsolation。

其中严格样式隔离是将每个微应用都包裹在一个shadow dom中，这种方案的特点是：shadow dom外部的样式和微应用内部的样式之间不会相互影响，缺陷有：无法中主应用中定义全局样式供所有微应用使用，同时某些微应用使用到组件会挂载到body上，导致该组件样式丢失。

实验性样式隔离是给微应用所有的样式都加了一个[data-qiankun="appName"]的属性选择器进行样式隔离（借鉴了scoped css的思路），这种方案是微应用外部的样式可以影响到内容，但微应用内部的样式不会转发给全局，所以和严格模式一样，当某些组件挂载到body上时，样式会丢失。

一种较好的方案是：

在主应用中定义公共的全局样式和组件样式
给每个微应用的根节点都加上一个包含应用名的唯一标识符，用于设置该应用的某些全局样式
每个微应用内部使用scoped css，
微应用内部class选择器使用css bem命名规范（block(块)[-block(块)]{0, n}__element(元素)?--modifier(修饰符)）给元素/组件添加样式，其中block表示组件或一个功能块（form），内部可以有子功能块（form-item），元素是指组成块的内容，比如（head、body、footer、button），修饰符是修饰元素的某种状态，比如（disabled、active）

多页签应用保活：

每个加载的微应用挂载到对应id值的元素上
给当前tab页展示的应用（无论是微应用、外部应用、还是主应用内部的页面）加上一个active的class，布局占满整个页面，同时使用display: none;隐藏其他页面
所有的微应用都是用keep-alive包裹，在切换tab页的时候，保证之前的tab内容不会重新加载