微前端架构新选择：micro-app 框架一文全解析

news2024/10/25 21:34:18

在这里插入图片描述

目录

前言

https://micro-zoe.github.io/micro-app/

micro-app 是由京东前端团队推出的一款微前端框架，它借鉴了 WebComponent 的思想，通过 js沙箱、样式隔离、元素隔离、路由隔离 模拟实现了 ShadowDom 的隔离特性，并结合 CustomElement 将微前端封装成一个类 WebComponent 组件，从而实现微前端的组件化渲染，旨在降低上手难度、提升工作效率。

micro-app 与技术栈无关，也不和业务绑定，可以用于任何前端框架。

技术方案

https://juejin.cn/post/7236021829000691771

https://juejin.cn/post/7309477710523269174

  • 主应用引入框架 Micro App，通过链接加载子应用，双方状态隔离，互不影响

沙箱

MicroApp 有两种沙箱方案：with沙箱 和 iframe沙箱。

默认开启 with沙箱，如果 with沙箱 无法正常运行，可以尝试切换到 iframe沙箱，比如 vite。

with

with 沙箱通常是指使用 JavaScript 的 with 语句来创建一个新的作用域。这种方法在现代开发中不推荐使用，因为它可能导致代码难以阅读和维护、作用域不明确、调试困难、全局变量污染，而且 with 语句在严格模式下是不被允许的。

const microApp = {
  data: {
    message: 'Hello from MicroApp'
  },
  logMessage() {
    with(this.data) {
      console.log(message);
    }
  }
};

microApp.logMessage(); // 输出: Hello from MicroApp

iframe

iframe 沙箱是一种更为常见的隔离技术，通过在 HTML 中使用 <iframe> 标签来嵌入微应用。每个 <iframe> 都有自己独立的全局作用域，这意味着 JavaScript 变量和 DOM 不会泄露到宿主应用中。

子应用的执行 js 脚本会被 micro 拿出来放到 iframe 进行执行，一般只会加载 样式文件。

环境变量

子应用可以通过一些 window 注入的全局变量来判断当前加载的状态如何：

  • __MICRO_APP_ENVIRONMENT__（是否在微前端环境中）
  • __MICRO_APP_NAME__（获取应用在 micro-app 挂载的值）
  • __MICRO_APP_BASE_ROUTE__（子应用的基础路由路径）
  • __MICRO_APP_BASE_APPLICATION__（判断当前是否是主应用，执行 microApp.start 之后生效）
  • rawWindow（子应用获取主应用的执行 window 上下文）
    • 主应用的 window 内部包含子应用的 window，默认是 window[0] window[1] window[2]。
    • 但是这个包含的 window 被注入了一些方法和变量，所以和原本的不一致了。
  • rawDocument（子应用获取主应用的执行 document 结构）

主应用生命周期

  1. created： 标签初始化后，加载资源前触发。
  2. beforemount：加载资源完成后，开始渲染之前触发。
  3. mounted：子应用渲染结束后触发。
  4. unmount：子应用卸载时触发。
  5. error：子应用加载出错时触发，只有会导致渲染终止的错误才会触发此生命周期。
  • 开启缓存前，先触发123，切换触发4，返回接着触发123
  • 开启keep-alive后，应用卸载时会进入缓存，而不是销毁它们，以便保留应用的状态和提升重复渲染的性能。先触发123，切换不触发，返回触发1

子应用生命周期

初始化

更新

卸载

缓存

  • 开启缓存后，子应用无需重复上述的渲染过程

JS 沙箱

https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/sandbox

  • 通过自定义的window、document拦截子应用的JS操作，放在 iframe 执行，实现一个相对独立的运行空间，避免全局变量污染，让子应用进行独立运行
  • 后续出一篇文章，分析 iframe webcomponent 内部执行原理

样式隔离

micro-app[name=my-app1] .main .title

  • 一般情况下，子应用不开启 scoped 进行隔离，主应用会加上 micro-app[name=my-app1] 进行样式标识
  • 如果主应用的样式在全局下面，不开启 micro 的话，很可能会影响到子应用的原始样式
  • 默认下样式隔离是开启的，也可以在应用、文件、行进行禁用操作

元素隔离

【小程序 - 大智慧】Expareser 组件渲染框架_exparser框架-CSDN博客

  • 元素的隔离来自 Shadow Dom，元素不会逃离 <micro-app> 元素边界，子应用只能对自身的元素进行增、删、改、查的操作。
  • 微前端下主应用拥有统筹全局的作用，可以获取子应用的元素。
  • 自定义了 micro-app-head、micro-app-body 等 Web Component 组件进行隔离。

路由系统⭐

