javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JS重构

JS中可以改善代码的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;
}

在之前的代码示例中，我们在求和并再次求和以找到平均值。在之后，我们用提供给它们两者之和的函数替换了这个过程。

简化方法

当你寻找要优化的方法/功能时，它与识别非常相似。可以为逻辑做简化的方法或使其可读和清洁。此技术可以帮助你减少代码行。

此方法可以分解为较小的代码块，可以在函数中找到它们以进行优化。以下是这些代码块：

使用懒加载

这是一种只在需要时加载对象的技术。这可以通过减少内存使用量来提高应用程序的性能。这将加快应用程序的加载速度。

这种技术在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。

总结

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

通过不断审查和改进你的代码，你可以创建一个更强大、更具弹性的应用程序。希望这篇文章能帮助您了解一些重构技巧。

到此这篇关于JS中可以改善代码的5种重构技术分享的文章就介绍到这了,更多相关JS重构内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文