JavaScript编码风格指南(中文版)

时间 2019-12-07

标签 javascript 编码风格指南中文版栏目 JavaScript 繁體版

原文原文链接

前言：

程序语言的编码风格对于一个长期维护的软件很是重要，特别是在团队协做中。若是一个团队使用统一规范的编码分风格，能够提升团队的协做水平和工做效率。编程风格指南的核心是基本的格式化规则，这些规则决定了如何编写高水准的代码。本指南来自于《编写可维护的JavaScript》这本书，基于"Java语言编码规范"和Crockford的JavaScript编程规范，还有Nicbolas的一些我的经验和喜爱。写做本文旨在加深本身印象，也为了更多人的了解到JS编码风格，提升本身的编码质量。想了解更多的内容请阅读《编写可维护的JavaScript》。算法

1.缩进

每一行的层级由4个空格组成，避免使用Tab进行缩进。express

1 // 好的写法
2 if (true) {
3     doSomeThing();
4 }

2.行的长度

每行长度不该超过80个字符。若是一行超过80个字符，应当在一个运算符后换行。下一行应当增长两级缩进（8个字符）。编程

1 // 好的写法
2 doSomeThing(argument1, argument2, aegument3, argument4,
3         argument5);
4 
5 // 很差的写法：第二行只有4个空格的缩进
6 doSomeThing(argument1, argument2, aegument3, argument4,
7     argument5);

3.原始值

字符串应当始终使用双引号且保持一行，避免在字符串中使用斜线另起一行。浏览器

数字应当使用十进制整数，科学计算法表示整数，十六进制整数，或者十进制浮点小数，小数先后应当至少保留一位数字。避免使用八进制直接量。安全

特殊值null除了下述状况下应当避免使用。函数

用来初始化一个变量，这个变量可能被赋值为一个对象。
用来和一个已经初始化的变量比较，这个变量能够是也能够不是一个对象。
当函数的参数指望是对象时，被用做参数传入。
当函数的返回值指望是对象时，被用做返回值传出。

避免使用特殊值undefined。判断一个变量是否认义应当使用typeof操做符。this

4.运算符间距

二元预算符先后必须使用一个空格来保持表达式的整洁。操做符包括赋值运算符和逻辑运算符。编码

1 // 好的写法
2 for (var i = 0; i < count; i++) {
3     process(i);
4 }
5 
6 // 很差的写法：丢失了空格
7 for (var i=0; i<count; i++) {
8     process(i);
9 }

5.括号间距

当使用括号时，紧接左括号以后和紧接右括号以前不该该有空格。spa

1 // 好的写法
2 for (var i = 0; i < count; i++) {
3     process(i);
4 }
5  
6 // 很差的写法：参数两边有额外的空格
7 for (var i = 0; i < count; i++) {
8     process( i );
9 }

6.对象直接量

对象直接量应当有以下格式。code

起始左花括号应当同表达式保持同一行。
每一个属性的名值对应当保持一个缩进，第一个属性应当在左花括号后另起一行。
每一个属性的名值对应当使用不含引号的属性名，其后紧跟一个冒号（以前不舍空格），其后是值。
假若属性值是函数类型，函数体应当在属性名之下另起一行，并且其先后均应保留一个空行。
一组相关的属性先后能够插入空行以提高代码的可读性。
结束的右花括号应当独占一行。

 1 // 好的写法
 2 var object = {
 3 
 4     key1: value1,
 5     key2: value2,
 6 
 7     func: function() {
 8     // doSomeThing
 9     },
10 
11     key3: value3
12 };
13 
14 // 很差的写法：不恰当的缩进
15 var object = {
16         key1: value1,
17         key2: value2
18     };
19 
20 // 很差的写法：函数体周围缺乏空行
21 var object = {
22 
23     key1: value1,
24     key2: value2,
25     func: function() {
26     // doSomeThing
27     },
28     key3: value3
29 };

当对象字面量做为函数参数时，若是值是变量，起始花括号应当同函数名在同一行。全部其他先前列出的规则一样适用。

1 // 好的写法
2 doSomeThing({
3     key1: value1,
4     key2: value2
5 });
6 // 很差的写法：全部代码在一行上
7 doSomeThing({ key1: value1, key2: value2 });

7.注释

使用简洁明了注释有助于他人理解你的代码。以下状况应当使用注释。

代码晦涩难懂。
可能被误认为错误的代码。
必要但不明显的针对特定浏览器的代码。
对于对象、方法或者属性，生成文档是有必要的（使用恰当的文档注释）。

单行注释

单行注释应当用来讲明一行代码或者一组相关的代码。单行注释可能有三种使用方式。

