微前端

这个时候收到东子的面试，问的比较基础，主要是JavaScript和CSS基础，问了下关于微前端的了解

大厂还是比较看重基础的

 

微前端：

• 各个子应用可以使用不同的技术栈。例如，一个子应用可以用 React 构建，另一个子应用可以用 Vue 或者原生 JavaScript 编写。这样就可以充分利用每个团队的技术专长，而不用强制所有团队使用同一种技术。
• 比如，公司 A 收购了公司 B，公司 A 的前端应用是基于 React 开发的，公司 B 的前端应用是基于 Vue 开发的。通过微前端架构，可以将公司 B 的 Vue 应用以子应用的方式集成到公司 A 的 React 主应用中，减少技术整合的难度。
• 沙箱机制（Sandbox）

1. • qiankun 的沙箱机制是其重要的特性之一。它主要有两种沙箱：
   • JavaScript 沙箱：用于隔离子应用的 JavaScript 执行环境。当子应用运行时，它的全局变量（如window对象上的属性）不会影响主应用和其他子应用。例如，子应用 1 定义了一个全局变量globalVar，这个变量在子应用 1 的沙箱内有效，不会污染主应用或者子应用 2 的全局环境。
   • CSS 沙箱：可以防止子应用的样式泄漏到主应用和其他子应用中。通过在 DOM 节点上添加特定的属性和样式规则来实现样式隔离。比如，子应用的样式只会应用到它自己的 DOM 节点范围内，不会影响主应用的样式布局。

 

实现方式：

 

1. 路由分发式微前端
   • 原理：通过主应用的路由来控制子应用的显示。当用户访问不同的路由路径时，主应用根据路由规则加载相应的子应用。
   • 例如，主应用的路由配置为/app1时加载子应用 1，/app2时加载子应用 2。这种方式比较简单直接，适用于子应用之间相对独立，交互较少的场景。
2. iframe 方式
   • 原理：将子应用嵌入到主应用的iframe标签中。iframe提供了一个独立的浏览器上下文，子应用在这个独立的环境中运行。
   • 优点是隔离性好，子应用的样式和脚本不会轻易影响主应用。但是iframe也有一些缺点，如通信相对复杂，加载性能可能会受到影响，而且iframe的样式和主应用的样式整合比较困难。
3. Web Components 方式
   • 原理：将子应用封装成 Web Components（自定义元素），然后在主应用中使用这些自定义元素。Web Components 有自己的生命周期和作用域，能够很好地隔离子应用。
   • 例如，可以使用CustomElementRegistry来定义一个自定义元素，这个自定义元素可以是一个完整的子应用。这种方式可以实现比较好的封装性和隔离性，同时也方便在主应用中进行组合和复用。