JavaScript - 樣式指南

JavaScript 樣式指南是一套規範 JavaScript 程式碼編寫方式的一般規則。這些規則可能包括：使用哪種引號、縮排多少個空格、最大行長度、使用單行註釋（以 // 開頭）等。

當任何公司開始開發一個即時 JavaScript 專案時，會有數百名開發人員參與。如果每個開發人員都遵循不同的程式碼編寫風格，那麼管理複雜的程式碼就會變得非常困難。因此，在整個專案中遵循相同的程式碼風格非常重要。

這裡，我們介紹了一些在開發專案時應遵循的基本編碼約定。

程式碼縮排

您應該始終使用固定空格（2、3 或 4 個空格）縮排程式碼，具體取決於專案的編碼約定。此外，程式碼不應包含尾隨空格。

示例

在下面的程式碼中，我們在函式中使用了三個空格縮排。

<html>
   <body>
      <h2> Intendation Conventions </h2>
      <div id = "output"> </div>
      <script>
         const output = document.getElementById('output');
         function func() {
            output.innerHTML = "Function executed!";
            return 10;
         }
         func();
      </script>
   </body>
</html>

註釋

您應該始終使用行註釋而不是塊註釋，並且行註釋應從程式碼的左側開始。

示例

在下面的程式碼中，我們使用“//”行註釋來註釋程式碼。

<html>
<body>
   <h2> Comment Conventions </h2>
   <div id="output"> </div>
   <script>
      const output = document.getElementById('output');
      output.innerHTML = "Hello World!";
      // var a = 10;
      // var b = 20;
   </script>
</body>
</html>

變數宣告

始終在其作用域的頂部宣告變數。如果變數是全域性變數，則在檔案的頂部宣告它。類似地，如果變數在塊或函式中，則在塊或函式的頂部宣告它。此外，變數名必須以字母開頭。

示例

在下面的程式碼中，我們在程式碼的頂部聲明瞭變數，並且每個變數的名稱都以字母開頭。

<html>
<body>
   <h2> Variable Conventions </h2>
   <div id="output"> </div>
   <script>
      var a = 10;
      var b = 20;
      document.getElementById('output').innerHTML = 
		"The sum of 10 and 20 is: " + (a + b);
   </script>
</body>
</html>

識別符號名稱使用駝峰命名法

在 JavaScript 中，始終使用駝峰命名法來定義識別符號。在駝峰命名法中，識別符號的第一個字母應為小寫，第二個單詞的第一個字母應為大寫。這裡的識別符號包括函式名、變數名、物件名、類名等。

示例

在下面的程式碼中，“greetMessage”和“executeGreet”這兩個識別符號都使用了駝峰命名法。

<html>
<body>
   <h2> camelCase Conventions </h2>
   <div id="output"> </div>
   <script>
      var greetMessage = "Hello Developers!";
      let output = document.getElementById('output');
      // Function name with camelCase
      function executeGreet() {
         output.innerHTML = greetMessage;
      }
      executeGreet();
   </script>
</body>
</html>

空格和括號

在 JavaScript 中，我們應該在每個運算子（如“+”、“typeof”等）前後包含空格。此外，在括號周圍包含空格也很重要。

示例

在下面的程式碼中，我們在“if”條件後添加了適當的空格。此外，我們在“+=”運算子前後添加了空格。

<html>
<body>
   <h2> Space and all brackets Conventions </h2>
   <div id="output"> </div>
   <script>
      let output = document.getElementById('output');
      if (9 > 10) {
         output.innerHTML += "9 is greater than 10";
      } else {
         output.innerHTML += "9 is not greater than 10";
      }
   </script>
</body>
</html>

物件規則

在 JavaScript 中，我們在物件識別符號之後使用“=”賦值運算子和左括號“{”。接下來，我們編寫物件屬性（以分號分隔的鍵值對），並且我們在新行中編寫每個屬性，並用逗號（，）分隔它們。此外，我們不會在最後一個物件屬性之後放置逗號。最後，在新增右括號後，我們在後面新增分號（;）。

示例

在下面的程式碼中，我們根據物件指南定義了物件。此外，我們還使用 JSON.stringify() 方法在網頁上顯示了物件。

<html>
<body>
   <h2> Object Conventions </h2>
   <div id="output"> </div>
   <script>
      const obj = {
         prop1: 'value1',
         prop2: 'value2',
         prop3: 'value3'
      };
      document.getElementById("output").innerHTML = JSON.stringify(obj, null, 2);
</script>
</body>
</html>

語句規則

JavaScript 中有三種類型的語句。

簡單的單行語句
複合語句
多行語句

簡單的單行語句應該始終以分號結尾。

對於複合語句，我們在同一行語句之後新增空格和一個開括號。接下來，我們從下一行開始新增語句體，並在最後一行新增一個閉括號。我們不會在閉括號後面新增分號。

如果語句太長，無法在一行中寫完，我們可以在運算子之後新增換行符。

示例

在下面的程式碼中，我們定義了單行語句、複合語句和多行語句。

<html>
<body>
<h2> Statement Guidelines Conventions </h2>
<div id="output"> </div>
<script>
   const output = document.getElementById('output');
   // single line statement
   const arr = ["one", "two", "Three"];

   // Compound statement
   for (let i = 0; i < arr.length; i++) {
      output.innerHTML += arr[i] + "<br>";
   }

   // Multi-line statement
   if (10 > 9 && 10 > 5 && 10 > 6) {
      output.innerHTML += "10 is greater than 9 and 10 is greater than 5 <br>";
   }
</script>
</body>
</html>

行長度

閱讀長程式碼行總是很困難。因此，我們應該在一行中最多放置 80 個字元。

示例

在下面的程式碼中，我們在一行中添加了半個字串，因為它包含超過 80 個字元。

<html>
<body>
   <h2> Line length Conventions </h2>
   <div id="output"> </div>
   <script>
      let str = `This is too long a sentence. 
            Let's put the limit of 80 characters.`
      document.getElementById('output').innerHTML = str;
   </script>
</body>
</html>

在本教程中，我們解釋了常見的樣式約定。但是，您可以擁有自己的編碼約定，並在整個專案中遵循它們。

列印頁面