想成为web开发大神?那你应该从拥有良好的代码规范走起!(JavaScript篇 - 第一篇)...
发布日期:2021-08-14 18:04:29 浏览次数:5 分类:技术文章

本文共 3650 字,大约阅读时间需要 12 分钟。

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

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

  当一个公司刚刚组建团队时,每个人都有各自的一套编程习惯,毕竟每个人想法大不相同,也有些人是在某个公司工作时习惯了前公司的编码规范,并认为那才是最好的规范(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)探讨技术。请记住我的笔名:铅笔画不出的黑白。谢谢!

转载于:https://juejin.im/post/5af506aaf265da0b78688e41

转载地址:https://blog.csdn.net/weixin_30731305/article/details/100091554 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:node 删除和复制文件或文件夹
下一篇:Java面向对象之接口interface 入门实例

发表评论

最新留言

网站不错 人气很旺了 加油
[***.192.178.218]2024年12月07日 13时18分06秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章