wujie微前端接入笔记

由于项目目前采用 wujie 方案，所以本文重点介绍 wujie

!!! 如果图片打不开，请在本机访问，图片在外网图床

主应用 wujie

  • src\components\Layout\WujieLayout : 无界子应用渲染的容器
  • src\components\Layout\hooks: 无界相关的 hook

子应用类似

1.什么是微前端

微前端是一种软件架构模式，旨在将前端应用程序拆分为更小、更独立的部分，这些部分可以独立开发、部署和维护。每个微前端部分代表着一个小型的前端应用，可以由不同的团队独立开发，并且可以独立部署到生产环境中。这种模式使得团队可以更灵活地构建和扩展前端应用，同时降低了应用的复杂性和维护成本。通过微前端，不同团队可以在不同的技术栈下开发各自的前端功能，并将它们组合成一个完整的前端应用。

2. 使用场景

  1. 统一企业管理平台的构建：例如，创建一个企业管理平台，将现有的采购系统和财务系统集成到同一平台中。这种方式能够统一管理和操作多个独立系统，提高了操作的便捷性和效率，同时，在代码层面也能更多的复用公共模块。

  2. 大型应用的拆分与集成：对于一个庞大的应用，为了减少开发和维护的复杂性及成本，可以将其分解为多个较小的应用。这些小应用单独开发和部署，最后通过一个统一的平台进行集成。这种方法不仅简化了各个应用的管理，还提高了整体的灵活性和可维护性。

  3. 技术框架的灵活选择和试验：在一个主要使用 Vue 框架的应用中，如果开发者希望在一个独立模块中尝试使用 React 框架，微前端架构可以支持这种试验。开发者可以独立开发和部署这个模块，然后在完成后将其重新集成回原来的应用中。这种方式允许开发团队在不同模块中灵活选择最合适的技术栈，而不必局限于单一框架。

3.微前端方案应该具有的能力

  • 子应用的加载和卸载能力
    页面需要从一个子应用切换到另一个子应用，框架必须具备加载、渲染、切换的能力

  • 子应用独立运行的能力
    子应用运行会污染全局的 window 对象，样式会污染其他应用，必须有效的隔离起来

  • 子应用路由状态保持能力
    激活子应用后，浏览器刷新、前进、后退子应用的路由都应该可以正常工作

  • 应用间通信的能力
    应用间可以方便、快捷的通信

4.微前端技术方案对比

4.1 iframe 方案

优点

  • 上手简单，通过 iframe 标签直接引入子应用的 url 就能实现
  • web 应用隔离的非常完美，无论是 js、css、dom 都完全隔离开来

缺点

  • 路由状态丢失，刷新一下，iframe 的 url 状态就丢失了
  • dom 割裂严重，弹窗只能在 iframe 内部展示，无法覆盖全局
  • web 应用之间通信非常困难
  • 每次打开白屏时间太长，对于 SPA 应用来说无法接受

4.2 single-spa 方案

single-spa 是一个目前主流的微前端技术方案，其主要实现思路：

  • 预先注册子应用(激活路由、子应用资源、生命周期函数)
  • 监听路由的变化，匹配到了激活的路由则加载子应用资源，顺序调用生命周期函数并最终渲染到容器

乾坤微前端架构则进一步对 single-spa 方案进行完善，主要的完善点：

  • 子应用资源由 js 列表修改进为一个 url，大大减轻注册子应用的复杂度
  • 实现应用隔离，完成 js 隔离方案 （window 工厂） 和 css 隔离方案 （类 vue 的 scoped）
  • 增加资源预加载能力，预先子应用 html、js、css 资源缓存下来，加快子应用的打开速度

优点

  • 监听路由自动的加载、卸载当前路由对应的子应用
  • 完备的沙箱方案，js 沙箱做了 SnapshotSandbox、LegacySandbox、ProxySandbox 三套渐进增强方案，css 沙箱做了两套 strictStyleIsolation、experimentalStyleIsolation 两套适用不同场景的方案
  • 路由保持，浏览器刷新、前进、后退，都可以作用到子应用
  • 应用间通信简单，全局注入

缺点

  • 基于路由匹配，无法同时激活多个子应用，也不支持子应用保活
  • 改造成本较大，从 webpack、代码、路由等等都要做一系列的适配
  • css 沙箱无法绝对的隔离，js 沙箱在某些场景下执行性能下降严重 -无法支持 vite 等 ESM 脚本运行

4.3 无界方案

  • 应用加载机制和 js 沙箱机制
  • 将子应用的 js 注入主应用同域的 iframe 中运行，iframe 是一个原生的 window 沙箱，内部有完整的
  • history 和 location 接口，子应用实例 instance 运行在 iframe 中，路由也彻底和主应用解耦，可以直接在业务组件里面启动应用。

