JS中可以改善代码的5种重构技术分享

更新时间：2023年06月09日 09:51:20 作者：王大冶

代码重构涉及在不改变其外部功能的情况下对现有代码进行改进，这是编程的核心部分之一，所以下面我们将研究一些技巧，这些技巧可以帮助我们以更好的方式重构代码，希望对大家有所帮助

编写代码很有趣，我们非常喜欢它。直到一个错误突然出现，需要相当长的时间来解决它。有时，错误并不明显，因为代码按预期运行，但在生产中可能会导致错误。可能会有性能和可访问性方面的错误，这会导致用户体验不佳。通过重构代码可以减少这类错误。

代码重构涉及在不改变其外部功能的情况下对现有代码进行改进。这是编程的核心部分之一，不能忽视，否则，我们将无法实现代码的更好版本。代码重构可以提高代码的可读性、可维护性和可扩展性。它还旨在提高性能和提高开发人员的生产力。

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

如何整合重构

在寻找改进重构的技巧之前，让我们看看如何将代码重构集成到你的编码过程中。可以使用以下建议来实现这个目的：

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

提取方法

这种方法涉及将代码块转换为单独的方法/函数。这样做是为了提高代码的结构和可读性。通过提取较长且复杂的代码块，将其变成更小且易于管理的方法来实现这一目标。

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

重构前

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。

总结

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

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

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

您可能感兴趣的文章:

JS
重构

JavaScript实现日期格式化的操作详解
在我们做业务开发的漫长岁月里，会多次跟时间打交道，相信大多数小伙伴对日期格式化也并不陌生，本文简单记录了JavaScript实现日期格式化的过程，以及一些拓展，希望对大家有所帮助
2023-05-05
全面解析JavaScript里的循环方法之forEach，for-in，for-of
这篇文章主要介绍了全面解析JavaScript里的循环方法之forEach，for-in，for-of的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
2016-06-06
在JavaScript中对HTML进行反转义详解
下面小编就为大家带来一篇在JavaScript中对HTML进行反转义详解。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
这应该是最详细的响应式系统讲解了
这篇文章主要介绍了这应该是最详细的响应式系统讲解了，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-07-07
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
这篇文章主要介绍了IE11下CKEditor在Bootstrap Modal中下拉问题的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-09-09
JavaScript localStorage使用教程详解
JavaScriptlocalStorage基本上是浏览器Window对象中的存储，您可以在中存储任何内容localStorage，localStorage及其相关的sessionStorage是 Web Storage API的一部分，我们将在本文详细了解这些,需要的朋友可以参考下
2023-06-06
微信小程序生成分享海报方法（附带二维码生成）
这篇文章主要介绍了微信小程序生成分享海报方法（附带二维码生成），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03
layui 富文本图片上传接口与普通按钮文件上传接口的例子
今天小编就为大家分享一篇layui 富文本图片上传接口与普通按钮文件上传接口的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
JavaScript设计模式经典之工厂模式
工厂模式定义一个用于创建对象的接口，这个接口由子类决定实例化哪一个类。接下来通过本文给大家介绍JavaScript设计模式经典之工厂模式，感兴趣的朋友一起学习吧
2016-02-02
JavaScript之Object类型介绍
这篇文章主要介绍了JavaScript之Object类型介绍,本文讲解了创建Object类型的两种方法以及访问Object类型的方法,需要的朋友可以参考下
2015-04-04