团队开发需要遵守一定的开发规范,有效降低bug率,提高维护效率,方便代码review,本章基于Airbnb公司发布的规范,做出了常用的规范总结
Airbnb JavaScript规范
使用空格+2代替tab(主流编辑器设置tab = 2个空格)
不能省略分号
es6相关:
杜绝var
优先使用箭头函数
使用模板字符串取代连接字符串
- 常量的命名规范
常量命名应该使用全大写格式,并用下划线分割,如果常量是函数,那么采用驼峰式命名法
const NUMBER = 5;
const Sum = () => {};
- 每次只声明一个变量,const放一起,let放一起,不要使用链接变量分配
// bad
const a = 1, b = 2;
// good
const a = 1;
const b = 2;
let i;
let length;
- 静态字符串一律使用单引号或反引号,不使用双引号。动态字符串使用反引号。
const a = 'foobar';
const b = foo${a}bar
;
类型
-
基本类型(string,number,boolean,null,undefined,symbol):直接存取
复杂类型(object,array,function): 通过引用的方式存取
引用
- 使用const let申明引用类型,避免使用var
对象
-
字面值创建对象,一个地方定义对象所有的属性,对象方法的简写形式(略)
属性值简写形式,并且将你的所有缩写放在对象声明的开始
只有对那些不合法的属性名标识符添加引号
使用... 而不是Object.assign
数组
-
字面量声明数组
使用数组展开操作符...拷贝数组 const itemsCopy = [...items];
向数组添加元素时,使用push itemsCopy.push('abracadabra')
将类数组对象(array-like)转换成数组时,使用...而不是Array.from
当需要对可遍历对象进行map操作时,使用Array.from而不是展开操作符...,避免新建一个临时数组。
数组方法回调需要有返回值
如果数组有多行,请在打开和关闭数组括号之前使用换行符
解构
-
访问和使用对象的多个属性时用对象解构操作
使用数组解构
使用对象解构来实现多个返回值,而不是数组解构
字符串
-
以编程方式构建字符串时,使用模板字符串而不是连接符 同6
不超过100个字符的字符串不应该使用连接符或者换行书写
不要过多的转义字符串
函数
-
使用命名函数表达式而不是函数声明
把立即执行函数包裹在圆括号里
不要在非函数块(if、while等等)内声明函数。
不要用arguments命名参数,不要使用arguments,用rest语法...代替
用默认参数语法而不是在函数里对参数重新赋值。把默认参数赋值放在最后
函数签名部分要有空格,不要对参数重新赋值
函数的缩进:每行值包含一个参数,每行逗号结尾
箭头函数
-
如果函数体由一个没有副作用的表达式语句组成,删除大括号和return
万一表达式涉及多行,把他包裹在圆括号里更可读。
类 & 构造函数
-
常用class,避免直接操作prototype
用extends实现继承
模块
-
不要用import通配符,就是 * 这种方式
不要直接从import中直接export
一个路径只 import 一次
在一个单一导出模块里,用 export default 更好
import 放在其他所有语句之前
多行import应该缩进,就像多行数组和对象字面量
迭代器和生成器
- 不要用遍历器for。用JavaScript高级函数代替for-in、for-of
用数组的这些迭代方法: map() / every() / filter() / find() / findIndex() / reduce() / some()/ ...
用对象的这些方法: Object.keys() / Object.values() / Object.entries() 去产生一个数组,这样你就能去遍历对象了
其他
-
做幂运算时用幂操作符
在你需要的地方声明变量,但是要放在合理的位置
不要使用一元自增自减运算符使用num + =
1而不是num ++或num ++
-
多行注释用/** ... */
单行注释用//,将单行注释放在被注释区域上面。如果注释不是在第一行,那么注释前面就空一行
所有注释开头空一个,方便阅读
-
tab用两个空格
在大括号前空一格
在控制语句(if, while 等)的圆括号前空一格。在函数调用和定义时,参数列表和函数名之间不空格
用空格来隔开运算符
文件结尾空一行
在一个代码块后下一条语句前空一行
不要用空白行填充块
花括号里加空格
, 前不要空格, , 后需要空格
调用函数时,函数名和小括号之间不要空格 func();
在对象的字面量属性中, key value 之间要有空格
行末不要空格,避免出现多个空行。 在文件末尾只允许空一行
额外结尾逗号
避免一行代码超过100个字符(包含空格) 注意:长字符串不受此规则限制
开发建议
- 新项目建议遵守eslint规范,解决eslint报错的过程就是纠正代码规范的过程. eslint常见规范:
(1) 空格报错
大括号'{}'内部前后需要空格 A space is required after '{' A space isrequired before '}' (在'{'前也要空一格)
,后需要空格 A space is required after ','
赋值:后需要空格Missing spacebefore value for key 'key'
中缀运算符必须间隔Infix operatorsmust be spaced
(2) 其他常见报错
使用点表示法代替[] data[]is better written in dot notation 改为data.base
已声明某变量,但从未读取其值
缩进报错,双引号报错,let未重新分配使用const
- 代码规范
- 好的处理表格配置处理
- 归总相同代码,统一处理逻辑
规范参考
Airbnb JavaScript 编码规范:https://github.com/lin-123/javascript (推荐食用)
Google JavaScript 编码规范:https://google.github.io/styleguide/jsguide.html
Idiomatic JavaScript 编码规范:https://github.com/rwaldron/idiomatic.js
HTML/CSS/JS编码规范:https://www.cnblogs.com/lvhw/p/7451351.html