微前端 无界基本用法

目录

无界方案​

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

路由同步机制​

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

通信机制​

优势​

无界入门


无界方案

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

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

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

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

收益

  • 组件方式来使用微前端

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

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

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

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

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

  • 应用切换没有清理成本

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

路由同步机制

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

### 无界框架中子应用方法调用的实现方式 在微前端架构中,无界框架(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、付费专栏及课程。

余额充值