想成为web开发大神？那你应该从拥有良好的代码规范走起！（JavaScript篇

规范在我们的日常生活中非常的可见，良好的规范可以给人一种清爽愉悦的感觉，在程序员的世界看代码如见其人，一个有着良好的规范的代码可以给人良好的第一印象。本着互联网的精神，我将我应用的代码规范分享给大家。

为什么要使用代码规范？哼！我认为我自己的写法很爽，为啥要用领导规定的破规范？

当一个公司刚刚组建团队时，每个人都有各自的一套编程习惯，毕竟每个人想法大不相同，也有些人是在某个公司工作时习惯了前公司的编码规范，并认为那才是最好的规范（PHP同学：“我才是世界上最好的语言”）。在这种情况下A员工如果需要维护B员工的代码就会相当困难，并且要对代码进行梳理才会找出问题的所在，这样的方式会消耗一名程序员的大量时间，时间对于企业来说就是money。显然企业是不希望看见这种情况的，而有良好的规范后虽然一开始是比较痛苦的，但是随着时间的推移和团队间的磨合等到大家都适应了这套规范后，这套规范就会促成团队成员之间高水准的写作。

缩进层级

对于缩进来讲目前有两种形式，一种是制表符（tab）进行缩进，通常一个制表符（tab）相当于4个空格。第二种形式是使用空格进行缩进。

制表符： 使用制表符的好处是文本编辑器可以配置制表符的展示长度，因此可以修改配置文件达到修改制表符长度的目的。但缺点也很明显，如果在另外一个系统或另外一款编辑器打开代码时，就会发现出现代码展示不一致的情况。因为每个系统和软件对制表符（tab）的解释不同。例如：win10系统中webstrom中一个制表符（tab）默认是4个空格，但是记事本中一个制表符（tab）默认是8个空格。

空格： 使用空格实现层级缩进的好处就是在任何系统，任何编辑器打开代码都会展示一致性的代码。一般情况下使用四个空格为一个缩进。我个人也使用4个空格作为一个缩进，但也有少部分人习惯使用2个或8个空格为一个缩进。

特殊方法: webstorm 可以将制表符（tab）转换为空格，这样就能保证在任何环境下都会得到展示一致性的代码。 File -> Setting -> Editor -> Code Style -> Javascript 在右侧窗口中有一个 Use tab character 的选项。取消这个选项就会将缩进层级的制表符(tab)转换成空格，勾选这个选项就是将缩进层级的空格转换为制表符（tab）。

变量、常量、函数、类的命名

变量和函数的声明目前主流使用的有两种，一种是帕斯卡命名法（Pascal） ，另外一种是 驼峰命名法（Camel）。

帕斯卡命名法： 帕斯卡命名法又被称为大驼峰命名，名称的每一个单词首字母都大写。例如：SetColor、ClassName等。

驼峰命名法： 驼峰命名法又被称为小驼峰命名，名称的第一个单词小写，其后面的单词首字母大写。例如：setColor、className等。

常量： 对于变量的声明一般选用全大写字母多个单词时使用 "_" 进行拼接。例如：MAX_COUNT、CURRENT。

总结： 在我日常的开发中使用驼峰命名法声明变量名和函数名，使用帕斯卡命名法命名构造函数名（类名）。

语句结尾

JavaScript与其他代码有所不同，例如Java语句结尾没有";"在编译时就会报错，更别提运行了。而JavaScript中省略";" 也是可以运行的。这要归功于JavaScript的（Automatic Semicolon Insetion,ASI）机制。ASI会自动寻找代码中需要插入分好但实际中没有分好的位置。大多数情况下ASI都会正确的插入分好，不会产生错误，但是我本人十分建议插入分好。例如你写的代码是这个样子的。

function getUserInfo() {
    return
    {
        name:'铅笔画不出的黑白',
        age:"121213"
    }
}

复制代码

但是ASI理解的就是这样的

