后端开发教程 - Java、Spring Boot 实战 - msg200.com
5 种代码重构技术来改进你的代码
文章中只有 4 种技术....？
介绍
编写代码很有趣，我们非常享受这个过程。直到一个错误突然出现，需要花费相当多的时间才能解决。有时，错误在代码按预期运行时不可见，但在生产环境中可能会导致错误。可能会出现性能和可访问性相关的错误，从而导致糟糕的用户体验。可以通过重构代码来减少此类错误。
代码重构是指在不改变现有代码外部功能的情况下对其进行改进。它是编程的核心部分之一，不容忽视，否则您将无法获得更好的代码版本。代码重构可以增强代码的可读性、可维护性和可扩展性。它还旨在提高性能并提高开发人员的生产力。
今天，我们将研究一些可以帮助您更好地重构代码的技术。
现在，让我们开始吧。
如何整合重构
在寻找改进重构的技术之前，让我们先看看如何将代码重构集成到你的编码过程中。以下建议你可以参考：
- 您应该专门分配时间来重构代码。
- 将较大的重构问题分解为较小的问题以便于管理。
- 尝试让整个团队参与重构过程。
- 使用自动化工具可以帮助您找到常见的重构错误。
现在，让我们开始讨论重构所使用的技术。
提取方法
此方法涉及将代码块转换为单独的方法/函数。这样做是为了改善代码的结构和可读性。它是通过将长而复杂的代码块提取为更小、更易于管理的方法来实现的。
要使用这项技术，我们首先需要找到一个执行特定复杂任务的代码块。识别后，我们提取代码并将其放入一个新的方法中。此外，还要确保为该方法赋予一个有意义的名称。现在，在需要代码的地方，我们调用它们。
例子：
重构之前
function calculateInvoiceTotal(items) {
let total = 0;
for (let i = 0; i < items.length; i++) {
const item = items[i];
if (!item.quantity || !item.price) {
console.error('Invalid item', item);
continue;
}
const itemTotal = item.quantity * item.price;
total += itemTotal;
}
return total;
}
重构后：
function calculateInvoiceTotal(items) {
let total = 0;
for (let i = 0; i < items.length; i++) {
const item = items[i];
const itemTotal = calculateItemTotal(item);
total += itemTotal;
}
return total;
}
function calculateItemTotal(item) {
if (!item.quantity || !item.price) {
console.error('Invalid item', item);
return 0;
}
return item.quantity * item.price;
}
您可以看到我们如何将循环内运行的复杂代码转换for为另一种方法，以实现简单性和可读性。
用符号常量替换魔法数字
此代码重构旨在编写更清晰、更易读的代码。Magic Number 指的是硬编码的数值。硬编码的数字会给其他人带来困惑，因为它们的用途不明确。将硬编码的值转换为具有有意义名称的变量无疑有助于其他人理解。此外，您还可以添加注释以提供进一步的解释。它还有助于调试并降低将来出错的风险。
例子：
前
if (temperature > 32) {
// Do something if temperature is above freezing
}
后
const int FREEZING_POINT = 32;
if (temperature > FREEZING_POINT) {
// Do something if temperature is above freezing
}
合并重复代码
重复或相同的代码可能出现在代码的不同位置。这些代码不必完全相同，但可以执行类似的任务，或者在原始代码的基础上进行一些扩展。重复代码会导致一些问题，包括增加维护成本、难以修改代码库以及引入错误的风险更高。
重构代码时，需要留意重复的代码。找到重复的代码后，处理方法之一是将其转换为单个可复用的函数/方法。
例子：
前
function calculateTotal(numbers) {
let total = 0;
for (let i = 0; i < numbers.length; i++) {
total += numbers[i];
}
return total;
}
function calculateAverage(numbers) {
let total = 0;
for (let i = 0; i < numbers.length; i++) {
total += numbers[i];
}
const average = total / numbers.length;
return average;
}
后
function calculateSum(numbers) {
let total = 0;
for (let i = 0; i < numbers.length; i++) {
total += numbers[i];
}
return total;
}
function calculateTotal(numbers) {
return calculateSum(numbers);
}
function calculateAverage(numbers) {
const total = calculateSum(numbers);
const average = total / numbers.length;
return average;
}
在之前的代码示例中，我们先求和，然后再求平均值。在之后的代码示例中，我们用一个对两个值求和的函数替换了之前的代码。
简化方法
这和你在寻找需要优化的方法/函数时识别的方法非常相似。简化方法可以提高逻辑性，或者使其更易读、更简洁。这项技术可以帮助你减少代码行数。
该方法可以分解成更小的代码块，您可以在函数中找到这些代码块进行优化。具体如下：
- 删除不必要的变量和表达式：你可能为了调试而遗漏了一些变量或表达式，但忘记删除，例如 JavaScript 中的 console.log。删除这些变量和表达式，同时
- 使用内置函数：有时使用库或语言的内置函数会更好。因为可以用更少的代码实现相同的功能。
- 简化条件语句：如果方法具有复杂的条件语句，请考虑通过组合条件或使用三元运算符来简化它们。
使用延迟加载
这是一种仅在需要时才加载对象的技术。这可以通过减少内存使用量来提高应用程序的性能，从而加快应用程序的加载速度。
这种技术在 Web 开发中非常流行，尤其是在像 React 这样的 JavaScript 框架中，你可以通过延迟加载导入不同的组件。它也可以用于按需加载图片。
例子：
前
import React from 'react';
import MyComponent from './MyComponent';
const App = () => {
return (
<div>
<h1>My App</h1>
<MyComponent />
</div>
);
}
export default App;
后：
import React, { lazy, Suspense } from 'react';
const MyComponent = lazy(() => import('./MyComponent'));
const App = () => {
return (
<div>
<h1>My App</h1>
<Suspense fallback={<div>Loading...</div>}>
<MyComponent />
</Suspense>
</div>
);
}
export default App;
在更新的版本中，我们使用该lazy函数异步导入MyComponent组件。这意味着组件仅在实际需要时加载，从而提升了应用的整体性能。我们还使用该Suspense组件在加载过程中显示回退 UI。
结论
对于任何想要提升代码质量、性能和可维护性的开发者来说，重构都是必不可少的实践。花时间分析和优化代码，可以消除冗余，降低复杂性，并创建更高效、更可扩展的应用程序。
通过不断审查和改进代码，您可以创建更健壮、更具弹性的应用程序。希望本文能帮助您理解一些重构技巧。感谢您阅读本文。
文章来源：https://dev.to/documatic/5-code-refactoring-techniques-to-improve-your-code-2lia