微观 - 前技术原理
*本文不涉及使用框架API，例如Qiankun/Garfish。未使用上述两个框架的学生也可以阅读。
微型前端是多个团队的技术手段和方法策略，可以通过独立发布功能共同构建现代Web应用程序。
Micro前端架构具有以下核心值：
主要框架不会限制对应用程序技术堆栈的访问，并且微型申请书是完全自主的
微型应用仓库是独立的，前端和后端可以独立开发。部署完成后，主框架将自动完成同步更新
面对各种复杂情况，我们通常很难在存在的系统上升级或重建完整的技术堆栈，而微观前端是实施渐进重建的一种非常好的方法和策略。
每个微型应用隔离物，并且在运行期间未共享状态
目前，我们的部门正在VUE和REACT技术堆栈切换。面对VUE应用程序，有大量的历史股票，我们很难在短期内将这些应用程序迁移到React Technology堆栈。微型前端使我们能够更好地解决此问题。
Qiankun作者的文章引用。不是iframe。
iframe的最大功能是提供浏览器的本机硬隔离方案。无论是样式隔离和JS隔离，所有问题都可以完美解决。但是，他最大的问题是他的隔离不能被打破，这使得无法共享应用程序的背景以及带来的开发经验和产品经验它。
一些问题相对容易解决（问题1）。有些问题可以睁开眼睛并闭上一只眼睛（问题4），但是我们很难解决（问题3），甚至无法解决。（问题2）这些未解决的问题将为产品带来非常认真的经验，最终使我们放弃了iFrame解决方案。
这意味着入口。无论是一个子申请，都需要在适当的时间提供生命周期钩子来称呼它。例如，您需要至少导出三个生命周期挂钩；您需要导出生命周期钩。
通常有两种类型：JS条目和HTML条目。
JS进入的缺点是：
因此，您需要使用它。您只需要指定子申请的入口即可。加载字符串后，提取微型前端框架，资源和运行子应用程序，安装样式，执行脚本并运行脚本中提供的生命周期挂钩。因此，优势也很明显：
分析HTML字符串的过程如下：
在此过程中没有立即执行脚本标签中的脚本并不难。这是因为脚本标签中的脚本需要等到创建JS Sandbox。JS沙盒的相关内容将在下一部分中引入。
如果从多个脚本找到生命周期钩怎么办？（以下实现是一个示例）
目前，您可以获得三个生命周期钩。
例如，如果现在有三个文件：如下：
在上面的文件中：
其中，是。
包装后，执行结果是：按顺序添加三个属性，输入文件的导出函数将是最后一个属性。
原因分析
先决条件：多次穿越窗口上的属性的顺序是确定的；2.新属性将添加到窗口对象的所有属性中；3. UMD将将输入文件的执行结果的导出内容安装到窗口对象。
上述代码的内容将像这样包装：
包装后的代码将做四件事：
在整个过程中，尽管属性将被携带，但导出的内容最终安装在对象上，因此可以通过对象的最后属性获得导出到入口文件的生命周期钩函数。
1. JS Box JS沙盒可以用两个句子进行总结：
首先介绍沙箱。通常有三种类型的沙盒：
缺点：尽管隔离了子申请之间的状态，但父子应用程序将修改相同的窗口对象以相互污染。
2.稳定性后将更换ProxySandbox（依赖代理）。
3.Snapshotsandbox无法复制加载的内容
对于不支持代理的浏览器，这是另一种选择。
2.除JS沙盒劫持外，还有一些全局方法还需要劫持一些全局方法，例如计时器，窗口事件监视，窗口。史。史度事件监视，动态以将sub element元素方法添加到头部/身体元素（例如作为附录，插入）。
在这里，我们将重点介绍计时器的劫持以及亚元素方法的动态添加：
我们知道，通话后将返回非零值，该值用于识别创建的计时器。该值可以用作删除相应计时器的参数。
因此，原理很简单：
主要劫持：
上面劫持仅处理动态添加的...标签。
下时间呼叫将触发Sandbox代理对象上的GET Interceptor，该对象可以确定某个元素是否是由子应用程序创建的。如果是这样，可以对此元素进行处理和劫持。
CSS隔离 - 相关处理将进行（在下一节中介绍）。如果是链接标签，您将使用fetch获取样式表内容字符串，外包样式标签，然后插入Sub的DOM-Application。将收集动态添加样式标签（假设将其收集在命名的数组中）。
如果样式标签是或创建的，则此样式标签可能没有内容，但是顶部将有CSS规则。我们调用此样式元素标签。
如果首次安装子涂码时创建了第一个标签，则此样式标签将存储在数组中。卸载子涂抹后，然后再次安装，此样式标签将从高速缓存中取出并重新删除。- 安装到子申请。目前，您会发现样式标签的样式无效。这是因为从文档中删除样式元素后，浏览器将自动删除样式元素表。
因此，当卸载子应用程序时，存储了样式标签的CSSRULES。当它们再次安装时，CSSRULES被写入样式标签中，以便样式再次生效。
如何将JS沙盒的代理对象指定为全局对象？
确定它是否是通过子申请创建的，请将其从子申请容器中删除。
上一节介绍的是，由子应用程序创建的样式标签将添加到子应用容器中，因此，当卸载子申请时，可以将样式表卸载在一起，以避免在子应用之间避免样式污染。
阴影圆顶安装在子应用容器节点上，该节点已在父权制和儿子应用程序和多个子应用程序之间进行隔离。
Shadow dom允许隐藏的DOM树连接到传统的DOM树上 - 它以Shadow root节点作为启动根节点开始。在根节点下方，它可以是任意元素，与普通的DOM元素相同。
注意：如果您使用React 16或更低版本，则不建议使用Shadowdom样式隔离。有关详细信息，请参考它。
总而言之，它是添加一个示波器（类似于Vue
原始：https：//juejin.cn/post/70993395233333344