关于无界微前端框架
最新回答
为期待而延续
2024-01-18 15:39:33
无界微前端框架的核心特点与机制如下：
核心原理：
- 无界微前端框架通过将子应用的JS注入主应用同域的iframe中运行，实现子应用和主应用之间的解耦。
- iframe在这里充当了一个window沙箱，内部拥有完整的history和location接口，子应用的JS实例运行于iframe之中。
样式隔离：
- 无界使用Web Components技术定义一个自定义元素，将子应用的DOM渲染在自定义元素内部，实现样式隔离。
- 框架通过代理iframe的document至Web Component自定义元素，使得在iframe内执行DOM操作时，实际上是操作了自定义元素内部的DOM。
运行模式：
- 保活模式：子应用的alive属性设为true时，数据和路由状态在页面切换时不会丢失，子应用仅进行一次渲染，页面切换后内存中的Web Component会被重新挂载。
- 单例模式：子应用的alive属性设为false且经过生命周期改造，页面切走后调用window.WUJIE_UNMOUNT销毁实例，切换回来调用window.WUJIE_MOUNT渲染新的实例。
- 重建模式：未进行保活或改造，每次页面切换都会销毁Web Component和承载子应用的iframe，以及销毁wujie实例和子应用实例。
路由同步机制：
- 无界通过fetch API下载URL指向的页面内容，并将其插入到iframe中。
- 路由同步机制将子应用路径的path、query、hash编码后插入主应用的URL查询参数中，使用子应用的name作为key值。
- 开启同步后，刷新浏览器或分享URL时，子应用的路由状态不会丢失。
- 支持多个子应用的路由同步，浏览器的刷新、前进、后退操作不会影响子应用的路由状态。
跨域应用共享与无缝集成：
- 主应用利用无界实现子应用跨域应用共享。
- 通过框架提供的机制，子应用能在不同页面间灵活切换，保持状态和路由信息的一致性，实现无缝集成。
热门标签
