前端基础：JavaScript 代码风格指南

一.基本格式

缩进

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

分号

不要省略分号，防止ASI（自动插入分号）错误

行宽

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

断行

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

空行

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

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

命名

变量名/函数名：Camel（驼峰）规则，首词首字母小写，后续词首字母大写，其余部分小写
常量名：C语言式，全大写，下划线分词
构造函数：Pascal规则，所有词首字母大写，其余部分小写

字面量

字符串：双引号包裹，断行用[+]操作符，不要用\转义字符
数值：不要省略小数点前后的部分，不要用八进制形式
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级缩进隔开代码，而且//后面要有一个空格
独占一行：用来注释下面，要与被注释的代码保持相同的缩进
行首：用来注释多行代码

多行注释

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

/*
* comment line1
* comment line2
*/

注意：

多行注释上方留一个空行
*星号后面留一个空格
多行注释至少三行（因为第一行和最后一行后面不加注释）

在哪里添注释

不能自解释的代码
故意的，但看起来像是有错的地方
针对浏览器的hack

文档注释

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

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

三.语句和表达式

花括号对齐方式

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

块语句空格

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

if (expr) {
code
}

switch语句

缩进：case与switch对齐，break缩进1级
case贯穿：用空行或注释//falls through表明case贯穿是故意的
default：保留default或者用注释//no default表明没有default

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

with语句

不用

for循环

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

for-in循环

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

四.变量、函数、操作符

变量声明

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

函数声明

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

函数调用

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

匿名函数立即执行

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

严格模式

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

判断等于

只用===和!==

eval

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

基本包装类型

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

前端基础：JavaScript 代码风格指南相关推荐

vue前端代码风格指南
vue前端代码风格指南参考网址: https://mp.weixin.qq.com/s/ejqSWUNBlADbOXbNcy6TNg 文章目录 vue前端代码风格指南一.命名规范 1.1 项目文件 ...
Airbnb JavaScript 编码风格指南（2018年最新版）
Airbnb JavaScript 编码风格指南(2018年最新版) 访问此原文地址:http://galaxyteam.pub/didi-fe... 另外欢迎访问我们维护的https://www.t ...
Medium 内部使用 css/less 的代码风格指南
本文讲的是Medium 内部使用 css/less 的代码风格指南, Medium 对代码风格使用了 LESS 的一种严格子集.这个子集包含变量和混合指令,但是没有别的(嵌套等等). Medium 的 ...
Python 代码风格指南谷歌版
非常感谢我们的忠实读者 shendeguize,在后台留言告诉我,已经翻译了<谷歌Python代码风格指南> ,大家这样相互帮助,感觉真是太好. Update: 2020.01.31 Tr ...
数据简化社区Google和Linux代码风格指南(附PDF公号发“代码风格”下载)
数据简化社区Google和Linux代码风格指南(附PDF公号发"代码风格"下载) 秦陇纪2019代码类数据简化DataSimp 昨天数据简化DataSimp导读:数据简化社区 ...
python代码风格指南_记录Python代码：完整指南
python代码风格指南 Welcome to your complete guide to documenting Python code. Whether you're documenting a ...
汇编程序员之代码风格指南
Style Guidelines for Assembly Language Programmers 汇编程序员之代码风格指南作者:Randall Hyde http://webster.cs. ...
Google 内部的 Python 代码风格指南（译）
微信搜索逆锋起笔关注后回复编程pdf 领取编程大佬们所推荐的 23 种编程资料! 来自:Why GitHub? 链接:https://github.com/shendeguize/GooglePyth ...
Google内部 Python 代码风格指南(中文版)
文末有干货 "Python高校",马上关注真爱,请置顶或星标这是一位大佬翻译的Google Python代码风格指南,很全面.可以作为公司的code review 标准,也可以 ...

前端基础：JavaScript 代码风格指南

前端基础：JavaScript 代码风格指南相关推荐

最新文章

热门文章