為人類編寫代碼，而不僅僅是為機器編寫代碼

在軟件開發(fā)的世界中，編寫有效的代碼只是一個開始。作為開發(fā)人員，我們經(jīng)常專注于使代碼發(fā)揮作用，但有時我們會忘記代碼是供人類和機器閱讀和理解的。 JavaScript 與所有編程語言一樣，可以用多種不同的方式編寫，但編寫人類可讀的 JavaScript 是構(gòu)建可維護、可擴展的應用程序的一項關(guān)鍵技能。

人類可讀的代碼是其他開發(fā)人員（甚至未來的你）易于理解的代碼。它減少了認知負擔，使團隊能夠更有效地協(xié)作，并隨著時間的推移簡化調(diào)試和更新代碼。在本文中，我們將探討為什么編寫人類可讀的 JavaScript 至關(guān)重要，并將討論實現(xiàn)這一目標的最佳實踐。

為什么人類可讀的 JavaScript 很重要

1. 協(xié)作：在團隊環(huán)境中，多個開發(fā)人員在同一個代碼庫上工作是很常見的。編寫人類可讀的代碼可確保您的團隊成員可以輕松理解您的邏輯，從而實現(xiàn)更順暢的協(xié)作和更快的開發(fā)周期。

2. 維護：代碼的讀取次數(shù)多于編寫次數(shù)。您或其他開發(fā)人員可能需要在最初編寫一段代碼數(shù)月甚至數(shù)年后再次查看該代碼。清晰易讀的代碼使維護任務（例如修復錯誤或添加新功能）變得更加容易。

3. 調(diào)試：出現(xiàn)問題時，編寫良好的代碼更容易調(diào)試。人類可讀的代碼可以更快地發(fā)現(xiàn)錯誤、理解邏輯流程并實施必要的修復。

4. 入職：當新開發(fā)人員加入項目時，他們需要快速熟悉代碼庫。編寫簡潔易讀的代碼可以幫助新團隊成員理解代碼的結(jié)構(gòu)和用途，從而減少入職時間。

編寫人類可讀 JavaScript 的最佳實踐

1.使用描述性變量和函數(shù)名稱

你的變量和函數(shù)應該清楚地描述它們的目的。避免使用像 x 或 y 這樣的單字母變量名，除非您工作的范圍非常小且含義很明顯。相反，請使用有意義的名稱來描述它們持有的數(shù)據(jù)或它們執(zhí)行的操作。

不好的例子：

function a(x, y) {
  return x * y;
}

好例子：

function calculateArea(width, height) {
  return width * height;
}

在這個很好的例子中，函數(shù)的作用和參數(shù)代表什么就一目了然了。這種清晰性使代碼更容易一目了然。

2. 保持功能小而集中

函數(shù)應該做一件事并且做好它。大型、多用途的函數(shù)難以理解和維護。將代碼分解為更小、更集中的函數(shù)可以提高可讀性，并使其更易于測試和調(diào)試。

不好的例子：

function a(x, y) {
  return x * y;
}

好例子：

function calculateArea(width, height) {
  return width * height;
}

在這個很好的例子中，每個函數(shù)都有一個職責。主 processUserData 函數(shù)變得更容易閱讀，因為邏輯被分成更小的描述性部分。

3. 在必要的地方寫下評論

注釋是解釋為什么以某種方式完成某些操作或澄清非顯而易見的代碼的好方法。然而，注釋不應該被用作編寫不清楚的代碼的拐杖。使用注釋來補充而不是補償寫得不好的代碼。

不好的例子：

function processUserData(user) {
  // Validate user
  if (!user.name || !user.email) {
    return 'Invalid user data';
  }

  // Save user
  database.save(user);

  // Send email
  emailService.sendWelcomeEmail(user.email);

  return 'User processed successfully';
}

好例子：

function validateUser(user) {
  return user.name && user.email;
}

function saveUser(user) {
  database.save(user);
}

function sendWelcomeEmail(user) {
  emailService.sendWelcomeEmail(user.email);
}

function processUserData(user) {
  if (!validateUser(user)) {
    return 'Invalid user data';
  }

  saveUser(user);
  sendWelcomeEmail(user);

  return 'User processed successfully';
}

在壞例子中，注釋是多余的，因為代碼本身很清晰。在很好的示例中，注釋通過解釋該函數(shù)專門計算矩形的面積來添加有用的上下文。

4. 使用一致的格式和縮進

一致的格式使代碼更具可讀性且更易于遵循。無論您使用制表符還是空格、單引號還是雙引號，保持一致都很重要。 Prettier 或 ESLint 等工具可以幫助在您的代碼庫中強制執(zhí)行一致的格式。

不好的例子：

// This multiplies width and height to get the area
function calculateArea(width, height) {
  return width * height;
}

好例子：

// Calculates the area of a rectangle
function calculateArea(width, height) {
  return width * height;
}

在很好的示例中，一致的縮進和間距使代碼更易于閱讀。

5.避免深層嵌套

深度嵌套的代碼可能難以遵循和維護。嘗試通過使用早期返回或?qū)⑦壿嫹殖筛〉暮瘮?shù)來扁平化您的代碼。

不好的例子：

function calculateArea(width,height){
  return width * height;}

好例子：

function calculateArea(width, height) {
  return width * height;
}

在很好的例子中，通過使用提前返回來減少嵌套。這使得代碼更容易閱讀和理解。

6. 避免使用幻數(shù)

幻數(shù)是出現(xiàn)在代碼中且沒有解釋的數(shù)字。它們會使代碼更難理解和維護。相反，使用命名常量使您的代碼更具描述性。

不好的例子：

function processUser(user) {
  if (user) {
    if (user.isActive) {
      if (user.hasProfile) {
        return 'User is valid';
      }
    }
  }
  return 'Invalid user';
}

好例子：

function processUser(user) {
  if (!user || !user.isActive || !user.hasProfile) {
    return 'Invalid user';
  }

  return 'User is valid';
}

在很好的示例中，幻數(shù) 60 被替換為常量，這使得代碼更具可讀性并且更易于維護。

7. 優(yōu)雅地處理錯誤

錯誤處理應該清晰且一致。始終提供有意義的錯誤消息，并避免使用通用或不明確的錯誤。

不好的例子：

function a(x, y) {
  return x * y;
}

好例子：

function calculateArea(width, height) {
  return width * height;
}

在很好的示例中，錯誤消息提供了有關(guān)錯誤原因的清晰信息，從而更易于調(diào)試。

結(jié)論

編寫人類可讀的 JavaScript 是一項基本技能，而不僅僅是讓代碼正常工作。這是關(guān)于編寫其他開發(fā)人員（以及未來的你）可以輕松理解、維護和調(diào)試的代碼。通過遵循最佳實踐，例如使用描述性名稱、保持函數(shù)較小、編寫有意義的注釋以及使用一致的格式，您可以編寫出不僅有效而且讀起來很愉快的代碼。

請記住，代碼既適用于機器，也適用于人類。通過優(yōu)先考慮可讀性，從長遠來看，您將創(chuàng)建更易于維護、更可擴展且更高效的代碼。

以上是人類可讀的 JavaScript的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！