微前端之再说无界的使用

  • 运行模式
    • 保活模式
    • 单例模式
    • 重建模式
  • 生命周期改造
    • 改造入口函数:
  • 应用间通信
    • 原理
    • props 通信
      • 主应用可以通过 props 注入数据和方法:
      • 子应用可以通过 $wujie 对象来获取数据:
    • window 通信
      • 主应用调用子应用的全局数据:
      • 子应用调用主应用的全局数据:
    • 中心化 EventBus 通信机制
      • 获取 bus 实例:
      • 通信方法:

运行模式

官方地址:https://wujie-micro.github.io/doc/guide/mode.html

在微前端框架中,子应用放置在主应用页面中随着主应用页面的打开和关闭反复的激活和销毁,而在无界微前端框架中子应用是否保活以及是否进行生命周期的改造会进入完全不同的处理流程

保活模式

子应用的 alive 设置为true时进入保活模式,内部的数据和路由的状态不会随着页面切换而丢失。

//设置子应用demo
setupApp({name: "demo",... alive: boolean, /** 子应用保活,state不会丢失 */...
});

在保活模式下,子应用只会进行一次渲染,页面发生切换时承载子应用dom的webcomponent会保留在内存中,当子应用重新激活时无界会将内存中的webcomponent重新挂载到容器上

保活模式下改变 url 子应用的路由不会发生变化,需要采用 通信 的方式对子应用路由进行跳转

注意

保活的子应用的实例不会销毁,子应用被切走了也可以响应 bus 事件,非保活的子应用切走了监听的事件也会全部销毁,需要等下次重新 mount 后重新监听。

单例模式

子应用的alive为false且进行了生命周期改造时进入单例模式。

子应用页面如果切走,会调用window.__WUJIE_UNMOUNT销毁子应用当前实例,子应用页面如果切换回来,会调用window.__WUJIE_MOUNT渲染子应用新的子应用实例

在单例式下,改变 url 子应用的路由会发生跳转到对应路由

如果主应用上有多个菜单栏用到了子应用的不同页面,在每个页面启动该子应用的时候将name设置为同一个,这样可以共享一个wujie实例,承载子应用js的iframe也实现了共享,不同页面子应用的url不同,切换这个子应用的过程相当于:销毁当前应用实例 => 同步新路由 => 创建新应用实例

重建模式

子应用既没有设置为保活模式,也没有进行生命周期的改造则进入了重建模式,每次页面切换不仅会销毁承载子应用dom的webcomponent,还会销毁承载子应用js的iframe,相应的wujie实例和子应用实例都会被销毁

重建模式下改变 url 子应用的路由会跳转对应路由,但是在 路由同步 场景并且子应用的路由同步参数已经同步到主应用url上时则无法生效,因为改变url后会导致子应用销毁重新渲染,此时如果有同步参数则同步参数的优先级最高

生命周期改造

官方地址:https://wujie-micro.github.io/doc/guide/start.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E6%94%B9%E9%80%A0

改造入口函数:

  • 将子应用路由的创建、实例的创建渲染挂载到window.__WUJIE_MOUNT函数上
  • 将实例的销毁挂载到window.__WUJIE_UNMOUNT上
  • 如果子应用的实例化是在异步函数中进行的,在定义完生命周期函数后,请务必主动调用无界的渲染函数 window.__WUJIE.mount()(见 vite 示例)
let app;function renderApp() {app = new Vue({router,store,render: (h) => h(App),});app.$mount("#app");
}function destroyApp() {app.$destroy();
}if (window.__POWERED_BY_WUJIE__) {window.__WUJIE_MOUNT = renderApp;window.__WUJIE_UNMOUNT = destroyApp;// // Vite 需要主动调用 wujie 的渲染函数// window.__WUJIE.mount();
} else {renderApp();
}

应用间通信

无界提供多种通信方式:

  • props 数据注入、
  • window.parent 直接通信、
  • 去中心化 EventBus 通信机制

原理

  • 子应用 js 在和主应用同域的 iframe 内运行,所以 window.parent 可以直接拿到主应用的 window 对象来进行通信
  • 主应用可以向子应用注入 props 对象,里面可以注入数据和方法供子应用调用
  • 内置的 EventBus 去中心化通信方案可以让应用之间方便的直接通信

props 通信

主应用可以通过 props 注入数据和方法:

<WujieVue name="xxx" url="xxx" :props="{ data: xxx, methods: xxx }"></WujieVue>

子应用可以通过 $wujie 对象来获取数据:

const props = window.$wujie?.props;

<button @click="props.methods()">按钮</button>

window 通信

由于子应用运行的 iframe 的 src 和主应用是同域的,所以相互可以直接通信。

主应用调用子应用的全局数据:

window.document.querySelector("iframe[name=子应用id]").contentWindow.xxx;

