前端架构全景
一、是什么
前端架构是指： 👉 如何组织代码、系统与团队协作方式
目标：
- 可扩展
- 可维护
- 可协作
- 可复用
二、前端架构演进
1. 早期：页面级开发
特点：
- 每个页面独立
- 没有复用
问题：
- 代码重复
- 难维护
2. 组件化架构
代表：
- React
- Vue
核心思想： UI = Component + State
优势：
- 可复用
- 可组合
3. 应用级架构（SPA）
特点：
- 单页应用
- 前端路由
技术：
- React Router
- Vue Router
4. 工程化架构
包含：
- Vite / Webpack
- TypeScript
- ESLint
- CI/CD
目标： 👉 规范开发流程
5. 分层架构（现代前端）
常见分层：
UI层（页面）
↓
业务层（hooks / store）
↓
服务层（API）
↓
基础层（utils / lib）
6. 微前端架构
解决问题：
- 多团队协作
- 巨型项目拆分
方案：
- Qiankun
- Module Federation
三、核心设计思想
1. 分治思想
拆分复杂系统
2. 单一职责
一个模块只做一件事
3. 低耦合高内聚
模块内部的功能要高度集中（高内聚），模块之间的依赖要尽可能少（低耦合），这样代码更容易维护、测试和复用。
例如实现一个 UserProfile 组件把用户资料相关的数据获取、编辑逻辑和 UI 全部封装在内部（高内聚），对外只暴露一个 userId 属性，通过统一的 API 服务与后端通信，和其他组件互不干扰（低耦合）。
四、架构目标
一个好的前端架构必须：
- 易扩展
- 易测试
- 易维护
- 支持团队协作
五、总结
前端架构本质是：
用“结构”对抗“复杂度”