微前端概念

微前端作用

  • 大型应用程序的拆分
  • 独立的前端子应用
  • 降低程序复杂性,提高开发效率

微前端能力

  • js隔离
  • css隔离
  • 元素隔离
  • 生命周期
  • 预加载
  • 数据通信
  • 应用跳转
  • 多层嵌套

微前端实现方案

  • Iframe
  • Single-spa
  • Qiankun
  • Micro-app

Iframe

<iframe src="https://www.example.com" sandbox></iframe>
  1. 简单易用
  2. 天然沙箱
  3. 隔离太完美
  4. 刷新即丢失

Single-spa

import { registerApplication } from 'single-spa'registerApplication({name:'app',app: () => {loadScripts('./chunk-a.js');loadScripts('./chunk-b.js');return loadScripts('./entry.js')}
})singleSpa.start()
  1. 微前端构架鼻祖
  2. 改造成本太大
  3. 沙箱不完美
  4. 应用通信能力差
  5. 等等

Qiankun

  1. html entry
  2. 更完备的沙箱方案
  3. 适配成本高
  4. 不支持 vite

Micro-app

  1. 低侵入式
  2. 文档易读
  3. 更好的兼容性
  4. 支持 vite

现代微前端架构理念

  1. 团队自治 跨多团队合作开发困难
  2. 核心思想 开发、部署成本
  3. 场景落地 系统的渐进性、动态性

传统代码提交流程
在这里插入图片描述
微前端代码提交流程
在这里插入图片描述
核心思想:
在这里插入图片描述

Micro-app

本质

借鉴了WebComponent的思想,通过CustomElement结合自定义的ShadowDom,将微前端封装成一个类WebComponent组件,从而实现微前端的组件化渲染。

  • WebComponent: 原生组件
  • CustomElement: 自定义元素
  • ShadowDom: 影子DOM

工作原理

在这里插入图片描述
整体架构思路为:CustomElement + HtmlEntry

  • micro-app标签:上可以设置各种配置,比如开启iframe沙箱、开启ssr模式、开启keep-alive模式、关闭沙箱、数据通信。
  • HTMLEntry: 就是以html文件作为入口地址进行渲染

如何使用

在这里插入图片描述

主要功能

生命周期、环境变量、虚拟路由、JS沙箱、样式隔离、元素隔离、数据通信、等等

生命周期
  • created:
<micro-app> 标签初始化后,加载资源前触发。
  • beforemount: 加载资源完成后,开始渲染之前触发
  • mounted: 子应用渲染结束后触发
  • unmount: 子应用卸载时触发
环境变量
 - _MICRO_APP_PUBLI_PATH_- _MICRO_APP_BASE_ROUTE_
虚拟路由系统

通过虚拟路由系统,我们可以方便的进行导航守卫、跨应用的跳转、提升开发效率、并且子应用运行在这套虚拟路由系统中,和主应用的路由进行隔离,避免相互影响,如:

  • 主应用控制子应用跳转
  • 子应用控制主应用跳转
  • 子应用控制其他子应用跳转
JS沙箱

确保子应用之间 全局变量/事件不冲突

样式隔离

在这里插入图片描述

元素隔离

元素隔离的概念来自ShadowDom,即ShadowDom中的元素可以和外包的元素重复但不会冲突,micro-app模拟实现了类似ShadowDom的功能,元素不会逃离<micro-app 元素边界,子应用只能对自身的元素进行增、删、改、查的操作。

数据通信
  • 主子应用间通信
  • 子应用全局通信
其他能力

预加载、缓存等等

兼容性
  • 技术栈: Vue、React、Angular、Nuxt、Next
  • 构建工具:Webpack、Vite、Vue-cli
  • 浏览器:PC端:除了IE浏览器,其他浏览器基本兼容,移动端:ios10+、android5+
Micro-app接入注意
  • 子应用跨域:Webpack、Vite
  • 样式隔离:约定前缀、命名空间
    官方网站:https://micro-zoe.github.io/micro-app/

构建micro-app基座(以vue3为基座)

// 初始化vue3项目 以vue3为基座
npm init vue@latest
// 下载vue-router
npm install vue-router@4.0.12 --save

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

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

相关文章

684.美的集团六三二项目流程变革框架整体规划方案132页PPT

读者朋友大家好&#xff0c;最近有会员朋友咨询晓雯&#xff0c;关于集团公司流程变革框架整体规划的问题&#xff0c;晓雯查找到一份《美的集团632项目流程变革框架整体规划方案》&#xff0c;下面是部分内容分享&#xff0c;欢迎大家下载学习。 知识星球APP搜索【战略咨询文…

基于CentOS Stream 9平台安装JDK17.0.12

官方&#xff1a; https://www.oracle.com/java/technologies/downloads/#java17 1. 下载&#xff1a; https://download.oracle.com/java/17/latest/jdk-17_linux-x64_bin.tar.gz 2. 存放目录 mkdir /usr/local/javacd /usr/local/java3. 解压 tar -zxvf jdk-17_linux-x64_…

JQuery异步请求与Flask后端通信、this和event指针汇总

目录 一.JQuery与Flask通信的三种方法 1.1$.ajax() 1.2$.get() 1.3$.post() 二.forEach()方法 三.this指针 3.1为什么要用this指针 3.2this的指向 3.3this指针的四种绑定方式 3.3.1默认绑定 3.3.2隐式绑定 3.3.3显式绑定 3.3.4new绑定 3.3.5通过标签调用this指针…

【云原生】Kubernetes中crictl的详细用法教程与应用实战

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

Glyph-ByT5-v2多语言高精度文字海报