优点

  • 组件方式来使用微前端

  • 不用注册，不用改造路由，直接使用无界组件，化繁为简

  • 一个页面可以同时激活多个子应用

  • 子应用采用 iframe 的路由，不用关心路由占用的问题

  • 天然 js 沙箱，不会污染主应用环境

  • 不用修改主应用 window 任何属性，只在 iframe 内部进行修改

  • 应用切换没有清理成本

  • 由于不污染主应用，子应用销毁也无需做任何清理工作

路由同步机制

在 iframe 内部进行 history.pushState，浏览器会自动的在 joint session history 中添加 iframe 的 session-history，浏览器的前进、后退在不做任何处理的情况就可以直接作用于子应用

劫持 iframe 的 history.pushState 和 history.replaceState，就可以将子应用的 url 同步到主应用的 query 参数上，当刷新浏览器初始化 iframe 时，读回子应用的 url 并使用 iframe 的 history.replaceState 进行同步

  • 浏览器刷新、前进、后退都可以作用到子应用
  • 实现成本低，无需复杂的监听来处理同步问题
  • 多应用同时激活时也能保持路由同步

iframe 连接机制和 css 沙箱机制

无界采用 webcomponent 来实现页面的样式隔离，无界会创建一个 wujie 自定义元素，然后将子应用的完整结构渲染在内部

子应用的实例 instance 在 iframe 内运行，dom 在主应用容器下的 子应用的实例 instance 在 iframe 内运行，dom 在主应用容器下的 webcomponent 内，通过代理 iframe 的 document 到 webcomponent，可以实现两者的互联。

将 document 的查询类接口：getElementsByTagName、getElementsByClassName、getElementsByName、getElementById、querySelector、querySelectorAll、head、body 全部代理到 webcomponent，这样 instance 和 webcomponent 就精准的链接起来。

当子应用发生切换，iframe 保留下来，子应用的容器可能销毁，但 webcomponent 依然可以选择保留，这样等应用切换回来将 webcomponent 再挂载回容器上，子应用可以获得类似 vue 的 keep-alive 的能力.

  • 天然 css 沙箱

  • 直接物理隔离，样式隔离子应用不用做任何修改

  • 天然适配弹窗问题

  • document.body 的 appendChild 或者 insertBefore 会代理直接插入到 webcomponent，子应用不用做任何改造

  • 子应用保活

  • 子应用保留 iframe 和 webcomponent，应用内部的 state 不会丢失

  • 完整的 DOM 结构

  • webcomponent 保留了子应用完整的 html 结构，样式和结构完全对应，子应用不用做任何修改

通信机制

承载子应用的 iframe 和主应用是同域的，所以主、子应用天然就可以很好的进行通信，在无界我们提供三种通信方式

  • props 注入机制
    子应用通过$wujie.props 可以轻松拿到主应用注入的数据

  • window.parent 通信机制
    子应用 iframe 沙箱和主应用同源，子应用可以直接通过 window.parent 和主应用通信

  • 去中心化的通信机制
    无界提供了 EventBus 实例，注入到主应用和子应用，所有的应用可以去中心化的进行通信

  • 多应用同时激活在线
    框架具备同时激活多应用，并保持这些应用路由同步的能力

  • 组件式的使用方式
    无需注册，更无需路由适配，在组件内使用，跟随组件装载、卸载

  • 应用级别的 keep-alive
    子应用开启保活模式后，应用发生切换时整个子应用的状态可以保存下来不丢失，结合预执行模式可以获得类似 ssr 的打开体验

  • 纯净无污染

    • 无界利用 iframe 和 webcomponent 来搭建天然的 js 隔离沙箱和 css 隔离沙箱
    • 利用 iframe 的 history 和主应用的 history 在同一个 top-level browsing context 来搭建天然的路由同步机制
    • 副作用局限在沙箱内部，子应用切换无需任何清理工作，没有额外的切换成本

  • 性能和体积兼具

    • 子应用执行性能和原生一致，子应用实例 instance 运行在 iframe 的 window 上下文中，避免 with(proxyWindow){code}这样指定代码执行上下文导致的性能下降，但是多了实例化 iframe 的一次性的开销，可以通过 preload 提前实例化
    • 体积比较轻量，借助 iframe 和 webcomponent 来实现沙箱，有效的减小了代码量

  • 开箱即用

    • 不管是样式的兼容、路由的处理、弹窗的处理、热更新的加载，子应用完成接入即可开箱即用无需额外处理，应用接入成本也极低

5.跳转

5.1 主应用跳转到子应用，子应用第一次没有通过 bus.$on 接收到事件

在 React 中，可能 b 网址的组件还没完全渲染（即还未挂载完成），事件监听就已经开始了。确保 b 网址的组件已经完全渲染并准备好接收事件。

