!MOC-架构

前端架构（Frontend Architecture）MOC

前端架构设计，包括微前端、分层架构、组件系统设计等。

学习路径：架构设计是高级应用阶段的内容，需要掌握前端框架（React、Vue）、[状态管理](../../02-框架进阶/状态管理/!MOC-状态管理.md）、工程化工具 等基础。架构设计与 网络与传输 和 部署与发布 密切相关。

---

📚 核心主题

• web components） — 微前端架构方案（配合 构建工具 使用）
• 前端分层（Shell、Micro Apps） — 前端分层架构（与 状态管理 配合）
• 可扩展组件系统设计 — 组件系统设计（参考 React 组件设计 和 Vue 组件设计）
• 边界上下文在前端的实践 — 领域驱动设计

---

🎯 架构模式

微前端

• Module Federation
• iframe 方案
• Web Components
• 单 spa（Single-SPA）

分层架构

• 表现层
• 业务层
• 数据层
• 基础设施层

设计模式

• MVC/MVP/MVVM（可参考 React 和 Vue 的架构）
• 观察者模式（与 状态管理 相关）
• 发布订阅模式
• 策略模式

---

📝 学习建议

1. 前置知识：需要掌握前端框架（React、Vue）、状态管理、工程化工具
2. 学习顺序：基础 → 框架 → 状态管理 → 工程化 → 架构设计
3. 相关主题：
   • 网络与传输：数据交互架构
   • 部署与发布：部署架构
   • 性能优化：性能架构设计
4. 实践应用：架构设计需要结合实际项目需求，考虑可扩展性、可维护性、性能等因素

---

📖 学习资源

• 微前端架构
• 前端架构设计

---

前端架构 微前端 架构设计