快捷導(dǎo)航

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

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

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

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

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

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

如何整合重構(gòu)

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

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

提取方法

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

要使用這種技術(shù)，我們首先需要找到一個(gè)執(zhí)行特定任務(wù)的代碼塊，這些任務(wù)有點(diǎn)復(fù)雜。在識(shí)別之后，我們提取代碼并將其放入一個(gè)新方法中。此外，確保為該方法起一個(gè)有意義的名稱?，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)運(yùn)行的復(fù)雜代碼轉(zhuǎn)換為另一種方法以簡(jiǎn)化和提高可讀性。

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

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

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

在重構(gòu)代碼時(shí)，必須注意查找重復(fù)的代碼。在找到這樣的代碼時(shí)，處理這個(gè)問題的一種方法是將這些代碼轉(zhuǎn)換為單個(gè)可重用的函數(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;
}

在之前的代碼示例中，我們?cè)谇蠛筒⒃俅吻蠛鸵哉业狡骄?。在之后，我們用提供給它們兩者之和的函數(shù)替換了這個(gè)過程。

簡(jiǎn)化方法

當(dāng)你尋找要優(yōu)化的方法/功能時(shí)，它與識(shí)別非常相似?？梢詾檫壿嬜龊?jiǎn)化的方法或使其可讀和清潔。此技術(shù)可以幫助你減少代碼行。

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

刪除不必要的變量和表達(dá)式：可能有一些用于調(diào)試的變量或表達(dá)式被遺漏，例如JavaScript中的console.log。
使用內(nèi)置功能：有時(shí)使用庫(kù)或語(yǔ)言的內(nèi)置功能會(huì)更好。因?yàn)榭梢杂酶俚拇a實(shí)現(xiàn)相同的功能。
簡(jiǎn)化條件語(yǔ)句：如果一個(gè)方法有復(fù)雜的條件語(yǔ)句，請(qǐng)考慮通過合并條件或使用三元運(yùn)算符來(lái)簡(jiǎn)化它們。

使用懶加載

這是一種只在需要時(shí)加載對(duì)象的技術(shù)。這可以通過減少內(nèi)存使用量來(lá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 組件。這意味著該組件僅在實(shí)際需要時(shí)才加載，從而提高了我們應(yīng)用程序的整體性能。我們還使用 Suspense 組件在加載組件時(shí)顯示回退 UI。