JS代码风格指南

一.基本格式

  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语言精粹》
时间: 2024-08-21 19:37:24

JS代码风格指南的相关文章

Google HTML/CSS/JS代码风格指南

JS版本参见:http://www.zhangxinxu.com/wordpress/2012/07/google-html-css-javascript-style-guides/ HTML/CSS修正版本 2.1 背景 本文档定义了HTML/CSS的编写格式和风格规则.它旨在提高合作和代码质量,并使其支持基础架构.适用于HTML/CSS文件,包括GSS文件. 只要代码质量是可以被维护的,就能很好的被工具混淆.压缩和合并. 样式规则 协议 嵌入式资源书写省略协议头 省略图像.媒体文件.样式表和

代码风格指南

js代码风格指南:1.缩进使用空格,不要用制表符2.必须用分号3.暂时不用ES6(modules)例如export和import命令4.不鼓励(不禁止)水平对齐5.少用var 都应该使用const或者let来引出声明6.剪头函数是首选7.使用模板字符串,而不要将普通字符串叠加在处理复杂的字符串叠加,尤其是多行字符串的叠加时,模板字符串(使用反引号`来界定)是更优的选择,可以实现跨多行的效果8.长字符串不要使用反斜杠来分割每行9.for....of是写for循环的首选方式10.别用eval()11

世界顶级互联网公司 Google JavaScript 代码风格指南

Google 和 Airbnb 是目前最流行的 JavaScript 代码风格,如果你长期使用 JavaScript 来写代码的话,建议对比看看. 以下是我认为在 Google 代码风格指南中最有意思的十三条规则,和大家分享一下: 使用空格,而不是 tab 除了行终止符外,在系统文件中,空格是唯一表示空白的字符,这意味着 tab 不能作为缩进使用. 这份指南规定用2个空格(而不是4个)来表示缩进. // bad function foo() { ????let name; } // bad fu

PSR代码风格指南

代码风格指南 本手册是基础代码规范(PSR-1)的继承和扩展. 为了尽可能的提升阅读其他人代码时的效率,下面例举了一系列的通用规则,特别是有关于PHP代码风格的. 各个成员项目间的共性组成了这组代码规范.当开发者们在多个项目中合作时,本指南将会成为所有这些项目中共用的一组代码规范. 因此,本指南的益处不在于这些规则本身,而在于在所有项目中共用这些规则. RFC 2119中的必须(MUST),不可(MUST NOT),建议(SHOULD),不建议(SHOULD NOT),可以/可能(MAY)等关键

前端CSS和JS代码风格规范

1:不要轻易改动全站级CSS和通用CSS库.改动后,要经过全面测试. 2:css的id,class 名称 语义化,   以 - 相连,   命名少用缩写(除一些所有人一看便知的缩写); 3: Javascript命名规则 3.1:私有变量名用下划线开头; eg: _this = $(this); 3.2:变量名--驼峰命名法; eg: regEmail; 3.3:格式化对象参数;   eg: $.ajax({ type : 'post', url : '/auth/sendCode', data

python代码风格指南:pep8 中文翻译

摘要 本文给出主Python版本标准库的编码约定.CPython的C代码风格参见?PEP7.本文和?PEP 257 文档字符串标准改编自Guido最初的<Python Style Guide>, 并增加了Barry的?GNU Mailman Coding Style Guide的部分内容.本文会随着语言改变等而改变.许多项目都有自己的编码风格指南,冲突时自己的指南为准. 本文给出主Python版本标准库的编码约定.CPython的C代码风格参见PEP7. 本文和PEP 257 文档字符串标准改

PSR-2 代码风格指南

代码必须遵循“编码风格指南” PSR [PSR-1]. 代码必须使用4个空格缩进,而不是tab. 对一行的长度不能是一个硬性的限制:但对每一行必须限制在120字符之内,每一行应该80个字符或者更少. 在namespace声明之后必须有一个空行,在use声明之后也必须有一个空行. 类的打开的大括号必须在下一行,关闭大括号必须类的主体之后的下一行. 方法的打开的大括号必须在方法的下一行,关闭大括号必须在主体之后的下一行. 所有的属性和方法必须声明可见性:abstract和final必须在可见性声明之

python代码风格指南:pep8 中文版

本文档所提供的编码规范,适用于主要的Python发行版中组成标准库的Python代码.请参阅PEP关于Python的C实现的C编码风格指南的描述. 本文档和PEP257(文档字符串规范)改编自Guido的<Python Style Guide>一文,并从<Barry's style guide>添加了部分内容作为补充. 这篇风格指南随着时间的推移而逐渐演变,随着语言本身的变化,一些过去的约定已经过时,并确定了更多新的约定. 许多项目都有自己的编码风格指南.如果有任何冲突,优先使用该

JS代码风格自动规整工具Prettier

问题背景 通常使用 ESLint做代码风格检查检查, 和部分代码质量检查. 但是使用ESLint在入库时候, 会产生很多的代码修正工作, 需要开发者一个一个的修改. 如果很多,并且时间紧迫,甚是尴尬. ESLint http://eslint.cn/ ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目.它的目标是提供一个插件化的javascript代码检测工具. 代码检查是一种静态的分析,常用于寻找有问题的模式或者代码,并且不依赖于具体的编码风格.对大多数编程