独占一行的注释，用来解释下一行代码。
在代码行的尾部的注释，用来解释它以前的代码。
多行，用来注释掉一个代码块。

 1 // 好的写法
 2 if (condition) {
 3 
 4     // 若是代码执行到这里，则代表经过了全部安全检查
 5     allowed();
 6 }
 7 
 8 // 很差的写法：注释以前没有空行
 9 if (condition) {
10     // 若是代码执行到这里，则代表经过了全部安全检查
11     allowed();
12 }
13 
14 // 很差的写法：错误的缩进
15 if (condition) {
16 
17 // 若是代码执行到这里，则代表经过了全部安全检查
18     allowed();
19 }
20 
21 // 很差的写法：应当使用多行注释
22 // 这段代码进行**判断
23 // 而后执行
24 if (condition) {
25 
26     // 若是代码执行到这里，则代表经过了全部安全检查
27     allowed();
28 }
29 
30 // 好的写法：在行尾注释时，代码结尾和注释间应保留一个空格
31 if (condition) {
32 
33     // 若是代码执行到这里，则代表经过了全部安全检查
34     allowed(); // 执行**函数
35 }
36 
37 // 很差的写法：代码和注释间没有足够的空格
38 if (condition) {
39 
40     // 若是代码执行到这里，则代表经过了全部安全检查
41     allowed();// 执行**函数
42 }
43 
44 // 好的写法：在注释掉一个代码块时，应联系使用单行注释，多行注释不该当使用在此种状况下。
45 // if (condition) {
46 //     allowed();//执行**函数
47 // }

多行注释

多行注释应当在代码须要更多文字去解释的时候使用。每一个多行注释都至少有以下三行：

首行仅仅包括/*注释开始。该行不该当有其余文字。
接下来的行以*开头并保持左对齐。这些能够有文字描述。
最后一行以*/开头并同先前行保持对齐。也不该有其余文字。

多行注释的首行应当保持同它描述代码的相同层次的缩进。后续的每行应当有一样层次的缩进并附加一个空格（为了适当保持*字符的对齐）。每个多行代码以前应当预留一个空行。

1 // 好的写法、
2 if (condition) {
3 
4     /*
5     * 若是代码执行到这里
6     * 说明经过了全部的安全检测
7     */
8     allowed();
9 }

注释声明

注释有时候也能够用来给一段代码声明额外的信息。这些声明的格式以单个单词打头并紧跟一个冒号。可使用的声明以下。

TODO：说明代码还未完成。应当包含下一步要作的事情。

HACK：代表代码实现走了一个捷径。应当包含为什么使用hack的缘由。这也可能代表该问题可能会有更好的解决办法。

XXX：说明代码是有问题的并应当尽快修复。

FIXME：说明代码是有问题的并应尽快修复。重要性略次于XXX。

REVIEW：说明代码在任何可能的改动都须要评审。

这些声明可能在一行或者多行注释中使用，而且应当遵循同通常注释类型相同的格式规则。

8.命名

变量和函数在命名时应当当心。命名应紧限于数字字母字符，某些状况下可使用下划线(_)。最好不要在任何命名中使用美圆符号($)或者反斜杠(\)。

变量命名应当采用驼峰命名格式，首字母小写，每一个单词首字母大写。变量名的第一个单词应当是一个名词(而非动词)以免同函数混淆。不要在变量名中使用下划线。

 1 // 好的写法
 2 var accountNumber = "test001";
 3  
 4 // 很差的写法：大写字母开头
 5 var AccountNumber = "test001";
 6 
 7 // 很差的写法：动词开头
 8 var getAccountNumber = "test001";
 9 
10 // 很差的写法：使用下划线
11 var account_number = "test001";

函数名也应当采用驼峰命名格式。函数名的第一个单词应当是动词（而非名词）来避免同变量混淆。函数名中最好不要使用下划线。

 1 // 好的写法
 2 function doSomething() {
 3     // code
 4 }
 5 
 6 // 很差的写法：大写字母开头
 7 function DoSomething() {
 8     // code
 9 }
10 
11 // 很差的写法：名词开头
12 function something() {
13     // code
14 }
15 
16 // 很差的写法：使用下划线
17 function do_something() {
18     // code
19 }

构造函数--经过new运算符建立新对象的函数--也应当以驼峰格式命名而且首字符大写。构造函数名称应当以非动词开头，由于new表明着建立一个对象实例的操做。

 1 // 好的写法
 2 function MyObject() {
 3     // code
 4 }
 5 
 6 // 很差的写法：小写字母开头
 7 function myObject() {
 8     // code
 9 }
