实现更简洁、高效代码的基本 JavaScript 重构技术
- Linda Hamilton原创
- 2024-12-26 03:40:09376浏览
作为畅销书作家，我邀请您在亚马逊上探索我的书籍。不要忘记在 Medium 上关注我并表示您的支持。谢谢你！您的支持意味着全世界！
JavaScript 重构对于希望提高代码质量和可维护性的开发人员来说是一项至关重要的技能。多年来我参与了众多项目，我发现持续实施这些技术可以带来更健壮、更高效的代码库。
代码气味检测通常是重构过程的第一步。我依靠 ESLint 和 SonarQube 等工具来识别代码中的潜在问题。这些工具帮助我发现未使用的变量、复杂的函数和不一致的样式等问题。以下是我如何在项目中设置 ESLint 的示例：
// .eslintrc.js
module.exports = {
env: {
browser: true,
es2021: true,
node: true,
},
extends: ['eslint:recommended', 'plugin:react/recommended'],
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 12,
sourceType: 'module',
},
plugins: ['react'],
rules: {
// Custom rules
'no-unused-vars': 'error',
'max-len': ['error', { code: 100 }],
'complexity': ['error', 10],
},
};
一旦确定了潜在问题，我就会转向特定的重构技术。提取法是我使用的最常见和最有效的技术之一。它涉及将大型、复杂的功能分解为更小、更集中的功能。这不仅提高了可读性，还使代码更可重用且更易于测试。
考虑这个计算购物车中商品总价的函数示例：
function calculateTotalPrice(items) {
let total = 0;
for (let item of items) {
let price = item.price;
if (item.onSale) {
price *= 0.9;
}
if (item.quantity > 5) {
price *= 0.95;
}
total += price * item.quantity;
}
return total;
}
我们可以使用提取方法技术重构它：
function calculateTotalPrice(items) {
return items.reduce((total, item) => total + calculateItemPrice(item), 0);
}
function calculateItemPrice(item) {
let price = applyDiscounts(item.price, item);
return price * item.quantity;
}
function applyDiscounts(price, item) {
if (item.onSale) price *= 0.9;
if (item.quantity > 5) price *= 0.95;
return price;
}
这个重构版本更具可读性，并且可以更轻松地测试各个组件。
我经常使用的另一个强大技术是用多态性替换条件。在处理根据对象类型而变化的复杂条件逻辑时，此方法特别有用。我们可以使用面向对象的原则来创建更灵活和可扩展的解决方案，而不是使用 if-else 语句或 switch case。
以下是我如何重构根据产品类型计算运费的函数的示例：
// Before refactoring
function calculateShippingCost(product) {
if (product.type === 'book') {
return product.weight * 0.5;
} else if (product.type === 'electronics') {
return product.weight * 0.8 + 2;
} else if (product.type === 'clothing') {
return product.weight * 0.3;
}
return product.weight * 0.6; // Default shipping cost
}
// After refactoring
class Product {
constructor(weight) {
this.weight = weight;
}
calculateShippingCost() {
return this.weight * 0.6;
}
}
class Book extends Product {
calculateShippingCost() {
return this.weight * 0.5;
}
}
class Electronics extends Product {
calculateShippingCost() {
return this.weight * 0.8 + 2;
}
}
class Clothing extends Product {
calculateShippingCost() {
return this.weight * 0.3;
}
}
// Usage
const book = new Book(2);
console.log(book.calculateShippingCost()); // 1
const electronics = new Electronics(3);
console.log(electronics.calculateShippingCost()); // 4.4
这种多态方法可以更轻松地添加新产品类型，而无需修改现有代码，遵循开放/封闭原则。
引入参数对象技术在处理带有多个参数的函数时特别有用。通过将相关参数分组到单个对象中，我们可以简化函数签名并使我们的代码更易于维护。
以下是我如何重构创建用户帐户的函数的示例：
// Before refactoring
function createUser(firstName, lastName, email, password, birthDate, country, city, zipCode) {
// User creation logic
}
// After refactoring
function createUser(userDetails, address) {
// User creation logic
}
// Usage
createUser(
{ firstName: 'John', lastName: 'Doe', email: 'john@example.com', password: 'securepass', birthDate: '1990-01-01' },
{ country: 'USA', city: 'New York', zipCode: '10001' }
);
这个重构版本不仅更具可读性，而且更灵活，因为在不更改函数签名的情况下更容易添加或删除字段。
删除重复代码是我始终牢记的重构的一个关键方面。重复的代码可能会导致不一致并使维护变得更加困难。我经常将通用功能提取到共享函数或模块中。
这是我如何重构 React 组件中重复代码的示例：
// .eslintrc.js
module.exports = {
env: {
browser: true,
es2021: true,
node: true,
},
extends: ['eslint:recommended', 'plugin:react/recommended'],
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 12,
sourceType: 'module',
},
plugins: ['react'],
rules: {
// Custom rules
'no-unused-vars': 'error',
'max-len': ['error', { code: 100 }],
'complexity': ['error', 10],
},
};
这种重构消除了重复并使代码更易于维护和一致。
重命名变量和函数是我经常使用的一种简单而强大的技术。清晰、描述性的名称可以显着增强代码理解并作为自我文档的一种形式。我总是努力使用能够准确描述变量或函数的目的或行为的名称。
例如，代替：
function calculateTotalPrice(items) {
let total = 0;
for (let item of items) {
let price = item.price;
if (item.onSale) {
price *= 0.9;
}
if (item.quantity > 5) {
price *= 0.95;
}
total += price * item.quantity;
}
return total;
}
我会重构为：
function calculateTotalPrice(items) {
return items.reduce((total, item) => total + calculateItemPrice(item), 0);
}
function calculateItemPrice(item) {
let price = applyDiscounts(item.price, item);
return price * item.quantity;
}
function applyDiscounts(price, item) {
if (item.onSale) price *= 0.9;
if (item.quantity > 5) price *= 0.95;
return price;
}
这个简单的更改使函数的目的立即清晰，无需额外注释。
最后，简化复杂表达式是我用来使我的代码更具可读性和可维护性的技术。使用中间变量或函数将复杂的逻辑表达式分解为更小、更易于管理的部分可以大大提高代码的清晰度。
这是我如何重构复杂条件的示例：
// Before refactoring
function calculateShippingCost(product) {
if (product.type === 'book') {
return product.weight * 0.5;
} else if (product.type === 'electronics') {
return product.weight * 0.8 + 2;
} else if (product.type === 'clothing') {
return product.weight * 0.3;
}
return product.weight * 0.6; // Default shipping cost
}
// After refactoring
class Product {
constructor(weight) {
this.weight = weight;
}
calculateShippingCost() {
return this.weight * 0.6;
}
}
class Book extends Product {
calculateShippingCost() {
return this.weight * 0.5;
}
}
class Electronics extends Product {
calculateShippingCost() {
return this.weight * 0.8 + 2;
}
}
class Clothing extends Product {
calculateShippingCost() {
return this.weight * 0.3;
}
}
// Usage
const book = new Book(2);
console.log(book.calculateShippingCost()); // 1
const electronics = new Electronics(3);
console.log(electronics.calculateShippingCost()); // 4.4
这个重构版本更容易阅读和理解，并且每个条件都可以独立测试。
根据我的经验，持续应用这些重构技术可以显着提高代码质量。它使代码更容易理解、维护和扩展。然而，重要的是要记住重构是一个持续的过程。随着需求的变化和新功能的添加，我们需要不断审查和重构我们的代码以保持其干净和高效。
我从常规重构中发现的主要好处之一是它使添加新功能或修复错误变得更加容易。当代码结构良好且易于理解时，可以更快地找到需要更改的区域并进行必要的修改，而不会引入新的错误。
此外，重构通常会带来性能提升。通过简化复杂的逻辑并消除冗余，我们通常可以使代码运行得更快并使用更少的资源。这在 JavaScript 中尤其重要，因为性能会对用户体验产生重大影响，尤其是在浏览器环境中。
我发现重构特别有价值的另一个方面是它如何促进团队内的知识共享。当代码干净且结构良好时，其他开发人员更容易理解和使用。这可以带来更好的协作，并可以显着减少新团队成员入职所需的时间。
还值得注意的是，虽然这些技术很强大，但应谨慎应用。过度设计与设计不足同样会带来问题。我们的目标是找到适当的平衡 - 让代码尽可能简单明了，但又不简单。
总之，掌握这些 JavaScript 重构技术对于我作为开发人员的职业生涯来说非常宝贵。他们帮助我编写了更好的代码，更高效地工作，并与我的团队更有效地协作。虽然有时很容易为了赶上最后期限而匆忙进行开发，但我发现，从长远来看，花时间定期重构是有回报的。它带来更强大、可维护的代码库，可以适应不断变化的需求并随着项目的增长而扩展。随着我们不断突破 JavaScript 可能性的界限，这些重构技术仍将是每个开发人员工具包中必不可少的工具。
101 本书
101 Books是一家人工智能驱动的出版公司，由作家Aarav Joshi共同创立。通过利用先进的人工智能技术，我们将出版成本保持在极低的水平——一些书籍的价格低至 4 美元——让每个人都能获得高质量的知识。
查看我们的书Golang Clean Code，亚马逊上有售。
请继续关注更新和令人兴奋的消息。购买书籍时，搜索 Aarav Joshi 以查找更多我们的书籍。使用提供的链接即可享受特别折扣！
我们的创作
一定要看看我们的创作：
投资者中心 | 投资者中央西班牙语 | 投资者中德意志 | 智能生活 | 时代与回响 | 令人费解的谜团 | 印度教 | 精英开发 | JS学校
我们在媒体上
科技考拉洞察 | 时代与回响世界 | 投资者中央媒体 | 令人费解的谜团 | 科学与时代媒介 | 现代印度教
以上是实现更简洁、高效代码的基本 JavaScript 重构技术的详细内容。更多信息请关注PHP中文网其他相关文章！