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>

变量声明

始终在其范围的顶部声明变量。如果变量是全局变量，请在文件顶部声明它。同样，如果变量位于 th 块或函数中，则将其声明为块或函数的顶部。此外，变量名称必须以字母开头。

例

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

<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 约定中，标识符的第一个字母应为小写，第 2 个单词的第一个字母应为大写。此处，标识符包括函数名称、变量名称、对象名称、类名称等。

例

在下面的代码中，'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 中，我们使用 '=' 赋值运算符，并在对象标识符后使用左方括号 '{'。接下来，我们编写对象属性（用分号分隔的键值对），并将每个属性写入新行并用逗号（，）分隔它们。此外，我们不会在最后一个 object 属性后放置逗号。最后，我们在添加右括号后添加分号（;)。

例

在下面的代码中，我们根据对象准则定义了对象。此外，我们还使用 JSON.stringify（）方法在 Web 页面上显示对象。

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

简单的单行语句
Compound 语句
多行语句

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

对于 compound 语句，我们将空格和左括号放在同一行的语句后面。接下来，我们从下一行开始添加语句正文，在最后一行中，我们添加右括号。我们不会在右括号后放置分号。

如果语句太长，不能写成单行，我们可以在运算符后添加换行符。

例

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

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

我们在本教程中解释了常见的样式约定。但是，您可以拥有自己的编码约定，并在整个项目中遵循它们。

<< JavaScript - 性能 JavaScript - 内置函数 >>