快捷導(dǎo)航

JS中可以改善代碼的5種重構(gòu)技術(shù)分享

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

代碼重構(gòu)涉及在不改變其外部功能的情況下對現(xiàn)有代碼進(jìn)行改進(jìn)，這是編程的核心部分之一，所以下面我們將研究一些技巧，這些技巧可以幫助我們以更好的方式重構(gòu)代碼，希望對大家有所幫助

編寫代碼很有趣，我們非常喜歡它。直到一個錯誤突然出現(xiàn)，需要相當(dāng)長的時間來解決它。有時，錯誤并不明顯，因為代碼按預(yù)期運行，但在生產(chǎn)中可能會導(dǎo)致錯誤?？赡軙行阅芎涂稍L問性方面的錯誤，這會導(dǎo)致用戶體驗不佳。通過重構(gòu)代碼可以減少這類錯誤。

代碼重構(gòu)涉及在不改變其外部功能的情況下對現(xiàn)有代碼進(jìn)行改進(jìn)。這是編程的核心部分之一，不能忽視，否則，我們將無法實現(xiàn)代碼的更好版本。代碼重構(gòu)可以提高代碼的可讀性、可維護(hù)性和可擴(kuò)展性。它還旨在提高性能和提高開發(fā)人員的生產(chǎn)力。

今天，我們將研究一些技巧，這些技巧可以幫助我們以更好的方式重構(gòu)代碼。

如何整合重構(gòu)

在尋找改進(jìn)重構(gòu)的技巧之前，讓我們看看如何將代碼重構(gòu)集成到你的編碼過程中。可以使用以下建議來實現(xiàn)這個目的：

專門分配時間來重構(gòu)代碼
將較大的重構(gòu)問題分解為較小的問題以進(jìn)行管理
嘗試讓整個團(tuán)隊參與重構(gòu)過程
使用自動化工具，可以幫助您查找常見的重構(gòu)錯誤

提取方法

這種方法涉及將代碼塊轉(zhuǎn)換為單獨的方法/函數(shù)。這樣做是為了提高代碼的結(jié)構(gòu)和可讀性。通過提取較長且復(fù)雜的代碼塊，將其變成更小且易于管理的方法來實現(xiàn)這一目標(biāo)。

要使用這種技術(shù)，我們首先需要找到一個執(zhí)行特定任務(wù)的代碼塊，這些任務(wù)有點復(fù)雜。在識別之后，我們提取代碼并將其放入一個新方法中。此外，確保為該方法起一個有意義的名稱。現(xiàn)在，在我們需要代碼的地方調(diào)用它們。

重構(gòu)前

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;
}

重構(gòu)后

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;
}

可以看到我們?nèi)绾螌⒃?for 循環(huán)內(nèi)運行的復(fù)雜代碼轉(zhuǎn)換為另一種方法以簡化和提高可讀性。

用符號常量替換魔術(shù)數(shù)字

這個代碼重構(gòu)是為了編寫更清晰、更易讀的代碼。魔術(shù)數(shù)字只是指硬編碼的數(shù)值。編寫硬編碼的數(shù)字會給其他人帶來困惑，因為它們的目的沒有定義。將硬編碼的值轉(zhuǎn)換為具有有意義名稱的變量肯定有助于其他人理解它。此外，還可以為其添加注釋以進(jìn)一步解釋。這也有助于調(diào)試和降低將來出現(xiàn)錯誤的風(fēng)險。

重構(gòu)前

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

重構(gòu)后

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

合并重復(fù)代碼

復(fù)制或相同的代碼可能會出現(xiàn)在來自不同位置的代碼中。這個代碼不需要完全相同，但它可以執(zhí)行類似的任務(wù)或從原始代碼稍微擴(kuò)展一點。重復(fù)的代碼可能導(dǎo)致多種問題，包括增加維護(hù)成本、難以對代碼庫進(jìn)行更改以及引入錯誤的風(fēng)險更高。

在重構(gòu)代碼時，必須注意查找重復(fù)的代碼。在找到這樣的代碼時，處理這個問題的一種方法是將這些代碼轉(zhuǎn)換為單個可重用的函數(shù)/方法。

重構(gòu)前

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;
}

重構(gòu)后

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;
}

在之前的代碼示例中，我們在求和并再次求和以找到平均值。在之后，我們用提供給它們兩者之和的函數(shù)替換了這個過程。

簡化方法

當(dāng)你尋找要優(yōu)化的方法/功能時，它與識別非常相似?？梢詾檫壿嬜龊喕姆椒ɑ蚴蛊淇勺x和清潔。此技術(shù)可以幫助你減少代碼行。

此方法可以分解為較小的代碼塊，可以在函數(shù)中找到它們以進(jìn)行優(yōu)化。以下是這些代碼塊：

刪除不必要的變量和表達(dá)式：可能有一些用于調(diào)試的變量或表達(dá)式被遺漏，例如JavaScript中的console.log。
使用內(nèi)置功能：有時使用庫或語言的內(nèi)置功能會更好。因為可以用更少的代碼實現(xiàn)相同的功能。
簡化條件語句：如果一個方法有復(fù)雜的條件語句，請考慮通過合并條件或使用三元運算符來簡化它們。

使用懶加載

這是一種只在需要時加載對象的技術(shù)。這可以通過減少內(nèi)存使用量來提高應(yīng)用程序的性能。這將加快應(yīng)用程序的加載速度。

這種技術(shù)在Web開發(fā)中非常流行。尤其是在像React這樣的JavaScript框架中，可以通過懶加載導(dǎo)入不同的組件。這也可以根據(jù)需要加載圖像。

重構(gòu)前

import React from 'react';
import MyComponent from './MyComponent';
const App = () => {
  return (
    <div>
      <h1>My App</h1>
      <MyComponent />
    </div>
  );
}
export default App;

重構(gòu)后

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 功能異步導(dǎo)入 MyComponent 組件。這意味著該組件僅在實際需要時才加載，從而提高了我們應(yīng)用程序的整體性能。我們還使用 Suspense 組件在加載組件時顯示回退 UI。