single-spa 源码解析 single-spa是一种微前端的实现方案。阿里的qiankun其实是基于这个项目做了二次开发,其实是做了个拓展,提供了html解析与js沙盒两个功能。本文从single-spa的代码实现角度解析一下它的实现原理。 前提假设 single-spa首先要求每个子应用需要提供bootstrap,mount,unmount,update这四个方法,这样每个子...
single-spa-vue函数库可以帮助我们来生成加载子应用的生命周期。你可以通过下面链接:single-spa-vue GIT地址,下载single-spa-vue函数库的源码。 single-spa-vue的源码非常简单,只有几个生成single-spa生命周期的函数。 single-spa-vue方法:single-spa-vue函数库对外提供服务的唯一一个方法,用来接收配置项,并且返回一...
single-spa 源码解析1 single-spa 源码解析1 因为公司开发中涉及到微前端的概念的使用(项目太大了),先熟悉下代码(主要是代码也不是很多)方便以后使用和维护。 微前端简介 微前端有很多的类型,其主要的原理是根据路由的变化调用不同的子应用,其中路由的变化也可以是主应用的自己是实现的状态管理。不同的地方在于实...
single-spa 源码解析2 简化后的代码: // 简化版 single-spa 子应用加载器 状态机// App statusesimport{toUnloadPromise}from"../originalCode/src/lifecycles/unload";constNOT_LOADED="NOT_LOADED";constLOADING_SOURCE_CODE="LOADING_SOURCE_CODE";constNOT_BOOTSTRAPPED="NOT_BOOTSTRAPPED";constBOOTSTRAPPING="...
接下来看看loadApps函数,它的源码如下:function loadApps() { //这里注册了一个微任务,注意是微任务说明并不会马上执行then之后的逻辑 return Promise.resolve().then(() => { //appsToLoad是通过activeWhen规则分析当前用户所在url,得到需要加载的子应用的数组。下面就开始通过map对需要激活的子应用进行遍历 //...
框架源码解读 手写框架 关于微前端的介绍这里就不再赘述了,网上有很多的文章,本文的重点在于刨析微前端框架single-spa的实现原理。 single-spa是一个很好的微前端基础框架,qiankun框架就是基于single-spa来实现的,在single-spa的基础上做了一层封装,也解决了single-spa的一些缺陷。
5 single-spa-vue源码解析 single-spa-vue中提供的singleSpaVue方法会接收userOpts配置信息,配置信息会和默认的配置项defaultOpts合并以后再进行进行后续处理。 5.1 配置项defaultOpts 对于默认的配置项会有下面这几项,这里只介绍一下必填项,appOptions、Vue/createApp。其中的template在并没有在single-spa-vue中被用...
5 single-spa-vue源码解析 single-spa-vue中提供的singleSpaVue方法会接收userOpts配置信息,配置信息会和默认的配置项defaultOpts合并以后再进行进行后续处理。 5.1 配置项defaultOpts 对于默认的配置项会有下面这几项,这里只介绍一下必填项,appOptions、Vue/createApp。其中的template在并没有在single-spa-vue中被用...
最后,求人不如求己,刚完源码再刚一下文档。 这篇文章将不会聊怎么搭建一个 Demo,而是会从 “Why” 和“How” 的角度来聊一下官方文档的都讲了哪些内容,相信看完这篇文章就能看懂 官方的 Demo[2] 了。 一个需求 让我们从一个最小的需求开始说起。有一天产品经理突然说:我们要做一个 A 页面,我看到隔壁...
容器应用默认代码解析 容器应用默认应该不包含任何页面,但是在 single-spa 的容器应用启动后显示了 Welcome 欢迎页面,这是因为在 single-spa 的容器应用中默认注册了一个微应用,名为 @single-spa/welcome,下面解析一下 single-spa 容器应用默认代码。 src 目录用于存放源代码文件: ...