微前端知识的学习

微前端通过拆分业务模块实现独立构建和部署,提高复用性和开发效率。每个应用可采用不同技术栈,简化复杂项目,减少耦合。single-spa作为微前端容器,管理各应用注册、路由配置,通过生命周期函数操作应用。应用间通信可借助rxjs或发布订阅模式。微前端有助于老项目的扩展和维护,实现快速切换不同应用。

【微前端】single-spa 到底是个什么鬼_波哥在路上-优快云博客

1. 为什么要使用微前端?

微前端的演化和后端微服务有一样的地方,主要是为了拆分业务模块,每一部门业务模块都可以单独构建部署,能够提高复用性。

微前端中的每个应用可以使用单独的技术框架,可以根据开发人员的技术栈选择不同的技术,提高了开发效率

对大型,复杂的项目,做了拆分,能够简化业务,减少耦合,提高程序的健壮性

对时间较久的项目,在进行新增需求时, 可以单独使用新技术开发。有利于项目长久发展。

(1) 若多个应用之间公用一些共有的部分,可将其抽离出来,在最终的打包过程中明显的体积缩小。运行加快。

(2) 不同的应用之间,由一个跳转到另一个时,在不涉及应用之间状态交互时,不用考虑重写之类的问题,只需配置好对应的spa,就可以进行切换
 

2. 微前端的架构是怎么样的,怎么使用?

微前端有一个容器,这个容器中配置了各个项目,在容器中,先要注册各个项目,配置名称,路由,文件入口或者url 。当有操作时候, 容器会拦截操作,然后匹配对应的url,启动应用。

3. 微前端容器怎么操作应用?

在应用入口文件中导出微前端应用所需的生命周期函数,生命周期函数必须返回 Promise,可以让外面调用。

4. 应用之间怎么通信?

基于 rxjs,或者发布订阅的模式。在qiankun中,就是容器会有一些事件抛出,子应用能中可以监听事件,做自己的操作。

微前端single-spa的生命周期:

调用流程

 

 

### 微前端学习路径及步骤 微前端是一种架构模式,旨在通过将单体应用拆分成多个独立的小型前端应用程序来提高开发效率和可维护性。以下是关于微前端学习路径及相关知识点: #### 一、基础知识准备 在深入微前端之前,需要具备扎实的前端基础技能,这包括但不限于 HTML、CSS 和 JavaScript 的核心概念。具体如下: - **HTML/CSS**: 掌握基本的标记语言及其样式定义[^2]。 - **JavaScript**: 学习并熟练运用 JavaScript 基础语法、高级特性(DOM/BOM)、框架(如 jQuery),以及数据可视化工具(ECharts)等[^4]。 #### 二、理解微服务与模块化理念 微前端的概念源于后端领域中的微服务架构思想。因此,在进入具体的实现前,建议先熟悉以下内容: - **微服务架构简介**: 明确什么是微服务,它如何工作,为什么被广泛采纳用于构建大型分布式系统[^1]。 - **模块化的编程实践**: 包括 ES6 Modules 的使用方法,了解如何分割代码逻辑以便于管理和重用[^3]。 #### 三、探索主流微前端解决方案 目前市面上存在多种成熟的微前端库和技术栈可供选择,初学者可以从以下几个方面入手研究: - **Single SPA (single-spa)**: 提供了一种简单的方式来组合多个子应用到同一个页面中运行。其文档详尽且社区活跃度高,非常适合新手尝试[^5]。 - **Micro Frontends by ThoughtWorks**: 参考官方指南或者相关书籍资料,进一步加深理论认知的同时也能获取实际操作经验。 #### 四、动手实操项目演练 理论联系实际非常重要,只有亲身参与才能更好地理解和记忆所学到的知识点。可以按照下面几个方向开展练习: 1. 创建一个小规模的应用集合,每个成员负责不同的功能区域; 2. 尝试集成第三方开源组件作为其中一个子单元; 3. 实现跨团队协作场景下的动态加载机制演示。 ```javascript // 示例:利用 single-spa 构建最简单的微前端环境 import { registerApplication, start } from 'single-spa'; registerApplication( 'app1', () => import('./apps/app1'), location => location.pathname.startsWith('/app1') ); start(); ``` #### 五、持续优化与扩展能力边界 当掌握了初步搭建流程之后,则需考虑更多维度上的改进措施,比如性能调优策略、安全性加固手段等方面的内容。此外还应关注行业趋势变化,及时更新自己的知识储备。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值