改善你的代码：使用这5种重构技术

本文首发于微信公众号：大迁世界, 我的微信：qq449245884，我会第一时间和你分享前端行业趋势，学习途径等等。
更多开源作品请看 GitHub github.com/qq449245884… ，包含一线大厂面试完整考点、资料以及我的系列文章。

快来免费体验ChatGpt plus版本的，我们出的钱
体验地址:chat.waixingyun.cn
可以加入网站底部技术群，一起找bug.

本文由 Suraj Vishwakarma 撰写的博文，这篇文章讨论了如何将代码重构整合到你的编程过程中，建议你特别为重构代码分配时间，并将较大的重构问题分解为较小的问题进行处理。

dev.to/documatic/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 calculateItemTotal(item) {
                                        if (!item.quantity || !item.price) {
                                            console.error('Invalid item', item);
                                                return 0;
                                                  }
                                                    return item.quantity * item.price;
                                                    }" title="" data-bs-original-title="复制" aria-label="复制"></button>
</div>

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;
                    }
                <span class="hljs-keyword">function</span> calculateItemTotal(<span class="hljs-type">item</span>) {
                  <span class="hljs-keyword">if</span> (!<span class="hljs-type">item</span>.quantity || !<span class="hljs-type">item</span>.price) {
                      console<span class="hljs-built_in">.error</span>(<span class="hljs-string">'Invalid item'</span>, <span class="hljs-type">item</span>);
                          <span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;
                            }
                              <span class="hljs-keyword">return</span> <span class="hljs-type">item</span>.quantity * <span class="hljs-type">item</span>.price;
                              }</pre><p>可以看到我们如何将在 <code>for</code> 循环内运行的复杂代码转换为另一种方法以简化和提高可读性。</p><h2 id="item-0-3">用符号常量替换魔术数字</h2><p>这个代码重构是为了编写更清晰、更易读的代码。魔术数字只是指硬编码的数值。编写硬编码的数字会给其他人带来困惑，因为它们的目的没有定义。将硬编码的值转换为具有有意义名称的变量肯定有助于其他人理解它。此外，还可以为其添加注释以进一步解释。这也有助于调试和降低将来出现错误的风险。</p><h4>重构前</h4><div class="widget-codetool" style="display: none;">
      <div class="widget-codetool--inner">
                  <button type="button" class="btn btn-dark far fa-copy rounded-0 sflex-center copyCode" data-toggle="tooltip" data-placement="top" data-clipboard-text="if (temperature > 32) {
                    // Do something if temperature is above freezing
                    }" title="" data-bs-original-title="复制" aria-label="复制"></button>
</div>

if (temperature > 32) {
  // Do something if temperature is above freezing
  }

重构后

                  if (temperature > FREEZING_POINT) {
                     // Do something if temperature is above freezing
                     }" title="" data-bs-original-title="复制" aria-label="复制"></button>
</div>

const int FREEZING_POINT = 32;
if (temperature > FREEZING_POINT) {
// Do something if temperature is above freezing
}

                              function calculateAverage(numbers) {
                                let total = 0;
                                  for (let i = 0; i < numbers.length; i++) {
                                      total += numbers[i];
                                        }
                                          const average = total / numbers.length;
                                            return average;
                                            }" title="" data-bs-original-title="复制" aria-label="复制"></button>
</div>

function calculateTotal(numbers) {
  let total = 0;
    for (let i = 0; i < numbers.length; i++) {
        total += numbers[i];
          }
            return total;
            }
        <span class="hljs-keyword">function</span> <span class="hljs-title function_">calculateAverage</span>(<span class="hljs-params">numbers</span>) {
          let total = <span class="hljs-number">0</span>;
            <span class="hljs-keyword">for</span> (let i = <span class="hljs-number">0</span>; i &lt; numbers.<span class="hljs-built_in">length</span>; i++) {
                total += numbers[i];
                  }
                    const <span class="hljs-built_in">average</span> = total / numbers.<span class="hljs-built_in">length</span>;
                      <span class="hljs-keyword">return</span> <span class="hljs-built_in">average</span>;
                      }</pre><h4>重构后</h4><div class="widget-codetool" style="display: none;">
      <div class="widget-codetool--inner">
                  <button type="button" class="btn btn-dark far fa-copy rounded-0 sflex-center copyCode" data-toggle="tooltip" data-placement="top" data-clipboard-text="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;
                                      }" title="" data-bs-original-title="复制" aria-label="复制"></button>
</div>

