前端开发规范#

#依赖管理 (pnpm)

• 严格性: 利用 pnpm 的严格依赖管理，以确保更确定性的 node_modules 结构和高效的磁盘空间使用。
• 工作区: 如果使用 monorepo 方法，配置 pnpm 工作区以简化多个前端包的依赖管理。
• 审计: 定期使用 pnpm audit 审计前端依赖项是否存在已知漏洞。

#API 通信 (Axios)

• Axios 实例: 创建一个集中的 Axios 实例用于 API 调用，以应用通用配置（基本 URL、请求头、拦截器）。
• 拦截器: 使用 Axios 拦截器进行以下操作：
  • 向传出请求添加认证令牌。
  • 处理全局错误响应（例如，显示 401 Unauthorized 的通知）。
  • 在开发环境中记录请求/响应。
• 错误处理: 在 Axios 拦截器或自定义工具函数中集中处理 API 错误，以提供一致的用户反馈。

#React 与组件标准

• 函数组件与 Hooks: 对于新开发，优先使用带有 React Hooks 的函数组件，而非类组件。
• Props:
  • 为组件 props 定义 interface 或 type 以确保类型安全。
  • 在组件入口处解构 props 以提高清晰度。
• 状态管理 (Redux):
  • 使用 Redux Toolkit 进行高效且减少样板代码的 Redux 开发。
  • 使用 createSlice 将 Redux 逻辑组织成"切片"（特定功能的 reducer、action 和 selector）。
  • 遵循"ducks"模式或"slices"方法来协同定位 Redux 逻辑。
• 组件组合: 将复杂的 UI 分解为更小、可重用且职责单一的组件。
• Ant Design:
  • 利用 Ant Design 组件以实现一致的 UI/UX。
  • 如果需要，使用 CSS-in-JS 解决方案在整个应用程序中一致地定制 Ant Design 主题和样式。
• 可访问性: 从一开始就设计和实现考虑到 Web 可访问性 (a11y) 的组件。