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
重构

javasciprt下jquery函数$.post执行无响应的解决方法
这篇文章主要介绍了javasciprt下jquery函数$.post执行无响应的解决方法,需要的朋友可以参考下
2014-03-03
JavaScript实现平滑滚动效果
页面平滑滚动是网页一种常见的效果,平滑滚动的原理其实很简单,无非就是让页面一种肉眼可见的速度从当前位置滚动到指定位置,那如何用原生的JS实现这也效果呢？本文给大家介绍了JavaScript实现平滑滚动效果,需要的朋友可以参考下
2024-06-06
JavaScript运动框架解决速度正负取整问题(一)
这篇文章主要为大家详细介绍了JavaScript运动框架的第一部分，解决速度正负取整问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
JS中如何设置readOnly的值
本篇文章主要是对JS中设置readOnly值的方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-12-12
JavaScript和ActionScript的交互实现代码
JavaScript和ActionScript的交互实现代码，需要js与flash交互的朋友可以学习下。
2010-08-08
js读取注册表的键值示例
读取注册表的键值的方法有很多，在本文将为大家详细介绍下使用js如何实现注册表的键值读取，感兴趣的朋友可以参考下
2013-09-09
利用JavaScript实现简单全选和全不选的思路和方法
最近开始练习js的基本操作,常常因为一些小疏忽导致页面效果无法实现,下面这篇文章主要给大家介绍了关于利用JavaScript实现简单全选和不全选的思路和方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-07-07
微信小程序返回到顶部功能的简单实现
在做微信小程序开发时,遇到一个问题,要如何实现返回顶部的功能,下面这篇文章主要给大家介绍了微信小程序返回到顶部功能的简单实现,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-11-11
Javascript实现div的toggle效果实例分析
这篇文章主要介绍了Javascript实现div的toggle效果的方法,实例分析了采用纯javascript实现toggle效果的相关技巧,需要的朋友可以参考下
2015-06-06
如何动态加载外部Javascript文件
这篇文章主要介绍了如何动态加载外部Javascript文件，本文举例讲解使用js加载器动态加载外部Javascript文件，感兴趣的小伙伴们可以参考一下
2015-12-12