<template><div style="width: 300px; margin: 0 0 0 -2px; border: 2px solid #ebebeb; background: #f8f8f8;"><button @click="getVueChild1Data">获取子应用数据</button><WujieVue width="100%" height="100%" name="vue3Child1" :url="vue3Child1Url"  :props="{ globalData: 'globalData20240301', methods: globalData20240301Nethods }"/></div>
</template><script>  ... getVueChild1Data(){console.log('getVueChild1Data')console.log(window.document.querySelector("iframe[name=vue3Child1]"))} 
</script>

注意子应用id一定要一致

子应用调用主应用的全局数据:

window.parent.xxx;

中心化 EventBus 通信机制

wujie 提供一套去中心化的通信方案,主应用和子应用、子应用和子应用都可以通过这种方式方便的进行通信, 详见 api: https://wujie-micro.github.io/doc/api/bus.html#bus

获取 bus 实例:
// 主应用
import WujieVue from "wujie-vue";
const { bus } = WujieVue;// 子应用
window.$wujie?.bus
通信方法:
// 监听事件
bus.$on("事件名字", (arg1, arg2, ...) => {});
// 发送事件
bus.$emit("事件名字", arg1, arg2, ...);
// 取消事件监听
bus.$off("事件名字", (arg1, arg2, ...) => {});

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

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

相关文章

每天学习一个Linux命令之find

每天学习一个Linux命令之find 概述 在Linux系统中&#xff0c;find命令是一个非常强大的工具&#xff0c;用于查找和操作文件和目录。它可以根据一些条件来搜索指定路径下的文件&#xff0c;并执行相应的操作。本篇博客将详细介绍find命令的各个可用选项及其用法。 基本语法…

lvs集群中NAT模式

群集的含义 由多台主机构成&#xff0c;但对外表现为一个整体&#xff0c;只提供一个访问入口&#xff0c;相当于一台大型的计算机。 横向发展:放更多的服务器&#xff0c;有调度分配的问题。 垂直发展&#xff1a;升级单机的硬件设备&#xff0c;提高单个服务器自身功能。 …

如何保证消息不丢之MQ重试机制消息队列

1. 简介 死信队列&#xff0c;简称&#xff1a;DLX&#xff0c;Dead Letter Exchange&#xff08;死信交换机&#xff09;&#xff0c;当消息成为Dead message后&#xff0c;可以被重新发送到另外一个交换机&#xff0c;这个交换机就是DLX 那么什么情况下会成为Dead message&a…

波卡 Alpha 计划启动,呼唤先锋创新者重新定义 Web3 开发

原文&#xff1a;https://polkadot.network/blog/the-polkadot-alpha-program-a-new-era-for-decentralized-building-collaboration/ 编译&#xff1a;OneBlock 区块链领域不断发展&#xff0c;随之而来的是发展和创新机会的增加。而最新里程碑是令人振奋的 Polkadot Alpha …

深入理解nginx一致性哈希负载均衡模块[上]

1. 引言 在现代的网络应用中&#xff0c;负载均衡是一个至关重要的组件。它能够分配流量到多个服务器上&#xff0c;实现高可用性和性能扩展。Nginx是一个广泛使用的高性能Web服务器和反向代理服务器&#xff0c;其负载均衡模块提供了多种算法来实现流量的分发。其中&#xff0…

【刷题记录】详谈设计循环队列

下题目为个人的刷题记录&#xff0c;在本节博客中我将详细谈论设计循环队列的思路&#xff0c;并给出代码&#xff0c;有需要借鉴即可。 题目&#xff1a;LINK 循环队列是线性表吗&#xff1f;或者说循环队列是线性结构吗&#xff1f; 对于这个问题&#xff0c;我们来看一下线…

【Linux进阶之路】网络 —— “?“ (下)

文章目录 前言一、概念铺垫1.TCP2.全双工 二、网络版本计算器1. 原理简要2. 实现框架&&代码2.1 封装socket2.2 客户端与服务端2.3 封装与解包2.4 请求与响应2.5 对数据进行处理2.6 主程序逻辑 3.Json的简单使用 总结尾序 前言 在上文我们学习使用套接字的相关接口进行了…

面试经典150题(108-110)

leetcode 150道题 计划花两个月时候刷完之未完成后转&#xff0c;今天&#xff08;第3天&#xff09;完成了3道(108-110)150 108.(201. 数字范围按位与) 题目描述&#xff1a; 给你两个整数 left 和 right &#xff0c;表示区间 [left, right] &#xff0c;返回此区间内所有数…

Tomcat的安装

下载Tomcat&#xff08;这里以Tomcat8.5为例&#xff09; 直接进入官网进行下载&#xff0c;Tomcat官网 选择需要下载的版本&#xff0c;点击下载这里一定要注意&#xff1a;下载路径一定要记住&#xff0c;并且路径中尽量不要有中文&#xff01;&#xff01;&#xff01;&…

