实现的大体原理 single-spa是基于路由来决定每个子应用的加载与卸载。所以,它是通过拦截与监听浏览器的路由事件做到的。具体的可以分为以下两个方面。 监听浏览器的popstate,hashchange这两个事件,同时它拦截了其他应用对于这两个事件的监听。 它也对于改变路由的两个API也进行了更换window.history.pushState(),window....
这篇文章主要分析single-spa原理。然后分析完之后,作者说说自己对于同时都是微前端框架qiankun和single-spa的关系的一些理解,因为在我学习刚开始微前端的时候,我其实不太明白都是微前端框架qiankun和single-spa有什么区别,它们是什么关系,可能一些读者也会有这样的疑问,同时这篇文章作为铺垫,后面会发出qiankun的原理学习...
因为微前端的方案,是`single-spa`的,想用的话,就必须导入这些个生命周期。 那么看了对比之后,我们在看一张图,就能对微前端的原理豁然开朗。 从图上,我们可以看出浏览器首次打开父类应用的时候,第一步就是先使用调用`registerApplication`注册app,接下来判断当前的路由是属于哪一个子应用的,他的判断依据就是apps...
single-spa原理也大同小异,也可以类比的理解为一种模块化开发的单页应用,只不过在单项目的单页应用中划分的模块是各种组件,而在微前端中各个模块就是各个独立的子应用,用户访问基座主应用时会按照配置注册各子应用,并且根据路由来确定分发到哪个子应用来加载,对应子应用加载之后会再根据路由分发到对应的子应用里的页面...
single-spa 原理 coolheadedY关注IP属地: 江苏 0.4452021.02.28 22:01:22字数 518阅读 2,518 核心API registerApplication single-spa 注册应用 执行load 加载生命周期 仅执行应用的加载阶段 start 执行load 加载阶段、boostrap 启动阶段、mount 挂载阶段 加载至挂载整套流程...
2、Single-SPA核心原理 3.1 路由机制 Single-SPA的路由机制是其核心功能之一。它通过监听URL的变化,自动加载和卸载对应的微应用。具体来说,Single-SPA在初始化时会注册一个全局的路由钩子,当URL发生变化时,该钩子会根据当前的URL匹配到对应的微应用,并触发微应用的生命周期钩子。 3.2 生命周期管理 Single-SPA定义了...
single-spa 是一个优秀的微前端基础框架，qiankun 框架就是基于 single-spa 实现的，对 single-spa 做了一层封装，解决了 single-spa 的一些缺陷。了解 single-spa 的实现原理，再去看其他微前端框架，将变得非常容易。新建项目目录，所有代码操作均在此目录中完成。示例代码使用 Vue 编写，当然也可以...
SingleSPA的核心原理是通过使用一个主应用来加载和协调多个独立的子应用。主应用既可以是一个独立的JavaScript应用,也可以是一个由单纯的HTML、CSS和JavaScript组成的静态页面。主应用负责根据路由或其他条件来决定加载哪个独立的子应用,并根据需要进行懒加载。 优点: 1.独立性强:每个子应用之间相互独立,可以使用不同的...
1.项目独立部署 2.兼容技术栈不同多语言 vue react 3.新旧代码版本并行 single-SPA 实现原理 :路有劫持 和应用加载 没有处理css样式和js 会导致样式重叠 和脏数据 下一期 会出qiankun的教程 其实乾坤是基于single-SPA进一步完善的前端微服务架构 使用也很简单 开箱即用的API (single-spa+sandbox+import-html-ent...