10 
11 // 很差的写法：使用下划线
12 function my_object() {
13     // code
14 }
15 
16 // 很差的写法：动词开头
17 function getMyObject() {
18     // code
19 }

常量（值不会被改变的变量）的命名应当是全部大写字母，不一样单词之间单个下划线隔开。

1 // 好的写法
2 var TOTAL_COUNT = 10;
3 
4 // 很差的写法：驼峰形式
5 var totalCount = 10;
6 
7 // 很差的写法：混合形式
8 var total_COUNT = 10;

对象的属性同变量的命名规则相同。对象的方法同函数的命名规则相同。若是属性或者方法是私有的，应当在以前加上一个下划线。

1 // 好的写法
2 var object = {
3     _count: 10,4 
5     _getCount: function() {
6         return this._count;
7     }
8 }

9.变量与函数声明

变量声明

全部的变量在使用前都应当事先定义。变量定义应当放在函数开头，使用一个var表达式每行一个变量。除了首行，全部行都应当多一层缩进以使变量名可以垂直方向对齐。变量定义时应当初始化，而且赋值操做符应当保持一致的缩进。初始化的变量应当在未初始化变量以前。

1 // 好的写法
2 var count = 10,
3     name = "jeri",
4     found = false,
5     empty;

函数声明

函数应当在使用前提早定义。一个不是做为方法的函数（也就是说没有做为一个对象的属性）应当使用函数定义的格式（不是函数表达式和Function构造器格式）。函数名和开始圆括号之间不该当有空格。结束的圆括号和右边的花括号之间应当留一个空格。右侧的花括号应当同function关键字保持同一行。开始和结束括号之间不该该有空格。参数名之间应当在逗号以后保留一个空格。函数体应当保持一级缩进。

 1 // 好的写法
 2 function outer() {
 3     var count = 10,
 4         name = "jeri",
 5         found = false,
 6         empty;
 7     function inner() {
 8         // code
 9     }
10     // 调用inner()的代码
11 }

匿名函数可能做为方法赋值给对象，或者做为其余函数的参数。function关键字同开始括号之间不该有空格。

1 // 好的写法
2 object.method = function() {
3     // code
4 };
5 
6 // 很差的写法：不正确的空格
7 object.method = function () {
8     // code
9 };

当即被调用的函数应当在函数调用的外层用园括号包裹。

1 // 好的方法
2 var value = (function() {
3 
4     // 函数体
5 
6     return {
7         message:"hi"
8     }
9 }());

严格模式

严格模式应当仅限在函数内部使用，千万不要在全局使用。

 1 // 很差的写法：全局使用严格模式
 2 "use strict";
 3 
 4 function doSomething() {
 5     // code
 6 }
 7  
 8 // 好的写法
 9 function doSomething() {
10     "use strict";
11  
12     // code
13 }

10.运算符

赋值

给变量赋值时，若是右侧是含有比较语句的表达式，须要用圆括号包裹。

1 // 好的写法
2 var flag = (i < count);
3 
4 // 很差的写法：遗漏圆括号
5 var flag = i < count;

等号运算符

使用===（严格相等）和!==（严格不相等）代替==（相等）和!=（不等）来避免弱类型转换错误。

1 // 好的写法
2 var same = (a === b);
3 
4 // 好的写法
5 var same = (a == b);

三元操做符

三元运算符应当仅仅用在条件赋值语句中，而不要做为if语句的替代品。

1 // 好的写法
2 var value = condition ? value1 : value2;
3 
4 // 很差的写法：没有赋值，应当使用if表达式
5 condition ? doSomething() : doSomethingElse;

11.语句

简单语句

每一行最多只包含一条语句。全部简单的语句都应该以分号(;)结束。

1 // 好的写法
2 count++;
3 a = b;
4 
5 // 很差的写法：多个表达式写在一行
6 count++; a = b;

返回语句

返回语句当返回一个值的时候不该当使用圆括号包裹，除非在某些状况下这么作可让返回值更容易理解。例如：

1 return;
2 
3 return collection.size();
4 
5 return (size > 0 ? size : defaultSize);

复合语句

复合语句是大括号括起来的语句列表。

括起来的语句应当较复合语句多缩进一个层级。
开始的大括号应当在复合语句所在行的末尾；结束的大括号应当独占一行且同复合语句的开始保持一样的缩进。
当语句是控制结构的一部分时，诸如if或者for语句，全部语句都须要用大括号括起来，也包括单个语句。这个约定使得咱们更方便地添加语句而不用担忧忘记加括号而引发bug。
像if同样的语句开始的关键词，其后应该紧跟一个空格，起始大括号应当在空格以后。

if 语句

