笙亿网络策划

JavaScript 代码风格指南怎么写？

约 10 分钟读完 4 阅
文章导读
上一个 测验 下一个 JavaScript 风格指南是一组通用规则，用于规范如何编写 JavaScript 代码。这些规则可以包括——使用哪种引号、缩进多少空格、最大行长度、使用单行注释（以 // 开头）等。
📋 目录
  1. 壹 代码缩进
  2. 贰 注释
  3. 叁 变量声明
  4. 肆 标识符名称使用 camelCase
  5. 伍 空格和括号
  6. 陆 对象规则
  7. 柒 语句规则
  8. 捌 行长度
A A

JavaScript - 风格指南

上一个
测验
下一个

JavaScript 风格指南是一组通用规则，用于规范如何编写 JavaScript 代码。这些规则可以包括——使用哪种引号、缩进多少空格、最大行长度、使用单行注释（以 // 开头）等。

当一家公司开始开发实时 JavaScript 项目时，会有数百名开发者参与。如果每个开发者采用不同的代码编写风格，管理复杂代码就会变得非常困难。因此，在整个项目中遵循相同的代码风格非常重要。

在这里，我们介绍了一些在项目开发中需要遵循的基本编码规范。

代码缩进

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

示例

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

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

变量声明

始终在作用域顶部声明变量。如果变量是全局变量，则在文件顶部声明。同样，如果变量在块或 function 中，则在块或 function 的顶部声明。此外，变量名必须以字母开头。

示例

在下面的代码中，我们在代码顶部声明了变量，并且每个变量的名称都以字母开头。

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

标识符名称使用 camelCase

在 JavaScript 中，始终使用 camelCase 约定来定义标识符。在 camelCase 约定中，标识符的首字母应为小写，第二个单词的首字母应为大写。这里，标识符包括 function 名称、变量名称、对象名称、class 名称等。

示例

在下面的代码中，'greetMessage' 和 'executeGreet' 这两个标识符都使用了 camelCase。

<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 中有 3 种类型的语句。

  • 简单的单行语句

  • 复合语句

  • 多行语句

简单的单行语句应该始终以分号结束。

对于复合语句，我们在同一行语句后放置空白字符和开括号。接下来，从下一行开始添加语句体，在最后一行添加闭合括号。闭合括号后不放置分号。

如果语句太长无法写在一行中，我们可以在运算符后添加换行。

示例

在下面的代码中，我们定义了单行语句、复合语句和多行语句。

<html>
<body>
<h2> Statement Guidelines Conventions </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> 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>

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