代码重构助手
使用 AI 智能分析和重构代码，提升代码质量
实战级别40 分钟阅读
重构场景
常见的代码重构场景和解决方案
遗留代码现代化
将老旧代码升级到现代标准
重构前：
// 旧版 JavaScript 代码
function getUserData(userId) {
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/users/' + userId, false);
xhr.send();
if (xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
return data;
} else {
return null;
}
}
function processUsers(userIds) {
var results = [];
for (var i = 0; i < userIds.length; i++) {
var userData = getUserData(userIds[i]);
if (userData) {
results.push(userData);
}
}
return results;
}重构后：
// 现代化后的代码
async function getUserData(userId) {
try {
const response = await fetch(`/api/users/${userId}`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return await response.json();
} catch (error) {
console.error('Failed to fetch user data:', error);
return null;
}
}
async function processUsers(userIds) {
const promises = userIds.map(id => getUserData(id));
const results = await Promise.allSettled(promises);
return results
.filter(result => result.status === 'fulfilled' && result.value)
.map(result => result.value);
}改进点：
使用现代 fetch API 替代 XMLHttpRequest
异步处理替代同步阻塞
使用 const/let 替代 var
模板字符串替代字符串拼接
并行处理提升性能
更好的错误处理
性能优化重构
识别和解决性能瓶颈
重构前：
// 性能问题代码
function findUsersByRole(users, targetRole) {
const result = [];
for (let i = 0; i < users.length; i++) {
for (let j = 0; j < users[i].roles.length; j++) {
if (users[i].roles[j].name === targetRole) {
result.push(users[i]);
break;
}
}
}
return result;
}
function processUserData(users) {
const processed = [];
for (const user of users) {
const userData = {
id: user.id,
name: user.name,
email: user.email,
roles: findUsersByRole([user], 'admin').length > 0 ? 'admin' : 'user'
};
processed.push(userData);
}
return processed;
}重构后：
// 优化后的代码
function findUsersByRole(users, targetRole) {
return users.filter(user =>
user.roles.some(role => role.name === targetRole)
);
}
function processUserData(users) {
// 预计算管理员用户集合
const adminUsers = new Set(
findUsersByRole(users, 'admin').map(user => user.id)
);
return users.map(user => ({
id: user.id,
name: user.name,
email: user.email,
roles: adminUsers.has(user.id) ? 'admin' : 'user'
}));
}改进点：
使用数组方法替代手动循环
避免重复计算
使用 Set 提升查找性能
减少嵌套循环复杂度
更简洁的函数式编程风格
重构工作流
系统化的代码重构流程
1
代码分析
使用 AI 分析现有代码的问题和改进空间
示例命令：
@src/legacy-module.js 分析这个模块的代码质量问题@src/utils/ 识别这个目录中的性能瓶颈@package.json @src/ 分析项目的技术债务提示： 提供具体的分析维度，如性能、可维护性、安全性等
2
重构规划
制定详细的重构计划和优先级
示例命令：
基于分析结果，制定重构计划和优先级评估重构的风险和收益建议分阶段重构的策略提示： 考虑业务影响和团队资源，制定可执行的计划
3
代码重构
逐步执行重构，保持功能不变
示例命令：
@src/old-component.js 重构这个组件，使用现代 React 模式@src/api.js 优化这个 API 模块的性能@src/utils.js 提取公共函数并改进命名提示： 每次重构保持小步快跑，确保测试通过
4
测试验证
确保重构后功能正确性
示例命令：
@tests/ @src/refactored-module.js 为重构后的代码生成测试用例比较重构前后的性能差异验证重构是否引入新的问题提示： 重构前后都要有充分的测试覆盖
实战示例
具体的重构任务和 AI 提示词
组件重构示例
将类组件重构为函数组件
AI 提示词：
@src/components/UserProfile.js 将这个类组件重构为使用 Hooks 的函数组件，保持相同的功能期望输出：
- 分析现有类组件的状态和生命周期
- 转换为函数组件和相应的 Hooks
- 保持 props 接口不变
- 优化性能和可读性
API 重构示例
重构 API 调用逻辑
AI 提示词：
@src/services/api.js 重构这个 API 服务，添加错误处理、重试机制和类型安全期望输出：
- 添加统一的错误处理
- 实现自动重试机制
- 添加 TypeScript 类型定义
- 改进 API 响应处理
数据结构优化
优化数据处理逻辑
AI 提示词：
@src/utils/dataProcessor.js 优化这个数据处理模块的性能，减少时间复杂度期望输出：
- 分析当前算法复杂度
- 建议更高效的数据结构
- 重写关键算法
- 添加性能基准测试
最佳实践
代码重构的重要原则和技巧
重构原则
- 小步快跑，频繁提交
- 保持测试覆盖率
- 一次只做一种类型的重构
- 重构前确保有完整的测试
AI 协助技巧
- 提供充分的上下文信息
- 明确重构目标和约束
- 要求解释重构理由
- 验证 AI 建议的正确性
质量保证
- 重构后运行完整测试套件
- 检查性能指标变化
- 进行代码审查
- 更新相关文档