微前端 micro-app 源码研究-提前准备
https://blog.csdn.net/weixin_43856422/article/details/127440961
官方教程地址
- micro-app仓库地址
- simple-micro-app仓库地址
- 从零开始写一个微前端框架-渲染篇
- 从零开始写一个微前端框架-沙箱篇
- 从零开始写一个微前端框架-样式隔离篇
- 从零开始写一个微前端框架-数据通信篇
- micro-app介绍
从零开始写一个微前端框架-渲染篇
https://github.com/bailicangdu/simple-micro-app
HTMLLinkElement
HTMLStyleElement
HTMLScriptElement
cloneNode
微前端的基本渲染操作
vue2 里定义类库别名 simple-micro-app, 在main.js里引用 import SimpleMicroApp from "simple-micro-app
别名 simple-micro-app 里指向了根目录中的 index.js, 即微前端框架的入口文件.
引入simple-micro-app后使用他的start()方法, 启动应用.
element.js 里定义了 自定义组件(export function defineElement () {... window.customElements.define('micro-app', MyElement); }), 在自定义组件生命周期的connnectedCallback() 事件里初始化应用(const app = new CreateApp({ name, url, container });), 这里也缓存了当前应用实例(appInstanceMap.set(this.name, app))
image.png
CreateApp - app.js
从零开始写一个微前端框架-沙箱
创建沙箱
由于每个子应用都需要一个独立的沙箱，所以我们通过class创建一个类：SandBox，当一个新的子应用被创建时，就创建一个新的沙箱与其绑定。
使用沙箱
fragment - createDocumentFragment()
