微前端 无界基本用法

目录

无界方案​

应用加载机制和 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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

前端 贾公子

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

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

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

打赏作者

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

抵扣说明:

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

余额充值