function calculateSum(numbers) {
  let total = 0;
    for (let i = 0; i < numbers.length; i++) {
        total += numbers[i];
          }
            return total;
            }
        <span class="hljs-keyword">function</span> <span class="hljs-title">calculateTotal</span>(numbers) {
          <span class="hljs-keyword">return</span> <span class="hljs-type">calculateSum(numbers)</span>;
          }
          
          <span class="hljs-keyword">function</span> <span class="hljs-title">calculateAverage</span>(numbers) {
            const total = calculateSum(numbers);
              const average = total / numbers.length;
                <span class="hljs-keyword">return</span> average;
                }</pre><p>在之前的代码示例中，我们在求和并再次求和以找到平均值。在之后，我们用提供给它们两者之和的函数替换了这个过程。</p><h2 id="item-0-5">简化方法</h2><p>当你寻找要优化的方法/功能时，它与识别非常相似。可以为逻辑做简化的方法或使其可读和清洁。此技术可以帮助你减少代码行。</p><p>此方法可以分解为较小的代码块，可以在函数中找到它们以进行优化。以下是这些代码块：</p><ul><li>删除不必要的变量和表达式：可能有一些用于调试的变量或表达式被遗漏，例如JavaScript中的console.log。</li><li>使用内置功能：有时使用库或语言的内置功能会更好。因为可以用更少的代码实现相同的功能。</li><li>简化条件语句：如果一个方法有复杂的条件语句，请考虑通过合并条件或使用三元运算符来简化它们。</li></ul><h2 id="item-0-6">使用懒加载</h2><p>这是一种只在需要时加载对象的技术。这可以通过减少内存使用量来提高应用程序的性能。这将加快应用程序的加载速度。</p><p>这种技术在Web开发中非常流行。尤其是在像React这样的JavaScript框架中，可以通过懒加载导入不同的组件。这也可以根据需要加载图像。</p><h4>重构前</h4><div class="widget-codetool" style="display: none;">
      <div class="widget-codetool--inner">
                  <button type="button" class="btn btn-dark far fa-copy rounded-0 sflex-center copyCode" data-toggle="tooltip" data-placement="top" data-clipboard-text="import React from 'react';
                  import MyComponent from './MyComponent';
                  
                  const App = () => {
                    return (
                        <div>
                              <h1>My App</h1>
                                    <MyComponent />
                                        </div>
                                          );
                                          }
                                          
                                          export default App;" title="" data-bs-original-title="复制" aria-label="复制"></button>
</div>

import React from 'react';
import MyComponent from './MyComponent';
const App = () => {
return (
<div>
<h1>My App</h1>
<MyComponent />
</div>
);
}
                    <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">App</span>;</pre><h4>重构后</h4><div class="widget-codetool" style="display: none;">
      <div class="widget-codetool--inner">
                  <button type="button" class="btn btn-dark far fa-copy rounded-0 sflex-center copyCode" data-toggle="tooltip" data-placement="top" data-clipboard-text="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;" title="" data-bs-original-title="复制" aria-label="复制"></button>
</div>

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>
);
}
                                  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">App</span>;</pre><p>在更新版本中，我们使用 lazy 功能异步导入 <code>MyComponent</code> 组件。这意味着该组件仅在实际需要时才加载，从而提高了我们应用程序的整体性能。我们还使用 <code>Suspense</code> 组件在加载组件时显示回退 UI。</p><h2 id="item-0-7">总结</h2><p>重构是任何希望提高代码质量、性能和可维护性的开发者的基本实践。通过花时间分析和优化代码，可以消除冗余，降低复杂性，并创建更高效且可扩展的应用程序。</p><p>通过不断审查和改进你的代码，你可以创建一个更强大、更具弹性的应用程序。希望这篇文章能帮助您了解一些重构技巧。</p><p><strong>代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 <a href="https://link.segmentfault.com/?enc=RqplbE9sUsnLX0OP2xgWDQ%3D%3D.S9oBFGdzTre%2B%2BRHu37oGVTX4Js8IX%2BninTJ3UOHbpiKqtnMz67lN4zR31kgX3NpT" rel="nofollow" target="_blank">Fundebug</a>。</strong></p><h3 id="item-0-8">交流</h3><blockquote><p>有梦想，有干货，微信搜索 <strong>【大迁世界】</strong> 关注这个在凌晨还在刷碗的刷碗智。</p><p>本文 GitHub  <a href="https://link.segmentfault.com/?enc=VihkzKu5JyfrhnUzMARSOg%3D%3D.zZxv9WjPZnPQDdrEUuolm%2F1nkWxTgFqNNNSHbAjz0RtcKTRBg51b48YFEGKcfurB" rel="nofollow" target="_blank">https://github.com/qq449245884/xiaozhi</a> 已收录，有一线大厂面试完整考点、资料以及我的系列文章。</p></blockquote><p></p>