将发送的事件放在主应用的激活钩子中触发，确保子应用渲染完成后再发送事件，这样子应用才能接收到事件

// 激活处理
function

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

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

相关文章

进程间通信（1）管道

进程间通信（1）管道

我最近开了几个专栏，诚信互三！ > |||《算法专栏》：：刷题教程来自网站《代码随想录》。||| > |||《C专栏》：：记录我学习C的经历，看完你一定会有收获。||| > |||《Linux专栏》&#xff1…
阅读更多...
【C语言】内存函数-memcpy-memmove-memset...用法及实现，沉淀自己！

【C语言】内存函数-memcpy-memmove-memset...用法及实现，沉淀自己！

&#x1f525;博客主页&#x1f525;&#xff1a;【 坊钰_CSDN博客 】 欢迎各位点赞&#x1f44d;评论✍收藏⭐ 目录 1. memcpy函数使用和模拟实现 2. memmove使用和模拟实现 3. memset函数的使用 4. memcmp函数的使用 1. memcpy函数使用和模拟实现 <string.h>-------…
阅读更多...
Buildroot系统构建学习笔记(以百问网imx6ullPro开发板为例)

Buildroot系统构建学习笔记(以百问网imx6ullPro开发板为例)

一、Builroot是什么&#xff1f; Buildroot是一组Makefile和补丁&#xff0c;可简化并自动化地为嵌入式系统构建完整的、可启动的Linux环境(包括bootloader、Linux内核、包含各种APP的文件系统)。Buildroot运行于Linux平台&#xff0c;可以使用交叉编译工具为多个目标板构建嵌…
阅读更多...
沉思录 (梁实秋)

沉思录 (梁实秋)

链接&#xff1a;https://pan.quark.cn/s/8e27564b02f5
阅读更多...
Python 检测当前系统的内存及硬盘资源，发送邮件告警通知（告警内容包含告警语句及网卡和系统版本时间）

Python 检测当前系统的内存及硬盘资源，发送邮件告警通知（告警内容包含告警语句及网卡和系统版本时间）

颜色块 rootbogon:~ 2024-04-18 16:16:40# cat DefaultColor.py ######################################################################### # File Name: DefaultColor.py # Author: eight # Mail: 18847097110163.com # Created Time: Thu 11 Apr 2024 10:…
阅读更多...
2024年了，抖音小店如此内卷，新手商家还能赚到钱吗？

2024年了，抖音小店如此内卷，新手商家还能赚到钱吗？

大家好&#xff0c;我是电商糖果 关于抖音小店&#xff0c;网上有很多声音一直在说&#xff0c;这个项目不能做了。 已经内卷到一定程度了&#xff0c;新手商家入局&#xff0c;很难在里面喝到一口汤。 糖果是从2020年开始做的抖音小店&#xff0c;算是比较早期的商家了&…
阅读更多...
H3C之GRE VPN

H3C之GRE VPN

华子目录 GRE实验测试 MGRE实验 GRE实验 第一步&#xff1a;接口配置IP地址 <H3C>sys System View: return to User View with CtrlZ. [H3C]sysname r1 [r1]int g0/0 [r1-GigabitEthernet0/0]ip add 192.168.1.1 24 [r1-GigabitEthernet0/0]int g0/1 [r1-GigabitEtherne…
阅读更多...
短视频素材哪里去找？推荐几个视频素材免费下载的网站

短视频素材哪里去找？推荐几个视频素材免费下载的网站

高质量的资源&#xff0c;会让你的视频创作更加生动和具有吸引力。下面我为你介绍世界各地的优质无水印视频素材网站&#xff0c;以拓宽你的创作视野&#xff0c;帮助你在这个视觉革命的时代中脱颖而出。 1. 蛙学府&#xff08;中国&#xff09; 提供各种类别的优质高清视频素…
阅读更多...
续传查询SQL不规范导致漏数的问题

续传查询SQL不规范导致漏数的问题

查询交易记录的时候&#xff0c;&#xff0c;用户需要一页一页往下翻&#xff0c;每点击一次就会将续传接口包发到后端接口进行查询返回下一页的数据&#xff0c;续传接口有几个字段&#xff0c;是续传键值&#xff0c;后端的SQL会根据上次读取到的最后一条往后捞数据 有些同事…
阅读更多...
视频监控平台的web客户端看到的视频画面是黑屏时的处理方法

视频监控平台的web客户端看到的视频画面是黑屏时的处理方法

目录 一、问题描述 二、问题分析 &#xff08;一&#xff09;总体分析 &#xff08;二&#xff09;视频流传输问题的原因分析 1、网络问题 2、设备问题 3、配置和设置问题 4、兼容性问题 三、诊断和排查步骤 &#xff08;一&#xff09;编码方式问题的处理办法 &…
阅读更多...
Redis中的订阅发布(一)

Redis中的订阅发布(一)

