前端架构·分层设计

01 架构思维入门 什么是前端架构 · 为什么需要分层 · 演进历史 02 分层核心原则 单一职责 · 依赖倒置 · 接口隔离 03 展示层设计 View边界 · 模板引擎 · 有状态/无状态组件 04 状态管理层设计 全局vs局部 · Redux/Zustand/Context · 分层策略 05 业务逻辑层设计 Service职责 · 逻辑抽离 · 复用与测试 06 数据访问层设计 API封装 · DTO vs VO · 缓存与重试 07 工具层与基础设施 工具函数 · 自定义Hooks · 日志/错误边界 08 模块化与依赖管理 ESM vs CJS · 划分粒度 · 循环依赖 09 路由层设计 前端路由原理 · 守卫/权限 · 懒加载 10 配置与环境管理 多环境方案 · 环境变量 · 运行时/构建时 11 国际化（i18n）架构 方案选型 · 翻译组织 · 动态切换优化 12 主题与样式系统 CSS-in-JS / Modules / Tailwind · Design Token 13 组件库架构 分层设计 · 原子设计 · 可组合性 14 表单架构设计 状态管理 · 校验分层 · 动态/配置化表单 15 数据可视化架构 图表封装 · 数据渲染分离 · 大数据量优化 16 微前端架构 拆分原则 · 主/子应用通信 · 共享依赖 17 Monorepo架构 Monorepo vs Multi-repo · pnpm · 构建发布 18 测试架构 单元/集成/E2E · Mock管理 · 覆盖率目标 19 构建与部署架构 Webpack/Vite/Rollup · 构建优化 · CI/CD 20 性能优化架构 性能指标 · 资源/渲染/网络优化 21 安全架构 XSS/CSRF · 敏感信息 · CSP 22 错误处理与异常管理 全局捕获 · 错误上报 · 用户友好提示 23 日志与监控架构 日志分类 · Web Vitals · 行为追踪 24 状态管理进阶 不可变数据 · 归一化 · 中间件 · 时间旅行 25 数据流架构 单向流 vs 双向绑定 · 事件驱动 · 响应式 26 服务端渲染（SSR）架构 SSR vs CSR vs SSG · Next/Nuxt · 同构 27 移动端适配架构 响应式布局 · 移动交互 · Hybrid分层 28 大型项目重构策略 遗留系统迁移 · 分阶段计划 · 风险控制 29 架构文档与规范 ADR · 代码/分层规范 · 架构评审 30 架构演进与未来趋势 Serverless · WebAssembly · AI辅助设计