当前位置：首页 > news >正文

代码重构：从混乱到清晰的艺术

news 2026/5/31 4:43:15

代码重构：从混乱到清晰的艺术

大家好，我是欧阳瑞（Rich Own）。今天想和大家聊聊代码重构这个重要话题。作为一个全栈开发者，重构是保持代码可维护性的关键。今天就来分享一下代码重构的经验和技巧。

为什么需要重构？

问题	说明
代码臃肿	函数太长、类太大
重复代码	相同逻辑多次出现
难以理解	命名不清晰、逻辑复杂
难以扩展	修改一处影响多处

重构原则

1. 小步快跑

// 不好的做法：一次性大改 // 好的做法：每次只改一点点，保持测试通过

2. 保持测试

// 重构前确保测试覆盖 // 重构后运行测试验证 npm test

3. 单一职责

// 不好的代码 function processUser(user) { // 验证用户 // 保存用户 // 发送邮件 // 记录日志 } // 好的代码 function validateUser(user) { /* ... */ } function saveUser(user) { /* ... */ } function sendWelcomeEmail(user) { /* ... */ } function logUserAction(user) { /* ... */ }

常见重构模式

1. 提取函数

// 重构前 function calculateTotal(items) { let total = 0; for (let i = 0; i < items.length; i++) { const item = items[i]; const price = item.price * (1 - item.discount); total += price; } return total; } // 重构后 function calculateItemPrice(item) { return item.price * (1 - item.discount); } function calculateTotal(items) { return items.reduce((acc, item) => acc + calculateItemPrice(item), 0); }

2. 提取类

// 重构前 function createUser(name, email) { /* ... */ } function getUser(id) { /* ... */ } function updateUser(id, data) { /* ... */ } // 重构后 class UserService { create(name, email) { /* ... */ } get(id) { /* ... */ } update(id, data) { /* ... */ } }

3. 简化条件

// 重构前 if (status === 'pending') { return '处理中'; } else if (status === 'completed') { return '已完成'; } else if (status === 'cancelled') { return '已取消'; } else { return '未知'; } // 重构后 const statusMap = { pending: '处理中', completed: '已完成', cancelled: '已取消' }; return statusMap[status] || '未知';

4. 移除重复代码

// 重构前 function fetchUsers() { return fetch('/api/users') .then(res => res.json()) .catch(err => console.error(err)); } function fetchPosts() { return fetch('/api/posts') .then(res => res.json()) .catch(err => console.error(err)); } // 重构后 function fetchApi(url) { return fetch(url) .then(res => res.json()) .catch(err => console.error(err)); } function fetchUsers() { return fetchApi('/api/users'); } function fetchPosts() { return fetchApi('/api/posts'); }

重构实战

案例：电商订单处理

// 重构前 function processOrder(order) { if (order.status !== 'pending') { throw new Error('Order not pending'); } if (order.items.length === 0) { throw new Error('Empty order'); } let total = 0; for (let i = 0; i < order.items.length; i++) { total += order.items[i].price; } if (total > 1000) { order.discount = 0.1; total = total * 0.9; } order.total = total; order.status = 'processed'; saveOrder(order); sendNotification(order); } // 重构后 class OrderProcessor { process(order) { this.validateOrder(order); this.calculateTotal(order); this.applyDiscount(order); this.updateStatus(order); this.persistOrder(order); this.notify(order); } validateOrder(order) { if (order.status !== 'pending') { throw new Error('Order not pending'); } if (order.items.length === 0) { throw new Error('Empty order'); } } calculateTotal(order) { order.total = order.items.reduce((acc, item) => acc + item.price, 0); } applyDiscount(order) { if (order.total > 1000) { order.discount = 0.1; order.total *= 0.9; } } updateStatus(order) { order.status = 'processed'; } persistOrder(order) { saveOrder(order); } notify(order) { sendNotification(order); } }