function getUserInfo() {
    return;
    {
        name:'铅笔画不出的黑白',
        age:"121213"
    };
}
复制代码

行的长度

Java编码规范单行不超过80个字符，Android开发者编码风格规定单行不超过100个字符，Puby编程规范中规定单行不超过80，Python编码规范不超过79个字符。JavaScript风格指南中很少提及长度，但是我个人推荐不超过100个字符，因为在现在开发中主流使用23寸以上显示器（我公司27寸）特别公司用到了32寸显示器。承载100个字符完全不成问题，即使有出差使用笔记本电脑也完全可以应对。

当单行代码量超过约定字符时就应该考虑换行。极力推荐在运算符后进行换行，这样做可以让代码看着清晰明了，也可以防止ASI 自作主张的在行尾插入分好。在下一行中增加两个层级缩进（我每个缩进是四个空格，所以在下一行增加8个空格）'

代码的注释

一般分为三种注释情况：单行注释、行尾注释、多行注释。注释的说明应该尽量的简洁明表达下列代码段的作用。

单行注释： 在注释字符（//）的后方应添加至少一个空格偏移，注释独占一行的话则应在注释前添加一个空行。如果注释的代码存在缩进注释也应该有缩进。

  // 总库存
  let stock = 330;

  // 如果有存货就发货
  if(stock < 0){
    // 发货
    stock -= 1;
  }

复制代码

多行注释： 多行注释一般多用于需要描述或注释注释的代码片段。注释前应该添加空行，并且于单行注释一样注释的层级缩进应与代码保持一致。


  /*
  let stock = 300;
  if (stock < 0) {
    stock -= 1;
    console.log('刚卖了一个还剩余库存' + stock)
  }
  */
  
  /*
  当发生交易时
  会输出剩余库存
  */
  let stock = 300;
  if (stock < 0) {
    stock -= 1;
    console.log('刚卖了一个还剩余库存' + stock)
  }
  ps: 以上两种注释方法虽然在语法上很合法，并且使用中更为方便，但是本人更推荐使用Java类型的注释，这样的注释更为思路晰。
  
  /* 领导说这个功能不要了，先注释万一一会又要呢。
   * let stock = 300;
   * if (stock < 0) {
   * stock -= 1;
   * console.log('刚卖了一个还剩余库存' + stock)
   * }
  */

  /*
   * 当发生交易时
   * 会输出剩余库存
  */
  let stock = 300;
  if (stock < 0) {
    stock -= 1;
    console.log('刚卖了一个还剩余库存' + stock)
  }
复制代码

行尾注释： 行尾注释应与代码之间有一个空格，并尽可能用简短的语言说明注释，如果存在多个行尾注释时应在注释前添加空格使注释对齐。

  let stock = 300; // 库存
  let sale = 1;    // 每次限购一个
  let price = 50;  // 每个商品的价格
  if (stock < 0) { // 当有库存的时候才会发货
    stock -= 1;
    console.log('刚卖了一个还剩余库存' + stock)
  }
复制代码

文档注释 文档注释一般用于类、函数、方法、用于描述函数的功能，传入参数的类型，以及返回值的说明。
特殊方法: webstrom中快捷方法/**回车

/**
 * 求两个数中较大的值。(函数的功能说明描述)
 * @param {number} x  第一个数字 （参数的说明）
 * @param {number} y  第二个数字 （参数的说明）
 * @returns {number}  返回较大的值 （返回值的说明）
 */

function max(x, y) {
    if (x > y) {
        return x
    }
    return y;
}



复制代码

总结： 在本篇文章中，我为大家介绍了主流的命名方式和注释方法，并且我将我经常使用的规范介绍给了大家，希望大家能都根据自己的实际情况，制定一套良好的规范。在下一篇文章中我将会详细的介绍unll和undefined的区别以及使用场景。还有全局变量会造成的影响。

后语: 欢迎大家留言讨论，也欢迎加本人微信（48988840）探讨技术。请记住我的笔名：铅笔画不出的黑白。谢谢！