拦截浏览器路由事件以及自定义的 location、history，实现了一套虚拟路由系统，子应用运行在这套虚拟路由系统中，和主应用的路由进行隔离，避免相互影响

  1. search 是默认模式，子应用的路由信息会作为 query 参数同步到浏览器地址上。
  2. native 子应用和主应用共同基于浏览器路由进行渲染，但是配置更加复杂。
  3. native-scope 相比于 native，子应用的域名指向自身而非主应用。
  4. pure 模式是指子应用独立于浏览器路由系统进行渲染，即不修改浏览器地址，也不增加路由堆栈。
  5. state 模式是指基于浏览器 history.state 进行渲染的路由模式，在不修改浏览器地址的情况下模拟路由行为，可以增加路由堆栈。
  6. 路由系统和 vue-router 大差不差，具体包含了应用跳转、拦截、配置、路径解析等。

数据通信⭐

MicroApp

主应用和子应用之间的通信是绑定的，主应用只能向指定的子应用发送数据，子应用只能向主应用发送数据，这种方式可以有效的避免数据污染，防止多个子应用之间相互影响。

  1. 全局通信
  2. 主 <=> 子通信
  3. 无论是通信还是接收数据，发送数据是异步执行的，多个请求会在下一帧合并为一次执行。默认数据都是走缓存的，如果 key 和 value 值都一样就不会发送，后续的数据请求会和之前的进行合并，然后一起发送过去。最后，当子应用卸载时，要注意通信的数据会被缓存，可能会导致一些困扰，此时可以主动清空缓存数据来解决。

资源系统

// 方式一：excludeAssetFilter
import microApp from '@micro-zoe/micro-app'

microApp.start({
  excludeAssetFilter (assetUrl) {
    if (assetUrl === 'xxx') {
      return true // 返回true则micro-app不会劫持处理当前文件
    }
    return false
  }
})


// 方式二：配置 exclude 属性
<link rel="stylesheet" href="xx.css" exclude>
<script src="xx.js" exclude></script>
<style exclude></style>