怎么把视频变成gif动图?一招在线生成gif动画

MP4是一种常见的视频文件格式&#xff0c;它是一种数字多媒体容器格式&#xff0c;可以用于存储视频、音频和字幕等多种媒体数据。MP4格式通常用于在计算机、移动设备和互联网上播放和共享视频内容。要将MP4视频转换为GIF格式&#xff0c;您可以使用专门的视频转gif工具。这个工…

三款顶级开源RAG (检索增强生成)工具:Verba、Unstructured 和 Neum

三款顶级开源RAG (检索增强生成)工具&#xff1a;Verba、Unstructured 和 Neum 概述 随着企业对话式数据处理需求的提升&#xff0c;面临的挑战是数据隐私性和缺乏企业级解决方案。虽然类似LangChain能在短时间内构建RAG应用&#xff0c;但忽视了文档解析、多来源数据ETL、批量…

Python 对Excel工作表中的数据进行排序

在Excel中&#xff0c;排序是整理数据的一种重要方式&#xff0c;它可以让你更好地理解数据&#xff0c;并为进一步的分析和报告做好准备。本文将介绍如何使用第三方库Spire.XLS for Python通过Python来对Excel中的数据进行排序。包含以下三种排序方法示例&#xff1a; 按数值…

【洛谷 P8723】[蓝桥杯 2020 省 AB3] 乘法表 题解(数学+进制转换+字符串)

[蓝桥杯 2020 省 AB3] 乘法表 题目描述 九九乘法表是学习乘法时必须要掌握的。在不同进制数下&#xff0c;需要不同的乘法表。 例如, 四进制下的乘法表如下所示&#xff1a; 1*11 2*12 2*210 3*13 3*212 3*321请注意&#xff0c;乘法表中两个数相乘的顺序必须为样例中所示的…

从0开始的 Vue 生活

Vue 一、配置环境1.1 安装node.js1.1.1 node.js 下载1.1.2 node.js 安装1.1.3 node.js 配置 1.2 安装VSCode1.2.1 VSCode 下载1.2.2 VSCode 安装1.2.3 VSCode 配置 二、创建Vue项目2.1 使用命令行创建Vue项目2.2 使用VSCode运行Vue项目2.3 尝试编写Vue项目2.3.1 准备工作2.3.2 …

线性代数笔记14--投影

1. 一维空间投影 p X A e B − p B − X A A ⊤ e 0 A ⊤ ( B − X A ) 0 X A ⊤ A A ⊤ B X A ⊤ B A ⊤ A p X A A A ⊤ B A ⊤ A pXA\\ eB-pB-XA\\ A^{\top}e0\\ A^{\top}(B-XA)0\\ XA^{\top}AA^{\top}B\\ X\frac{A^{\top}B}{A^{\top}A}\\ pXAA\frac{A^{\top}B}{A^…

Java开发与配置用到的各类中间件官网

开发配置时用到了一些官网地址&#xff0c;记录一下。 activemq 官网&#xff1a;ActiveMQ elk 官网&#xff1a;Elasticsearch 平台 — 大规模查找实时答案 | Elastic nginx 官网&#xff1a;nginx maven 官网&#xff1a;Maven – Welcome to Apache Maven nexus 官网&a…

Zoom软件怎么购买?zoom付费订阅教程

首先&#xff0c;让我们来了解一下Zoom的各个版本以及它们的价格。简单来说&#xff0c;Zoom分为免费版和收费版&#xff0c;收费版又包括专业版、商业版和企业版。 一、免费版 Zoom的免费版功能已经非常实用了&#xff0c;适合个人用户和小团队使用。免费版提供以下功能: 最多…

centos7 python3.12.1 报错 No module named _ssl

https://blog.csdn.net/Amio_/article/details/126716818 安装python cd /usr/local/src wget https://www.python.org/ftp/python/3.12.1/Python-3.12.1.tgz tar -zxvf Python-3.12.1.tgz cd Python-3.12.1/ ./configure -C --enable-shared --with-openssl/usr/local/opens…

小程序学习

一、第一天 1、小程序体验 2、注册账号 小程序 (qq.com) 3、开发工具下载 下载 / 稳定版更新日志 (qq.com) 4、目录结构 "navigationBarBackgroundColor": "#00b26a" 配置头部背景色 4、wxml模板介绍 5、wxss 6、js文件 7、宿主环境 1、通信主体 2…

spring boot 2.4.x 之前版本(对应spring-cloud-openfeign 3.0.0之前版本)feign请求异常逻辑

目录 feign SynchronousMethodHandler 第一部分 第二部分 第三部分 spring-cloud-openfeign LoadBalancerFeignClient ribbon AbstractLoadBalancerAwareClient 在之前写的文章配置基础上 https://blog.csdn.net/zlpzlpzyd/article/details/136060312 因为从 spring …