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


    前言:

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

    1.缩进

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

    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操作符。

    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.括号间距

    当使用括号时,紧接左括号之后和紧接右括号之前不应该有空格。

    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.对象直接量

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

    • 起始左花括号应当同表达式保持同一行。
    • 每个属性的名值对应当保持一个缩进,第一个属性应当在左花括号后另起一行。
    • 每个属性的名值对应当使用不含引号的属性名,其后紧跟一个冒号(之前不舍空格),其后是值。
    • 倘若属性值是函数类型,函数体应当在属性名之下另起一行,而且其前后均应保留一个空行。
    • 一组相关的属性前后可以插入空行以提升代码的可读性。
    • 结束的右花括号应当独占一行。
     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. 接下来的行以*开头并保持左对齐。这些可以有文字描述。
    3. 最后一行以*/开头并同先前行保持对齐。也不应有其他文字。

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

    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键那么在整个过程中都要使用;还有关于""和‘’的使用,我们也不必都使用"",使用''也是可以的,只要保持一致的风格就可以了。还有很多其他类似的风格问题,全凭个人选择。

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

  • 相关阅读:
    unitty导出工程嵌入iOS原生工程中出现黑屏,但是模型还是可以扫。
    unity导出工程导入到iOS原生工程中详细步骤
    多目标损失中权重学习
    变分推断
    RNN笔记
    Logistic Regression
    决策树
    无约束问题的最小化
    线性回归
    高斯分布相乘、积分整理
  • 原文地址:https://www.cnblogs.com/syfwhu/p/4814435.html
Copyright © 2020-2023  润新知