乐趣区

关于前端:改善你的代码使用这5种重构技术

jiezi

本文首发于微信公众号：大迁世界, 我的微信：qq449245884，我会第一工夫和你分享前端行业趋势，学习路径等等。
更多开源作品请看 GitHub https://github.com/qq449245884/xiaozhi，蕴含一线大厂面试残缺考点、材料以及我的系列文章。

快来收费体验 ChatGpt plus 版本的，咱们出的钱
体验地址:https://chat.waixingyun.cn
能够退出网站底部技术群，一起找 bug.

本文由 Suraj Vishwakarma 撰写的博文，这篇文章探讨了如何将代码重构整合到你的编程过程中，倡议你特地为重构代码调配工夫，并将较大的重构问题合成为较小的问题进行解决。

https://dev.to/documatic/5-code-refactoring-techniques-to-improve-your-code-2lia

上面是注释~~

编写代码很乏味，咱们十分喜爱它。直到一个谬误忽然呈现，须要相当长的工夫来解决它。有时，谬误并不显著，因为代码按预期运行，但在生产中可能会导致谬误。可能会有性能和可拜访性方面的谬误，这会导致用户体验不佳。通过重构代码能够缩小这类谬误。

代码重构波及在不扭转其内部性能的状况下对现有代码进行改良。这是编程的外围局部之一，不能漠视，否则，咱们将无奈实现代码的更好版本。代码重构能够进步代码的可读性、可维护性和可扩展性。它还旨在进步性能和进步开发人员的生产力。

明天，咱们将钻研一些技巧，这些技巧能够帮忙咱们以更好的形式重构代码。

如何整合重构

在寻找改良重构的技巧之前，让咱们看看如何将代码重构集成到你的编码过程中。能够应用以下倡议来实现这个目标：

  • 专门调配工夫来重构代码
  • 将较大的重构问题合成为较小的问题以进行治理
  • 尝试让整个团队参加重构过程
  • 应用自动化工具，能够帮忙您查找常见的重构谬误

提取办法

这种办法波及将代码块转换为独自的办法 / 函数。这样做是为了进步代码的构造和可读性。通过提取较长且简单的代码块，将其变成更小且易于治理的办法来实现这一指标。

要应用这种技术，咱们首先须要找到一个执行特定工作的代码块，这些工作有点简单。在辨认之后，咱们提取代码并将其放入一个新办法中。此外，确保为该办法起一个有意义的名称。当初，在咱们须要代码的中央调用它们。

重构前

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。

总结

重构是任何心愿进步代码品质、性能和可维护性的开发者的根本实际。通过花工夫剖析和优化代码，能够打消冗余，升高复杂性，并创立更高效且可扩大的应用程序。

通过一直审查和改良你的代码，你能够创立一个更弱小、更具弹性的应用程序。心愿这篇文章能帮忙您理解一些重构技巧。

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

退出移动版