微前端框架导入加载子应用的方法是什么

本篇内容主要讲解“微前端框架导入加载子应用的方法是什么”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“微前端框架导入加载子应用的方法是什么”吧!下面代码，我指定的entry,就是子应用的访问入口地址微前端到底是怎么回事呢？ 我画了一张图我们今天不谈其他的实现技术细节，坑点，就谈整体架构，这张图就能完全解释清楚那么registerMicroApps,到底做了什么呢？源码解析下，只看重要部分今天：lifeCycles是我们自己传入的生命周期函数（这里先不解释），跟react这种框架一样，微前端针对每个子应用，也封装了一些生命周期，如果你是小白，那我就用最简单的话告诉你，生命周期钩子，其实在框架源码就是一个函数编写调用顺序而已（有的分异步和同步）apps就是我们传入的数组，子应用集合代码里做了一些防重复注册、数据处理等看源码，不要全部都看，那样很费时间，而且你也得不到利益最大化，只看最精髓、重要部分无论上面做了上面子应用去重、数据处理，我只要盯着每个子应用，即app这个对象即可看到了loadApp这个方法，我们可以大概猜测到，是通过这个方法加载下面__rest是对数据进行处理loadApp这个函数有大概300行，挑最重点地方看registerApplication是single-spa的方法，我们这里通过loadApp这个方法，对数据进行处理上面这个函数，应该是整个微前端框架最复杂的地方，它最终会返回一个函数，当成函数传递给single-spa这个库的registerApplication方法使用它的内部是switch case逻辑，然后返回一个数组这是一个逻辑判断重点来了会通过importEntry 去加载entry（子应用地址）上面代码里最重要的，如果我们entry传入字符串，那么就会使用这个函数去加载HTML内容（其实微前端的所有子应用加载，都是把dom节点加载渲染到基座的index.html文件中的一个div标签内）importHTML这个函数，就是我们今晚最重要的一个点传入url地址，发起fetch请求（此时由于域名或者端口不一样，会出现跨域，所有子应用的热更新开发模式下，webpack配置要做以下处理，部署也要考虑这个问题）整个importHTML函数好像很长很长，但是我们就看最重要的地方，一个框架（库），流程线很长+版本迭代原因，需要兼容老的版本，所以很多源码对于我们其实是无用的整个函数，最后返回了一个对象，这里很明显，通过fetch请求，获取了对应子应用entry入口的资源免费云主机、域名文件后，转换成了字符串这里processTpl其实就是对这个子应用的dom模版（字符串格式）进行一个数据拼装，其实也不是很复杂，由于时间关系，可以自己看看过程，重点看结果这里的思想，是redux的中间件源码思想，将数据进行了一层包装，高可用使用最终返回了一个对象，此时已经不是一个纯html的字符串了，而是一个对象，而且脚本样式都分离了这个是框架帮我们处理的，必须要设置一个入口js文件下面是真正的single-spa源码，注册子应用，用apps这个数组去收集所有的子应用（数组每一项已经拥有了脚本、html、css样式的内容）此时我们只要根据我们之前编写的activeRule和监听前端路由变化去控制展示子应用即可，原理如下:(今天不做过多讲解这块)也是redux的中间件思想，劫持了事件，然后进行派发，优先调用微前端框架的路由事件，然后进行过滤展示子应用：整个微前端的触发流程到此，相信大家对“微前端框架导入加载子应用的方法是什么”有了更深的了解，不妨来实际操作一番吧！这里是云技术网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

相关推荐: 如何实现离线安装全局node模块

这篇文章主要为大家展示了“如何实现离线安装全局node模块”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何实现离线安装全局node模块”这篇文章吧。安装环境：MacOS既然是离线安装，那首先就需要通过网络将对应的…