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

在这里插入图片描述

目录

前言

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 = nullrouter = nullhistory = 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.rhkb.cn/news/456575.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

400V交流智能剩余电流监测系统设计与应用

400V交流智能剩余电流监测系统设计与应用

摘要&#xff1a;针对变电站400V交流系统频繁发生剩余电流保护器跳闸的问题&#xff0c;本研究设计了一套智能化的分布式剩余电流监测系统。该系统利用CT传感器采集400V系统各负载端的剩余电流数据&#xff0c;经过运算处理后&#xff0c;将信息传递给交流绝缘监测装置。随后&a…
阅读更多...
重生之“我打数据结构，真的假的？”--3.栈和队列（无习题）

重生之“我打数据结构，真的假的？”--3.栈和队列（无习题）

栈和队列 C语言中的栈和队列总结 在C语言中&#xff0c;**栈&#xff08;Stack&#xff09;和队列&#xff08;Queue&#xff09;**是两种非常重要的数据结构。它们广泛用于各种应用中&#xff0c;比如内存管理、任务调度、表达式求值等。本文将对这两种数据结构进行详细的介…
阅读更多...
基于Multisim的四人智力竞赛抢答器设计与仿真

基于Multisim的四人智力竞赛抢答器设计与仿真

1&#xff09;设计任务 设计一台可供 4 名选手参加比赛的智力竞赛抢答器。 用数字显示抢答倒计时间&#xff0c;由“9”倒计到“0”时&#xff0c;无人抢答&#xff0c;蜂鸣器连续响 1 秒。选手抢答时&#xff0c;数码显示选手组号&#xff0c;同时蜂鸣器响 1 秒&#xff0c;倒…
阅读更多...
基于Python+SQL Server2008实现（GUI）快递管理系统

基于Python+SQL Server2008实现（GUI）快递管理系统

快递业务管理系统的设计与实现 摘要: 着网络新零售的到来&#xff0c;传统物流在网购的洗礼下迅速蜕变&#xff0c;在这场以互联网为基础的时代变革中&#xff0c;哪家企业能率先转变其工作模式就能最先分得一杯羹&#xff0c;物流管理也不例外。传统的物流管理模式效率低下&a…
阅读更多...
金融工程--pine-script 入门

金融工程--pine-script 入门

背景 脚本基本组成 策略实现 实现马丁格尔策略 初始化变量&#xff1a;定义初始资本、初始头寸大小、止损百分比、止盈百分比以及当前资本和当前头寸大小等变量。 更新头寸&#xff1a;创建一个函数来更新头寸大小、止损价格和止盈价格。在马丁格尔策略中&#xff0c;每次亏…
阅读更多...
micro-app【微前端实战】主应用 vue3 + vite 子应用 vue3+vite

micro-app【微前端实战】主应用 vue3 + vite 子应用 vue3+vite

micro-app 官方文档为 https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/framework/vite 子应用 无需任何修改&#xff0c;直接启动子应用即可。 主应用 1. 安装微前端框架 microApp npm i micro-zoe/micro-app --save2. 导入并启用微前端框架 microApp src/main.ts …
阅读更多...
【Ubuntu】Virtualbox下lamp集群分布式搭建Wordpress

【Ubuntu】Virtualbox下lamp集群分布式搭建Wordpress

WordPress是一种使用PHP语言开发的开源内容管理系统&#xff08;CMS&#xff09;&#xff0c;也常被用作博客平台。 开发语言&#xff1a;PHP 数据库&#xff1a;MySQL、mariadb&#xff08;或其他兼容的数据库系统&#xff09; 授权方式&#xff1a;GNU通用公共许可证下发布&a…
阅读更多...
【JavaEE】【多线程】单例模式

【JavaEE】【多线程】单例模式

目录 一、设计模式1.1 单例模式1.1.1 饿汉模式1.1.2 懒汉模式 1.2 线程安全问题1.3 懒汉模式线程安全问题的解决方法1.3.1 原子性问题解决1.3.2 解决效率问题1.3.3 解决内存可见性问题和指令重排序问题 一、设计模式 在讲解案例前&#xff0c;先介绍一个概念设计模式&#xff…
阅读更多...
C++ 模版和继承

C++ 模版和继承

目录 一.模版 1.模版的基本概念 a.函数模版 b.类模板 c.模版的实例化 d.class 和 typename的区别 e.非类型模版参数 2.模版的特化 a.全特化 —— 参数类型全部特殊化处理 b.半特化 —— 部分参数特殊化处理 c.偏特化——对某些类型的进一步限制&#xff08;实例化时传…
阅读更多...
GD32学习知识点累计

GD32学习知识点累计

时钟系统 GD32f427主频最高位240MHZ&#xff08;但是只能到200M&#xff09;&#xff0c;GD32给的函数外接25MHZ晶振配置主频为200MHZ,APB1最高频率为60HZ配置为主频的4分频为50MHZ&#xff0c;APB2最大为120MHZ配置为主频的2分频为100MHZ 定时器 无论什么定时器最大频率为200M…
阅读更多...
安全见闻---清风