https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/static-source

  • 自动补全：对子应用相对地址的资源路径进行补全。
  • 资源共享：当子应用加载相同地址的 js 或 css 资源时，会直接从缓存中提取数据，从而提升渲染速度。
  • 资源过滤：对于共享的资源使用 exclude 不加载，excludeAssetFilter 指定部分特殊的动态加载的微应用资源（css/js）不被 `

预加载

预加载是指在子应用尚未渲染时提前加载静态资源，从而提升子应用的首次渲染速度。为了不影响主应用的性能，预加载会在浏览器空闲时间执行。

microApp.preFetch([
  { name: 'my-app1', url: 'xxx' }, // 加载资源并解析
  { name: 'my-app2', url: 'xxx', level: 1 }, // 只加载资源
  { name: 'my-app3', url: 'xxx', level: 3 }, // 加载资源、解析并渲染
  { name: 'my-app4', url: 'xxx', level: 3, 'default-page': '/page2' }, // 加载资源、解析并渲染子应用的page2页面
])

umd 模式

// main.js
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import routes from './router'
import App from './App.vue'

let app = null
let router = null
let history = null
// 👇 将渲染操作放入 mount 函数，子应用初始化时会自动执行
window.mount = () => {
  history = createWebHistory()
  router = createRouter({
    history,
    routes,
  })

  app = createApp(App)
  app.use(router)
  app.mount('#app')
}

// 👇 将卸载操作放入 unmount 函数，就是上面步骤2中的卸载函数
window.unmount = () => {
  app.unmount()
  history.destroy()
  app = null
  router = null
  history = null
}

// 如果不在微前端环境，则直接执行mount渲染
if (!window.__MICRO_APP_ENVIRONMENT__) {
  window.mount()
}
  • 默认模式：初次渲染和后续渲染时会顺序执行所有 js，以保证多次渲染的一致性。
  • umd 模式：子应用定义 mount、unmount 方法，此时只在初次渲染时执行所有 js，后续渲染只会执行这两个方法，在多次渲染时具有更好的性能和内存表现。

其他功能

  1. 支持多层嵌套，A 嵌套 B，B 嵌套 C，需要按照规定进行配置。
  2. 插件系统可以对全局和单独应用的 js 处理规则进行修改，因为默认在沙箱中，顶层的变量是无法泄漏为全局变量的（如 var xx =, function xxx 定义变量，无法通过 window.xx 访问），导致 js 报错。
  3. 通过自定义 fetch 替换框架自带的 fetch，可以修改 fetch 配置（添加 cookie 或 header 信息等等），或拦截 HTML、JS、CSS 等静态资源。

调试工具

MicroApp

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2223562.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Qt 支持打包成安卓

Qt 支持打包成安卓

1. 打开维护Qt&#xff0c;双击MaintenanceTool.exe 2.登陆进去,默认是添加或移除组件&#xff0c;点击下一步&#xff0c; 勾选Android, 点击下一步 3.更新安装中 4.进度100%&#xff0c;完成安装&#xff0c;重启。 5.打开 Qt Creator&#xff0c;编辑-》Preferences... 6.进…
阅读更多...
【力扣】[Java版] 刷题笔记-21. 合并两个有序链表

【力扣】[Java版] 刷题笔记-21. 合并两个有序链表

题目&#xff1a; 21. 合并两个有序链表 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 解题思路 从题目和示例可以看出&#xff0c;应该是要循环遍历链表进行比较&#xff0c;然后组成新的链表。 第一种&#xff1a;递归…
阅读更多...
人工智能_机器学习100_PCA数据降维算法_协方差和散度矩阵_深入理解_分析_协方差和散度矩阵计算过程---人工智能工作笔记0225

人工智能_机器学习100_PCA数据降维算法_协方差和散度矩阵_深入理解_分析_协方差和散度矩阵计算过程---人工智能工作笔记0225

其实上一节我们已经把协方差和散度矩阵都已经说过一遍了。 1.可以看到平均值，我们不用再看了，这里面有一个样本平均值可以看到，其实就是样品样本的总和除以样本的均值. 2.然后样本方差这里我们需要注意一下样本方差和全体方差的区别。样本方差除以的是n-1。因为样本方差，…
阅读更多...
基于微博评论的自然语言处理情感分析

基于微博评论的自然语言处理情感分析

目录 一、项目概述 二、需要解决的问题 三、数据预处理 1、词汇表构建&#xff08;vocab_creat.py&#xff09; 2、数据集加载&#xff08;load_dataset.py&#xff09; 四、模型构建&#xff08;TextRNN.py&#xff09; 1、嵌入层&#xff08;Embedding Layer&#xff…
阅读更多...
2024年10月21日计算机网络,乌蒙第一部分

2024年10月21日计算机网络,乌蒙第一部分

【互联网数据传输原理 &#xff5c;OSI七层网络参考模型】 https://www.bilibili.com/video/BV1EU4y1v7ju/?share_sourcecopy_web&vd_source476fcb3b552dae37b7e82015a682a972 mac地址相当于是名字&#xff0c;ip地址相当于是住址&#xff0c;端口相当于是发送的东西拿什…
阅读更多...
任务间通信（1）

任务间通信（1）

任务间通信 目录 任务间通信 回顾 -- WiFi模块&#xff1a;1、所有和服务器相关的操作&#xff0c;2、可以实现局域网通信 -- 操作系统&#xff08;Freertos&#xff09;&#xff1a; FreeRTOS之任务间通信 消息队列 信号量 更改接收数据方式 互斥量 回顾 -- 我们要…
阅读更多...
CSS设置层叠样式时报红（identifier expected css/selector expected css）

CSS设置层叠样式时报红（identifier expected css/selector expected css）

不规范语法 如上图所示&#xff0c;在一个 css 文件中添加层叠样式时报红&#xff1a;at-rule or selector expected&#xff0c;意思就是说我们的语句不符合 css 的语法书写规范&#xff0c;虽然不会导致启动报错并且还能达到预期的样式效果&#xff0c;但是对于有强迫症的同学…
阅读更多...
Python爬虫进阶（实战篇一）

Python爬虫进阶（实战篇一）

接&#xff0c;基础篇&#xff0c;链接&#xff1a;python爬虫入门&#xff08;所有演示代码&#xff0c;均有逐行分析&#xff01;&#xff09;-CSDN博客 目录 1.爬取博客网站全部文章列表 ps:补充&#xff08;正则表达式&#xff09; 爬虫实现 爬虫代码&#xff1a; 2.爬…
阅读更多...
java控制台打印乘法口诀表

java控制台打印乘法口诀表

目录 前言具体代码完整代码 前言 背乘法口诀表我没记错话&#xff0c;应该是我们在上小学二年级的时候&#xff0c;相信大家对乘法表相当熟悉&#xff0c;那你知道如何用java打印这个漂亮的表吗&#xff1f;下面咱们一起来学习学习。 具体代码 数字乘法表 关键代码&#xf…
阅读更多...
shell编程实例1—猜数字游戏

shell编程实例1—猜数字游戏

脚本生成一个100以内的随机数&#xff0c;提示用户猜数字&#xff0c;根据用户的输入&#xff0c;提示用户猜对了&#xff0c; 猜小了或猜大了&#xff0c;直至用户才对数字结束 #!/bin/bash #脚本生成一个100以内的随机数&#xff0c;提示用户猜数字&#xff0c;根据用户的输…
阅读更多...
大模型生图安全疫苗注入——进阶解决方案与系统优化(DataWhale组队学习)

大模型生图安全疫苗注入——进阶解决方案与系统优化(DataWhale组队学习)

引言 大家好&#xff0c;我是GISer Liu&#x1f601;&#xff0c;上篇博客中&#xff0c;我们基于DataWhale 2024年10月大模型生图安全疫苗注入赛道的任务&#xff0c;介绍了攻击与防御的基本策略&#xff0c;如通过上下文稀释法、隐喻替换等绕过检测机制&#xff0c;并提出了多…
阅读更多...
分布式IO模拟量模块：多领域应用的高效能解决方案

分布式IO模拟量模块：多领域应用的高效能解决方案

分布式IO模拟量模块是分布式IO系统中的重要组件&#xff0c;用于实现现场设备或过程的模拟量信号的采集、监视和控制。该模块通常与现场总线耦合器配合使用&#xff0c;能够接收来自现场设备的模拟量信号&#xff08;如电流、电压等&#xff09;&#xff0c;并将其转换为数字信…
阅读更多...
利用飞腾派进行OpenCV开发

利用飞腾派进行OpenCV开发

实验目标&#xff1a; 完成飞腾平台OpenCV开发。 实验大纲&#xff1a; Mat数据结构加载、显示、保存图像读写像素RGB图像分离彩色图转灰度图 Mat数据结构 Mat是一个类&#xff0c;由两个数据部分组成&#xff1a;矩阵头(大小,通道,数据类型等)和数据块(像素 值)。创建示例…
阅读更多...
Chat-macOS：HuggingChat 开源 MACOS 原生 AI 聊天神器，让你的 Mac 变成智能助手！

Chat-macOS：HuggingChat 开源 MACOS 原生 AI 聊天神器，让你的 Mac 变成智能助手！

❤️ 如果你也关注大模型与 AI 的发展现状&#xff0c;且对大模型应用开发非常感兴趣&#xff0c;我会快速跟你分享最新的感兴趣的 AI 应用和热点信息&#xff0c;也会不定期分享自己的想法和开源实例&#xff0c;欢迎关注我哦&#xff01; &#x1f966; 微信公众号&#xff…
阅读更多...
毕业设计—基于 Inception-ResNet模型的皮肤癌分类系统实现

毕业设计—基于 Inception-ResNet模型的皮肤癌分类系统实现

1.摘要 皮肤癌是人类最常见的恶性肿瘤&#xff0c;主要通过视觉诊断进行初步临床筛查。但是由于皮肤病变外观的细微变化性&#xff0c;使用图像自动分类皮肤病变是一项具有挑战性的任务。本文为了提高深度学习算法在皮肤病检测上的准确率&#xff0c;本文提出了基于Inception和…
阅读更多...
bootstrap模态框myModalLabel遇到做复制的功能失效解决方案整理

bootstrap模态框myModalLabel遇到做复制的功能失效解决方案整理

bootstrap模态框myModalLabel遇到做复制的功能失效解决方案整理 解决办法&#xff1a;标红色的去掉就可以 tabindex“-1”
阅读更多...
SOLIDWORKS专业版企业购买多少钱一套？

SOLIDWORKS专业版企业购买多少钱一套？

SOLIDWORKS正版软件分为三个版本&#xff0c;主要以每个版本的功能不同对价格进行划分&#xff0c;SOLIDWWORKS代理商硕迪科技将为企业提供优惠的采购价格&#xff0c;欢迎通过电话或者在线咨询联系我们&#xff0c;洽谈价格和服务。 ▲ SOLIDWORKS Professional 是应用最为广…
阅读更多...
网站建设中需要注意哪些安全问题？----雷池社区版

网站建设中需要注意哪些安全问题？----雷池社区版

服务器与应用安全指南 1. 服务器安全 1.1 操作系统安全 及时更新补丁&#xff1a;确保操作系统始终安装最新补丁&#xff0c;以防范系统漏洞。例如&#xff0c;Windows Server 定期推送安全更新&#xff0c;修复如远程代码执行等潜在威胁。优化系统服务配置&#xff1a;关闭不…
阅读更多...
什么是3D展厅？有哪些应用场景？

什么是3D展厅？有哪些应用场景？

3D展厅是一种利用三维技术构建的虚拟展示空间。它借助虚拟现实&#xff08;VR&#xff09;、增强现实&#xff08;AR&#xff09;等现代科技手段&#xff0c;将真实的展示空间数字化&#xff0c;呈现出逼真、立体、沉浸的展示效果。视创云展通过整合虚拟展厅、数字人互动、音视…
阅读更多...
【真题笔记】09-12年系统架构设计师要点总结

【真题笔记】09-12年系统架构设计师要点总结

【真题笔记】09-12年系统架构设计师要点总结 41 视图DSSA&#xff08;特定领域架构&#xff09;集成系统数据库管理设计模式操作符运算符综合布线备份数据库集成工作流技术软件质量保证需求管理需求开发结构化方法企业战略数据模型事务数据库主题数据库系统设计原型开发静态分析…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023