2023-05-12 开启多语言插件支持……

JS代码风格指南

javascript 苏 demo 2309℃ 0评论

一.基本格式

  1. 缩进

    建议每级4个空格,可以给编辑器设置tab = 4个空格,自动转换

  2. 分号

    不要省略分号,防止ASI(自动插入分号)错误

  3. 行宽

    每行代码不超过80个字符,过长应该用操作符手动断行

  4. 断行

    操作符在上一行末尾,且下一行缩进2级,如果是赋值语句,还应该和等号后面部分对齐

  5. 空行

    函数声明与函数声明、变量声明与函数声明、函数内部的逻辑块之间都应该有空行隔开

    作者尼古拉斯还建议在流程控制块顶部留一个空行,但给的例子不是很明确

  6. 命名

    • 变量名/函数名:Camel(驼峰)规则,首词首字母小写,后续词首字母大写,其余部分小写

    • 常量名:C语言式,全大写,下划线分词

    • 构造函数:Pascal规则,所有词首字母大写,其余部分小写

  7. 字面量

    • 字符串:双引号包裹,断行用[+]操作符, 不要 用\转义字符

    • 数值: 不要 省略小数点前后的部分, 不要 用八进制形式

    • Null:只把null当作Object的占位符, 不要 用来检测形参,也 不要 用来检测未初始化的变量

    • Undefined:应该把所有对象都初始化为null,以区分未定义和未初始化

    • 对象字面量/数组字面量: 不要 用构造函数方式声明对象和数组

二.注释

P.S.书中有一句非常经典的解释:

Appropriately written comments help tell the story of code, allowing other developers to drop into a part of the story without needing to hear the beginning.

  1. 单行注释

    • 行尾:用1级缩进隔开代码,而且//后面要有一个空格

    • 独占一行:用来注释下面,要与被注释的代码保持相同的缩进

    • 行首:用来注释多行代码

  2. 多行注释

    用来包裹大段注释,推荐Eclipse风格,例如

    code
    
    /* 
     * comment line1
     * comment line2
     */

    注意:

    • 多行注释上方留一个空行

    • *星号后面留一个空格

    • 多行注释至少三行(因为第一行和最后一行后面不加注释)

  3. 在哪里添注释

    • 不能自解释的代码

    • 故意的,但看起来像是有错的地方

    • 针对浏览器的hack

  4. 文档注释

    应该给各个函数添注释,包括功能描述、参数、返回值、抛出的错误等等,例如推荐的Eclipse风格:

    /**
     * 添加指定元素到默认数组
     * 
     * @method add
     * @param {Number} 将要添加的元素
     * @return {Boolean} 添加成功/失败
     * @throw {TypeError} 参数类型不匹配
     */
    function add(item){
        if(typeof item === "number"){
            arr.push(item)
        }
        else{
            throw new TypeError();
        }
    }

三.语句和表达式

  1. 花括号对齐方式

    建议行尾风格,不推荐次行风格

  2. 块语句空格

    if后的圆括号部分前后各有一个空格,例如:

    if (expr) {
        code
    }
  3. switch语句

    • 缩进:case与switch对齐,break缩进1级

    • case贯穿:用空行或注释//falls through表明case贯穿是故意的

    • default:保留default或者用注释//no default表明没有default

    P.S.《JavaScript语言精粹》的作者道格拉斯认为不应该用case贯穿(称之为鸡肋),因为极易引发bug,而尼古拉斯认为用空行或者注释说明就好了

  4. with语句

    不用

  5. for循环

    所有变量都应该在函数体顶部声明,包括for循环初始化部分用到的变量,避免hosting(提升)引发bug(可能会屏蔽全局变量)

  6. for-in循环

    不要 用来遍历数组,用的时候记得加上hasOwnProperty过滤,如果故意遍历原型属性,应该用注释说明

四.变量、函数、操作符

  1. 变量声明

    函数体 = 变量声明 + 函数声明 + 逻辑语句。用空行隔开各个部分

  2. 函数声明

    先声明再使用, 千万不要 把函数声明放在if分支里,因为浏览器理解不同,而且ES没给标准

  3. 函数调用

    圆括号前后都 不加 空格,避免和块语句混淆

  4. 匿名函数立即执行

    把立即执行的匿名函数用圆括号包裹,避免与匿名函数声明混淆

  5. 严格模式

    不要 在全局作用域开严格模式,只在函数内部开,给多个函数开可以用匿名函数立即执行限定严格模式的作用域

  6. 判断等于

    只用===和!==

  7. eval

    不用 eval()和new Function(),用匿名函数优化setTimeout()和setInterval()

  8. 基本包装类型

    不要 用new Boolean(), new String(), new Number()

参考资料

  • 《Maintainable JavaScript》

  • 《JavaScript语言精粹》

打赏

转载请注明:苏demo的别样人生 » JS代码风格指南

   如果本篇文章对您有帮助,欢迎向博主进行赞助,赞助时请写上您的用户名。
支付宝直接捐助帐号oracle_lee@qq.com 感谢支持!
喜欢 (0)or分享 (0)