微前端

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

大厂还是比较看重基础的

 

微前端:

  • 各个子应用可以使用不同的技术栈。例如,一个子应用可以用 React 构建,另一个子应用可以用 Vue 或者原生 JavaScript 编写。这样就可以充分利用每个团队的技术专长,而不用强制所有团队使用同一种技术。
  • 比如,公司 A 收购了公司 B,公司 A 的前端应用是基于 React 开发的,公司 B 的前端应用是基于 Vue 开发的。通过微前端架构,可以将公司 B 的 Vue 应用以子应用的方式集成到公司 A 的 React 主应用中,减少技术整合的难度。
  • 沙箱机制(Sandbox)
    • 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来定义一个自定义元素,这个自定义元素可以是一个完整的子应用。这种方式可以实现比较好的封装性和隔离性,同时也方便在主应用中进行组合和复用。
posted @   最小生成树  阅读(8)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示