安全见闻---清风

注&#xff1a;本文章源于泷羽SEC&#xff0c;如有侵权请联系我&#xff0c;违规必删 学习请认准泷羽SEC学习视频:https://space.bilibili.com/350329294 安全见闻1 泷哥语录&#xff1a;安全领域什么都有&#xff0c;不要被表象所迷惑&#xff0c;无论技术也好还是其他方面…
阅读更多...
AI带货主播框架的搭建!

AI带货主播框架的搭建!

AI带货主播&#xff0c;作为新兴的技术应用&#xff0c;正在逐渐改变电商行业的面貌&#xff0c;通过利用人工智能技术&#xff0c;AI带货主播能够模拟真实主播的行为&#xff0c;与用户进行互动&#xff0c;推荐商品&#xff0c;提升购物体验。 本文将介绍如何搭建一个AI带货…
阅读更多...
处理Hutool的Http工具上传大文件报OOM

处理Hutool的Http工具上传大文件报OOM

程序环境 JDK版本&#xff1a; 1.8Hutool版本&#xff1a; 5.8.25 问题描述 客服端文件上传主要代码&#xff1a; HttpRequest httpRequest HttpUtil.createPost(FILE_UPLOAD_URL); Resource urlResource new UrlResource(url, fileName); httpRequest.form("file&q…
阅读更多...
self-supervised learning(BERT和GPT)

self-supervised learning(BERT和GPT)

1芝麻街与NLP模型 我們接下來要講的主題呢叫做Self-Supervised Learning&#xff0c;在講self-supervised learning之前呢&#xff0c;就不能不介紹一下芝麻街&#xff0c;為什麼呢因為不知道為什麼self-supervised learning的模型都是以芝麻街的人物命名。 因為Bert是一個非常…
阅读更多...
实战-任意文件下载

实战-任意文件下载

实战-任意文件下载 1、开局 开局一个弱口令&#xff0c;正常来讲我们一般是弱口令或者sql&#xff0c;或者未授权 那么这次运气比较好&#xff0c;直接弱口令进去了 直接访问看看有没有功能点&#xff0c;正常做测试我们一定要先找功能点 发现一个文件上传点&#xff0c;不…
阅读更多...
中酱集团：黑松露酱油，天然配方定义健康生活

中酱集团：黑松露酱油，天然配方定义健康生活

在如今的大健康时代&#xff0c;人们对于美食的要求越来越高。不仅美味&#xff0c;更要健康。在健康美食的生态链中&#xff0c;有一个名字正逐渐成为品质与美味的代名词——中酱集团。而当中酱集团与黑松露酱油相遇&#xff0c;一场味觉的革命就此拉开帷幕。 中酱集团&#x…
阅读更多...
【产品应用】旋转式贴标机一站式解决方案

【产品应用】旋转式贴标机一站式解决方案

针对贴标机行业设备&#xff0c;立迈胜公司拥有智能控制器、一体化伺服电机、减速机等系列产品&#xff0c;可以轻松解决传统电机接线不便、占用空间、自重过大、部件繁杂等问题&#xff0c;帮助贴标机制造商实现设备精准控制、运行稳定的同时&#xff0c;保证生产流程高效产出…
阅读更多...
开发运维警示录-20241024

开发运维警示录-20241024

开发警示录 1、作为开发&#xff0c;不要私自修改业务人员给的SQL语句&#xff0c;虽然个人感觉SQL很冗余&#xff0c;效率低等。 2、开发前&#xff0c;要明确需求&#xff0c;必要时通过图和文字形成文档与需求方确认、留痕。 3、开发复杂的业务逻辑代码前&#xff0c;先疏通…
阅读更多...
oracle数据库---PL/SQL、存储函数、存储过程、触发器、定时器job、备份

oracle数据库---PL/SQL、存储函数、存储过程、触发器、定时器job、备份

PL/SQL 什么是 PL/SQL PL/SQL&#xff08;Procedure Language/SQL&#xff09;是 Oracle 对 sql 语言的过程化扩展&#xff0c;指在 SQL 命令语言中增加了过程处理语句&#xff08;如分支、循环等&#xff09;&#xff0c;使 SQL 语言具有过程处理能力。把SQL语言的数据操纵能…
阅读更多...
瑞芯微的 展会总结

瑞芯微的 展会总结

首先是我感兴趣的产品&#xff1a; 摄像头的 墨水瓶的。 android 盒子&#xff0c;使用的是rk3588s 然后是瑞芯微&#xff21;&#xff29;在做什么&#xff1a;　 在对 音频 视屏的输出 进行补充。 比如&#xff0c;视频拍了一张图片很模糊&#xff0c;那么他们用AI算法&am…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023