JavaScript 编码规范

你应该始终使用固定数量的空格（通常是2、3或4个空格）来缩进你的代码，具体取决于项目的编码规范。此外，代码不应该包含拖尾的空白字符。

示例

在下面的代码中，我们在函数中使用了三个空格的缩进。

<html>
   <body>
      <h2> 缩进规范 </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> 注释规范 </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> 变量规范 </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> 驼峰命名法规范 </h2>
   <div id="output"> </div>
   <script>
      var greetMessage = "Hello Developers!";
      let output = document.getElementById('output');
      // 函数名采用驼峰命名法
      function executeGreet() {
         output.innerHTML = greetMessage;
      }
      executeGreet();
   </script>
</body>
</html>

空格与括号

在 JavaScript 中，我们应该在每个运算符（如 +, typeof 等）前后包含空格。此外，在括号周围添加空格也很重要。

示例

在下面的代码中，我们在 if 条件后添加了适当的空格，并且在 += 运算符前后也添加了空格。

<html>
<body>
   <h2> 空格与括号规范 </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> 对象规范 </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> 语句规范 </h2>
<div id="output"> </div>
<script>
   const output = document.getElementById('output');
   // 单行语句
   const arr = ["one", "two", "Three"];

   // 复合语句
   for (let i = 0; i < arr.length; i++) {
      output.innerHTML += arr[i] + "<br>";
   }

   // 多行语句
   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> 行长度规范 </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>

我们在本教程中解释了常见的风格规范。然而，你可以有自己的编码规范，并在整个项目中遵循它们。