single-spa 源码解析1
因为公司开发中涉及到微前端的概念的使用（项目太大了），先熟悉下代码（主要是代码也不是很多）方便以后使用和维护。
微前端简介
微前端有很多的类型，其主要的原理是根据路由的变化调用不同的子应用，其中路由的变化也可以是主应用的自己是实现的状态管理。不同的地方在于实现方式的不一样:
- 最易于理解的是路由的分发,比如新旧版服务切换，其实就是微前端，根据请求地址判断是新版还是旧版，返回相应的应用。当然应用可以设置多个
- iframe实现，将子应用放在主应用的iframe中，切换地址来切换应用
- 组件 将应用组件化，在主应用中控制组价的挂载和卸载
- 与single-spa 子应用背身包装成一个具有生命周期的应用，主应用根据路由的变化来控制子应用的呈现
single-spa的优点：单页应用无需刷新，既可以挂载应用也可以挂载组件，不同类型的框架（react,vue,angular）的应用不会互相影响。
single-spa库完成的是响应路由变化控制子应用的生命周期。具体的子应用加载方式，各个子应用之间的通信,样式文件的挂载并没有提供解决方案,这些问题都有其他的解决方法了。
single-spa 简介
Single-spa 是一个将多个单页面应用聚合为一个整体应用的 JavaScript 微前端框架。
Single-spa 从现代框架组件生命周期中获得灵感，将生命周期应用于整个应用程序。 它脱胎于 Canopy 使用 React + React-router 替换 AngularJS + ui-router 的思考，避免应用程序被束缚。现在 single-spa 几乎支持任何框架。 由于 JavaScript 因其许多框架的寿命短而臭名昭著，我们决定让它在任何您想要的框架都易于使用。
Single-spa 包括以下内容:
- Applications，每个应用程序本身就是一个完整的 SPA (某种程度上)。 每个应用程序都可以响应 url 路由事件，并且必须知道如何从 DOM 中初始化、挂载和卸载自己。 传统 SPA 应用程序和 Single SPA 应用程序的主要区别在于，它们必须能够与其他应用程序共存，而且它们没有各自的 html 页面。
例如，React 或 Angular spa 就是应用程序。 当激活时，它们监听 url 路由事件并将内容放在 DOM上。 当它们处于非活动状态时，它们不侦听 url 路由事件，并且完全从 DOM 中删除。
- 一个 single-spa-config配置, 这是html页面和向Single SPA注册应用程序的JavaScript。每个应用程序都注册了三件东西
A name 注册子应用名称
A function (加载应用程序的代码)
A function (确定应用程序何时处于活动状态/非活动状态)
这两个概念会在下面的分析中详细讲解。下面部分可以看完再回来看看
- 如何从 DOM 中初始化、挂载和卸载自己 独立应用中是自己控制挂载，在执行挂载时默认初始化，没有卸载
- 没有html页面 没有html页面子应用挂载和卸载都要自己控制，不要影响其他的应用
- 注册的相关方法
概念
single-spa库完成的是响应路由(页面地址)变化控制子应用的生命周期,这就是single-spa完成的功能
- 其中响应路由可以通过监听页面地址变化（history对象的监听）来实现
- 生命周期的方法由子应用提供，主应用种维护了注册的子应用的队列以及各子应用的生命周期状态，
子应用生命周期和对应状态
rxPJ9U.png
在single-spa中的子应用完整的生命周期中包含 加载load 初始bootstrap 挂载mount 销毁unmount 卸载unload 这几个生命周期，其中初始、挂载、销毁是子应用在加载后提供的，类似子应用是个模块提供了这三个生命周期方法。加载是在主应用中国注册时提供的，卸载是主应用加给子应用的。在子应用不同的生命周期状态用不用的状态status来描述。
生命周期的方法是异步的，需返回promise对象，所以每一步的方法执行会产生三个状态（类似promise），进行中 成功和失败。
为了便于理解将bootstrap和mount生命周期合并，统一称为mount 初始化生命周期是为了挂载做准备
那子应用中的生命周期包括 加载 挂载 销毁 和 卸载四个，状态包括每种的进行中和成功，以及统一的运行失败的状态
single-spa源码中的结构和重要方法
rxPODs.png
运行原理
rzNZse.png
网友评论