改进代码的 5 种代码重构技术

介绍
编写代码很有趣，我们非常享受。直到不知从哪里冒出一个错误，这需要很长时间才能解决。有时，错误不可见，因为代码按预期运行，但在生产中可能会导致错误。可能存在基于性能和可访问性的错误，这可能会导致糟糕的用户体验。这种错误可以通过重构代码来减少。

代码重构涉及在不改变其外部功能的情况下改进现有代码。它是编程的核心部分之一，不容忽视，否则您将无法获得更好的代码版本。代码重构可以增强代码的可读性、可维护性和可扩展性。它还旨在提高性能并提高开发人员的工作效率。

今天，我们将研究一些可以帮助您以更好的方式重构代码的技术。

现在，让我们开始吧。

如何整合重构
在寻找改进重构的技术之前，让我们看看如何将代码重构集成到您的编码过程中。您可以使用以下建议：

您应该专门分配时间来重构代码。
将较大的重构问题分解为较小的重构问题以进行管理。
尝试让整个团队参与重构过程。
使用可以帮助您查找常见重构错误的自动化工具。
现在，让我们从用于重构的技术开始。

提取方法
此方法涉及将代码块转换为单独的方法/函数。这样做是为了改善代码的结构和可读性。它是通过将长而复杂的代码块提取为更小且更易于管理的方法来实现的。

要使用这种技术，我们首先需要找到一个代码块来执行有点复杂的特定任务。识别后，我们提取代码并将其放入新方法中。另外，请确保为该方法提供一个有意义的名称。现在，我们在需要代码的地方调用它们。

例子：

重构前
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为另一种方法，以实现简单性和可读性。

用符号常量替换幻数
此代码重构是为了编写更清晰、更易读的代码。幻数只是指硬编码的数值。编写硬编码数字会导致其他人感到困惑，因为他们的目的没有定义。将硬编码值转换为具有有意义名称的变量肯定会帮助其他人理解它。此外，您可以为其添加评论以进一步解释。它还可以帮助调试并降低将来出错的风险。

例子：

前
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。

结论
重构是任何想要提高代码质量、性能和可维护性的开发人员的基本实践。通过花时间分析和优化您的代码，您可以消除冗余、降低复杂性并创建更高效​​和可扩展的应用程序。

通过不断审查和改进您的代码，您可以创建更健壮和更有弹性的应用程序。我希望本文能帮助您了解一些重构技术。感谢您阅读这篇文章。