微前端 无界基本用法

最新推荐文章于 2025-04-24 14:17:05 发布
最新推荐文章于 2025-04-24 14:17:05 发布
阅读量2.2k 收藏 25
点赞数 28
分类专栏： 微前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63358859/article/details/134812744
版权

目录

无界方案​

应用加载机制和 js 沙箱机制​

路由同步机制​

iframe 连接机制和 css 沙箱机制​

通信机制​

优势​

无界入门

无界方案​

在乾坤的issue中一个议题非常有意思，有个开发者提出能否利用iframe来实现js沙箱能力，这个idea启发了无界方案，下面详细介绍

应用加载机制和 js 沙箱机制​

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

采用这种方式我们可以获得

收益

  • 组件方式来使用微前端

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

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

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

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

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

  • 应用切换没有清理成本

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

路由同步机制​

在iframe内部进行history.pushState，浏览器会自动的在joint session history中添加iframe的

最低0.47元/天 解锁文章
微前端之使用无界创建一个微前端项目
BradenHan的专栏
03-08 2014
主应用不限技术栈，只需引入 wujie、配置子应用路由并启动 wujie 即可。wujie 针对 React 和 Vue 框架分别提供了wujie-vue2wujie-vue3依赖。这里以 Vue2 为例。
微前端无界方案
michael的博客
05-13 3900
微前端无界方案
若依cloud集成无界微前端
weixin_37698534的博客
01-15 350
把微前端无界集成到若依cloud中，解决一个前端代码量太大维护困难，一个主应用其他子应用可以用各种前端技术。
无界微前端
最新发布
weixin_46675635的博客
04-24 756
预加载所需要的静态资源提前从网络中加载到内存中（preloadApp:({name: '唯一标识',exec:true})）如果需要从外部影响Shadow DOM内的样式，使用::part 而不是用/deep/或>>>预执行指的是在应用空闲的时候将子应用提前渲染出来exec:true。场景3：子应用内容跳转路由通知父应用激活相对应路由的侧边栏。场景1：主应用点击主应用的侧边栏，子应用会自动切换路由。└─ 否 → 是否需要高性能组件级集成。└─ 否 → 是否需要IE兼容？场景2：子应用A点击子应用B。
无界微前端使用方法
qq_36546490的博客
10-27 7689
无界微前端
微前端-‘无界‘
qq_58953163的博客
12-25 1938
介绍：微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。（一个web应用中可以独立运行另一个web应用）
微前端——无界wujie
lanmy_dl的博客
12-24 6974
1.全局安装2.使用pnpm -v可以查看版本号3.pnpm比npm的优势，在pnpm中文网的动机这样写pnpm官网简单来说就是，但有100个vue项目，每个项目都会去安装相应的依赖包，这样导致磁盘的缩小和安装速度慢（每次都会重新下载依赖包），很麻烦。但是pnpm使用软链接硬链接和仓库解决。
微前端-无界wujie
An滴饭儿的博客
01-20 1694
无界微前端方案基于 webcomponent 容器 + iframe 沙箱，能够完善的解决适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户的核心诉求。1）子应用 js 在和主应用同域的 iframe 内运行，所以 window.parent 可以直接拿到主应用的 window 对象来进行通信。2） 主应用可以向子应用注入 props 对象，里面可以注入数据和方法供子应用调用。beforeUnmount：子应用卸载前触发（生命周期改造专用）
无界构建微前端？NO！NO！NO！多系统融合思路！
全网同名：PBitW！ 可以去掘金关注我！
02-06 1580
微前端理解 1、微前端概念 2、微前端特性 3、微前端方案 a、iframe b、qiankun c、micro-app d、EMP 方案 e、无界 安装无界 使用 应用跨域问题解决 无界的槽点 换思路 问题一：pxtorem 问题二：区分环境
微前端从源码看无界：为何说它是 qiankun 的 “轻量化替代方案”
vv_bug
04-14 516
无界微前端（Wujie）是一款由腾讯团队开源的微前端框架，专注于解决复杂前端应用的模块化、子应用独立开发和部署等问题。它通过和Shadow DOM技术实现子应用的样式隔离和脚本沙箱，同时支持跨技术栈的无缝集成（如 React、Vue、Angular 等）。具体的特性跟使用就不详细说明了，小伙伴们可以自己查阅「无界」开发文档，今天我们主要是从源码角度去分析下无界微前端框架。
微前端（无界）
热门推荐
qq1195566313的博客
03-20 1万+
微前端已经是一个非常成熟的领域了，但开发者不管采用哪个现有方案，在适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户核心诉求都或存在问题，或无法提供支持。本文提供一种基于 iframe 的全新微前端方案，完善的解决了这些核心诉求。微前端概念微前端是借鉴了微服务的理念，将一个庞大的应用拆分成多个独立灵活的小型应用，每个应用都可以独立开发，独立运行，独立部署，还可以随意组合，这样就降低了耦合度，从而更加灵活。微前端特性。
微前端-monorepo-无界
smz的博客
08-31 3227
本文主要记录微前端框架无界的使用与理解以及monorepo代码管理方式。
微前端 - 以无界为例
小秀的博客
03-31 941
切换页面时保留子应用状态，避免重复渲染。：主应用负责路由管理和子应用容器渲染。：适配无界生命周期，接收主应用传递的。：实现 JS 执行环境的完全隔离。传递和事件总线机制。：天然支持样式隔离。
无界微前端项目实战
云间月
04-30 2378
微前端框架：无界 wujievue微前端是什么 | 无界主应用：Vue 2 + elementui子应用：Vue 3+vite+element plus。
微前端无界机制浅析
kfashfasf的博客
01-13 1525
随着项目的发展，前端SPA应用的规模不断加大、业务代码耦合、编译慢，导致日常的维护难度日益增加。同时前端技术的发展迅猛，导致功能扩展吃力，重构成本高，稳定性低。为了能够将前端模块解耦，通过相关技术调研，最终选择了无界微前端框架作为物流客服系统解耦支持。为了更好的使用无界微前端框架，我们对其运行机制进行了相关了解，以下是对无界运行机制的一些认识。
微前端无界 项目使用记录
lyxkgc的博客
09-26 1392
无界 微前端
wujie 无界 微前端
u010707194的博客
04-17 3894
子应既没有设置为保活模式，也没有进行生命周期的改造则进入了重建模式，每次页面切换不仅会销毁承载子应用。预执行指的是在应用空闲的时候将子应用提前渲染出来，可以进一步提升子应用打开时间，只需要在。当子应用设置为保活模式，切换子应用后仍然可以保持子应用的状态和路由不会丢失。在保活模式下，子应用只会进行一次渲染，页面发生切换时承载子应用。主应用生命周期：（主应用生命周期跟模式没有关系）销毁子应用当前实例，子应用页面如果切换回来。：子应用渲染后触发（生命周期改造专用）：子应用卸载后触发（生命周期改造专用）
微前端框架-无界
m0_56416159的博客
07-10 1383
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化web应用的技术手段及方法策略。无界微前端框架通过引入Web Components和iframe技术，为开发者提供了一种高效、灵活的微前端解决方案。该框架旨在解决现有微前端方案在适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite框架支持、应用共享等用户核心诉求上存在的问题。
微前端 无界 调用子组件的方法
03-25
### 无界框架中子应用方法调用的实现方式 在微前端架构中，无界框架（Boundary Framework）是一种常见的解决方案，用于管理多个独立开发和部署的子应用。为了实现在父应用中调用子应用的方法，通常需要借助特定的技术手段来完成跨边界通信。 #### 1. **通过全局对象暴露方法** 无界框架允许子应用将自己的功能或方法注册到一个全局对象上，这样主应用可以通过访问该全局对象间接调用子应用中的方法。例如，在子应用初始化时可以执行如下代码： ```javascript window.subAppMethods = { sayHello: function(name) { console.log(`Hello, ${name}!`); } }; ``` 随后，主应用可以直接通过 `window.subAppMethods.sayHello('World');` 调用子应用的功能[^1]。 #### 2. **利用事件总线机制** 另一种常用的方式是基于事件驱动模型构建一个事件总线（Event Bus），使得主应用能够向子应用发送消息并触发相应的处理逻辑。以下是简单的实现示例： ##### 子应用端监听事件： ```javascript document.addEventListener('customEvent', (event) => { const data = event.detail; console.log('Received from parent:', data); }); ``` ##### 主应用端派发事件： ```javascript const customEvent = new CustomEvent('customEvent', { detail: 'Message from Parent' }); document.dispatchEvent(customEvent); ``` 这种方式不仅实现了父子之间的交互，还保持了模块间的松耦合特性[^2]。 #### 3. **采用PostMessage API进行跨域通讯** 如果涉及到不同域名下的子应用，则可运用浏览器原生支持的 PostMessage 技术来进行安全有效的数据交换。下面展示了一个基本的例子： ##### 发送方(通常是主应用卡槽所在位置)： ```javascript childWindow.postMessage({ action: 'invokeMethod', methodName: 'sayHello', args: ['User'] }, '*'); ``` ##### 接收方(即目标子应用内部定义好相应处理器)： ```javascript window.onmessage = function(event) { if (event.data.action === 'invokeMethod') { this[event.data.methodName](...event.data.args); // 动态调用指定函数名及其参数列表 } } ``` 此方法特别适合于那些无法直接修改源码或者存在严格同源策略限制的情况[^3]。 ### 总结 综上所述，在微前端环境下使用无界框架时，有多种途径可供选择以达成从外部控制内部业务流程的需求。无论是简单粗暴地挂载公开接口至 window 上还是精心设计一套完善的发布订阅模式乃至依赖标准化协议如 postMessage 都各有千秋需视实际场景灵活选用最佳实践方案。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端 贾公子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值