if 语句应当是下面的格式。

 1 if (condition) {
 2     statements
 3 }
 4 
 5 if (condition) {
 6     statements
 7 } else {
 8     statements
 9 }
10 
11 if (condition) {
12     statements
13 } else if (condition) {
14     statements
15 } else {
16     statements
17 }

毫不容许在if语句中省略花括号。

 1 // 好的写法
 2 if (condition) {
 3     doSomething();
 4 }
 5 
 6 // 很差的写法：不恰当的空格
 7 if (condition){
 8     doSomething();
 9 }
10 
11 // 很差的写法：全部代码都在一行
12 if (condition) { doSomething(); }
13 
14 // 很差的写法：全部代码都在一行且没有花括号
15 if (condition) doSomething();

for 语句

for类型的语句应当是下面的格式。

1 for (initialization; condition; update) {
2     statements
3 }
4 
5 for (variable in object) {
6     statements
7 }

for语句的初始化部分不该当有变量声明。

 1 // 好的方法
 2 var i,
 3     len;
 4 
 5 for (i=0, len=0; i < len; i++) {
 6     // code
 7 }
 8 
 9 // 很差的写法：初始化时候声明变量
10 for (var i=0, len=0; i < len; i++) {
11     // code
12 }
13 
14 // 很差的写法：初始化时候声明变量
15 for (var prop in object) {
16     // code
17 }

当使用for-in语句时，记得使用hasOwnProperty()进行双重检查来过滤对象的成员。

while 语句

while 类的语句应当是下面的格式。

1 while (condition) {
2     statements
3 }

do 语句

do 类的语句应当是下面的格式。

1 do {
2     statements
3 } while (condition);

switch 语句

switch 类的语句应当是以下格式。

1 switch (expression) {
2     case expression:
3         statements
4 
5     default:
6         statements
7 }

switch下的第一个case都应当保持一个缩进。除第一个以外包括default在内的每个case都应当在以前保持一个空行。

每一组语句（除了default）都应当以break、return、throw结尾，或者用一行注释表示跳过。

 1 // 好的写法
 2 switch (value) {
 3     case 1:
 4         /* falls through */
 5 
 6     case 2:
 7         doSomething();
 8         break;
 9 
10     case 3:
11         return true;
12 
13     default:
14         throw new Error("Some error");
15 }

若是一个switch语句不包含default状况，应当用一行注释代替。

 1 // 好的写法
 2 switch (value) {
 3     case 1:
 4         /* falls through */
 5 
 6     case 2:
 7         doSomething();
 8         break;
 9 
10     case 3:
11         return true;
12 
13     default:
14         // 没有default
15 }

try 语句

try类的语句应当格式以下。

 1 try {
 2     statements
 3 } catch (variable) {
 4     statements
 5 }
 6 
 7 try {
 8     statements
 9 } catch (variable) {
10     statements
11 } finally {
12     statements
13 }

12.留白

在逻辑相关的代码之间添加空行代码能够提升代码的可读性。

两行空行仅限于在以下状况下使用：

在不一样的源代码文件之间。
在类和接口定义之间。

单行空行仅限在以下状况中使用。

方法之间。
方法中局部变量和第一行语句之间。
多行或者单行注释以前。
方法中逻辑代码块之间以提高代码的可读性。

空格应当在以下的状况下使用。

关键词后跟括号的状况应当用空格隔开。
参数列表中逗号以后应当保留一个空格。
全部的除了点(.)以外的二元运算符，其操做数都应当用空格隔开。单目运算符的操做数之间不该该用空白隔开，例如一元减号，递增(++)，递减(--)。
for 语句的表达式之间应当用空格隔开。

13.须要避免的

切勿使用像String一类的原始包装类型建立新的对象。
避免使用eval()。
避免使用with语句。该语句在严格模式中不复存在，可能在将来的ECMAScript标准中也将去除。

写在最后

　　上述指南并非在开发过程当中必须彻底遵照的，咱们能够只汲取其中的一部分来改善本身的编码风格，让本身的代码易读、可维护。关于编码风格，每一个团队都有本身的特点，只要保持团队一致性，能够高效的开发就OK了。有些规则也并非咱们必须一成不变地遵照的，好比在缩进方面，咱们使用Tab键不少时候更加地便捷，可是咱们不能保证在任何环境下Tab都表明4个空格，为了在缩进方面保持一致性，若是使用Tab键那么在整个过程当中都要使用；还有关于""和‘’的使用，咱们也没必要都使用""，使用''也是能够的，只要保持一致的风格就能够了。还有不少其余相似的风格问题，全凭我的选择。

　　没有绝对的准则，只有适不适合。