想成为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）探讨技术。请记住个人笔名：铅笔画不出的黑白。谢谢！