订阅发布 概述 Redis的发布与订阅功能由PUBLISH、SUBSCRIBE、PSUBSCRIBE等命令组成。通过执行SUBSCRIBER命令&#xff0c;客户端可以订阅一个或多个频道&#xff0c;从而成为这些频道的订阅者(subscribe)&#xff1a; 每当有其他客户端向被订阅的频道发送消息(message)时&…
阅读更多...
Pytorch实用教程：pytorch使用模型时并没有调用forward函数，那么前向运算是如何执行的呢？

Pytorch实用教程：pytorch使用模型时并没有调用forward函数，那么前向运算是如何执行的呢？

在 PyTorch 中&#xff0c;尽管我们定义了 forward 方法来指定模型的前向传播逻辑&#xff0c;实际上我们通常不直接调用这个方法。相反&#xff0c;我们通过调用模型对象本身来触发前向传播&#xff0c;这背后的机制涉及到了 Python 的 __call__ 方法。 __call__ 方法的作用 …
阅读更多...
flutter 二维数组赋值问题

flutter 二维数组赋值问题

class ExpCellDetailP0J0 {int num;//序号SizeDetail sizeDetail; //格口尺寸参数bool isSelected; //是否选中SelectFileData backFillFile;//本地格口规格设置弹窗里填写后的回填中显示用的格口图片、视频文件ExpCellDetailP0J0({this.num,this.sizeDetail,this.isSelected …
阅读更多...
Java实现二叉搜索树

Java实现二叉搜索树

Java实现二叉搜索树 文章目录 Java实现二叉搜索树一、二叉搜索树概念二、二叉搜索树常规操作三、TreeNode 存储结构实现四、二叉搜索树及其常规操作实现1. 二叉搜索树插入2.二叉搜索树查找3.二叉搜索树删除4.二叉搜索树高度5. 中序遍历打印二叉搜索树 五、BinarySearchTree完整…
阅读更多...
c++的基础语法

c++的基础语法

看到几篇讲c基础语法非常好的文章&#xff0c;忍不住想存下来&#xff0c;以备以后查找。 文章目录 1. 指针(*)、取地址(&)、解引用(*)与引用(&)1.1C 指针运算符&#xff08;& 和 *&#xff09; 1. 指针()、取地址(&)、解引用()与引用(&) 指针(*)、取地址…
阅读更多...
开发语言漫谈-PHP

开发语言漫谈-PHP

PHP即“Hypertext Preprocessor”&#xff0c;怎么看都看不出怎么缩写为PHP。其实最初称为“Personal Home Page”。和之前介绍的语言不同&#xff0c;他是一种服务器端脚本语言&#xff0c;主要用于开发动态网页。PHP语法简单&#xff0c;而且具有跨平台的特性&#xff0c;开发…
阅读更多...
python项目练习——29.贪吃蛇

python项目练习——29.贪吃蛇

游戏初始化： 设置游戏窗口的大小和标题。创建蛇的初始位置和长度。创建食物的初始位置。游戏主循环： 不断监听用户的输入，控制蛇的移动方向。检测蛇是否吃到了食物，如果吃到了，蛇的长度增加，食物重新生成在随机位置。检测蛇是否撞到了墙壁或者自己的身体，游戏结束。蛇的…
阅读更多...
同旺科技 USB TO SPI / I2C适配器读写24LC256--页写

同旺科技 USB TO SPI / I2C适配器读写24LC256--页写

所需设备&#xff1a; 1、USB 转 SPI I2C 适配器&#xff1b;内附链接 2、24LC256芯片 适应于同旺科技 USB TO SPI / I2C适配器升级版、专业版&#xff1b; 从00地址开始写入64个字节&#xff0c;然后再将64个字节读回&#xff1b; 页写时序&#xff1a; 读时序&#xff1a…
阅读更多...
iOS开发 刻度盘 仪表盘，圆点按钮滑动控制，渐变色

iOS开发 刻度盘 仪表盘，圆点按钮滑动控制，渐变色

最近项目需要&#xff0c;想做一个渐变色的刻度盘&#xff0c;圆形按钮滑动控制&#xff0c;所以 用oc写了一下&#xff0c;代码没附上&#xff0c;想看代码可以私信联系&#xff0c;效果如下图。 部分代码 self.drawCenter CGPointMake(self.frame.size.width / 2.0, self.f…
阅读更多...
C语言Linux vim

C语言Linux vim

1. actionmotion dG删到文件尾 ggdG先到开头再删除到末尾 d^到达行首 d$到行尾 2. num action 2dd删除两行 t"向后寻找"找到&#xff0c;找到前面一个位置 f"向后寻找"找到&#xff0c;直接找到本来的位置 diw删除单词并保持在视图状态&#xff…
阅读更多...
最新文章

Copyright @ 2022~2023