Day 6: 重构代码

你：这个文件已经 500 行了，帮我拆分一下
你：这段逻辑在 3 个地方都有，能抽取成公共函数吗
你：这个组件做的事情太多了，怎么拆分？

// 重构前：一个函数做太多事
function handleUserSubmit(formData) {
  // 50+ 行代码...
}

你：这个函数太长了，帮我按职责拆分成几个小函数

function validateUserData(formData) { /* ... */ }
function saveUserToDB(userData) { /* ... */ }
function sendWelcomeEmail(user) { /* ... */ }
function handleUserSubmit(formData) {
  const validData = validateUserData(formData);
  const user = saveUserToDB(validData);
  sendWelcomeEmail(user);
}

你：这几个函数都有相似的错误处理逻辑，帮我提取出来

你：这个 if-else 嵌套太深了，用早期返回优化一下

你：这个 UserDashboard 组件太复杂了，帮我拆分成几个子组件

你：这个组件里的数据获取逻辑很常用，提取成 useUserData Hook

你：这个组件的 props 太多了，用 Context 或者对象传递优化一下

你：这个项目文件结构有点乱，帮我按功能重新组织

你：统一这个项目的导入导出方式，用 barrel exports

你：把分散的配置项统一到 config 文件夹

你：这个列表组件重渲染太频繁，用 memo 和 useMemo 优化

你：按需导入 lodash 函数，不要导入整个库

你：给路由组件添加懒加载，减少首屏加载时间

你：这个 Redux store 结构不合理，帮我重新设计

你：统一处理 API 响应数据的格式转换

你：给频繁请求的数据添加缓存机制

你：重构前先给这些函数写测试，确保重构后行为不变

你：一次只重构一个函数，不要大改

你：重构完运行测试，确保功能正常

// 重构前
function createUser(data) {
  if (!data.email) throw new Error('Email required');
  if (!data.name) throw new Error('Name required');
  // ...
}

function updateUser(data) {
  if (!data.email) throw new Error('Email required');
  if (!data.name) throw new Error('Name required');
  // ...
}

你：这两个函数的验证逻辑重复了，提取成公共函数

你：这个复杂的 if-else 能用策略模式或者 switch 简化吗？

你：这些变量名 a, b, temp, data 不够清晰，帮我改成有意义的名字

你：这个函数有 8 个参数，用对象参数简化一下

你：用 Prettier 统一代码格式

你：用 ESLint 检查代码质量问题

你：给这个 JS 项目添加 TypeScript，逐步迁移

重构 = 改善代码结构，但不改变外部行为

一次改一点，频繁测试，避免一次性大改

重构前先有测试，重构后验证测试通过