微软亚洲研究院、清华大学、北京大学、利物浦大学联合推出渲染高视觉美感文本惊艳海报&#xff0c;效果媲美DALL-E3支持10种不同语言的准确视觉文本渲染项目仓库&#xff1a;https://github.com/AIGText/Glyph-ByT5i68爱六八,链接你我他&#xff1a;https://i68.ltd

基于物联网的区块链算力网络,IGP/BGP协议

目录 基于物联网的区块链算力网络 IGP/BGP协议 IGP(内部网关协议) BGP(边界网关协议) 内部使用ISP的外部使用BGP的原因 一、网络规模和复杂性 二、路由协议的特性 三、满足业务需求 四、结论 基于物联网的区块链算力网络 通 过 多个物联网传感器将本地计算…

鸿蒙HarmonyOS开发:@Observed装饰器和@ObjectLink装饰器:嵌套类对象属性变化

文章目录 一、装饰器二、概述三、限制条件四、装饰器说明五、Toggle组件1、子组件2、接口3、ToggleType枚举4、事件 六、示例演示1、代码2、效果 一、装饰器 State装饰器&#xff1a;组件内状态Prop装饰器&#xff1a;父子单向同步Link装饰器&#xff1a;父子双向同步Provide装…

Windows10安装CMake图文教程

CMake是一个跨平台的开源构建工具&#xff0c;用于管理软件构建过程。CMake允许开发人员使用简单的语法来描述项目的构建过程&#xff0c;而无需直接处理特定于操作系统或编译器的细节。开发人员可以编写CMakeLists.txt文件来指定项目的源文件、依赖项和构建规则&#xff0c;然…

2024杭电多校第三场

目录 1001-深度自同构 1003-游走 1007-单峰数列 1008-比特跳跃 1011-抓拍 1012-死亡之组 1001-深度自同构 每个数的答案其实与它的各个因数有关&#xff0c;正向递推一下 #include <bits/stdc.h> using namespace std; #define int long long const int N1e65; co…

计算机毕业设计选题推荐-服装生产管理系统-Java/Python项目实战

✨作者主页&#xff1a;IT研究室✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Python…

超市客流统计,AI智能分析算法,生成精准客户画像

随着科技的进步&#xff0c;零售行业正经历着前所未有的变革。其中&#xff0c;超市作为零售业态的重要组成部分&#xff0c;面临着如何更有效地吸引顾客、提升购物体验、增加销售额等挑战。借助先进的客流统计系统和AI智能分析算法&#xff0c;超市不仅能够准确地统计客流量&a…

共建数智江城:生态沃土如何孕育技术普惠的硕果

当人们热议一线、新一线等城市综合竞争力时&#xff0c;数字经济早已成为城市之间竞争的新赛道。 作为国家首批智慧城市建设试点城市&#xff0c;武汉一直是数字经济发展的先锋。2023年&#xff0c;武汉建成数字经济产业园区30家&#xff0c;数字经济规模占地区生产总值比重达4…

一篇文章教你学会二叉树的链表实现及其oj题(附源码)

前言 前面我们通过堆实现了二叉树&#xff0c;接下来我们用链表实现二叉树。 1. 实现链式结构二叉树 1.1 结构体定义 二叉树的每个结点需要两个指针&#xff0c;分别指向其左孩子和右孩子。还有一个结点域&#xff0c;存储数据。 还是将数据类型重命名&#xff0c;便于后面…

【JavaEE】通过Linux部署Web项目到云服务器上

一.配置部署所需的环境. 1.1 什么是部署? 要想知道什么是部署, 就要先了解我们在日常开发的过程中所设计到的几种环境: 开发环境: 软件开发环境指的是开发人员在创建、测试和部署软件应用程序时所需的一系列硬件、软件、工具和流程的集合。它是为了支持软件开发过程而构建的…

文件包含漏洞--pyload

文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 一.PHP伪协议利用 php://协议 php://filter &#xff1a;用于在读取作用和写入文件时进行过滤和转换操作。 作用1&#xff1a;利用base64编码过滤器读取源码 通常利用文件包含执行php://filte…

哈希表专题

题解之前&#xff1a; 1.有关unordered_map的count功能&#xff1a;查询key&#xff01; Leetcode 1.两数之和 解题思路&#xff1a; class Solution { public:vector<int> twoSum(vector<int>& nums, int target) {vector<int> res;// key:具体的数值(便…

【计算机毕业设计】838装修公司CRM系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

c# - - - ASP.NET Core 网页样式丢失,样式不对

c# - - - ASP.NET Core 网页样式丢失&#xff0c;样式不对 问题 正常样式是这样的。 修改项目名后&#xff0c;样式就变成这样了。底部的内容跑到中间了。 解决 重新生成解决方案&#xff0c;然后发布网站。 原因&#xff1a; 修改项目名之前的 div 上有个这个自定义属…

大数据采集工具——Flume简介安装配置使用教程

Flume简介&安装配置&使用教程 1、Flume简介 一&#xff1a;概要 Flume 是一个可配置、可靠、高可用的大数据采集工具&#xff0c;主要用于将大量的数据从各种数据源&#xff08;如日志文件、数据库、本地磁盘等&#xff09;采集到数据存储系统&#xff08;主要为Had…

React Native在移动端落地实践

在移动互联网产品迅猛发展的今天&#xff0c;技术的不断创新使得企业越来越注重降低成本、提升效率。为了在有限的开发资源下迅速推出高质量、用户体验好的产品&#xff0c;以实现公司发展&#xff0c;业界催生了许多移动端跨平台解决方案。这些方案不仅简化了开发流程&#xf…