微前端 无界基本用法

目录

无界方案​

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