# JavaScript规范
# 最佳原则
坚持制定好的代码规范。
无论团队人数多少,代码应该同出一门。
如果你想要为这个规范做贡献或觉得有不合理的地方,请联系架构设计组相关成员。
# 基本规范
# 1、缩进
使用soft tab(2个空格)。
var x = 1,
y = 1
if (x < y) {
x += 10
} else {
x += 1
}
# 2、分号
统一不加分号
/* var declaration */
var x = 1
/* expression statement */
x++
/* do-while */
do {
x++
} while (x < 10)
# 3、空格
以下几种情况需要空格:
- 二元运算符前后
- 三元运算符'?:'前后
- 代码块'{'前
- 下列关键字前:else, while, catch, finally
- 下列关键字后:if, else, for, while, do, switch, case, try, catch, finally, with, return, typeof
- 单行注释'//'后(若单行注释和代码同行,则'//'前也需要),多行注释'*'后
- 对象的属性值前
- for循环,分号后留有一个空格,前置条件如果有多个,逗号后留一个空格
- 无论是函数声明还是函数表达式,'{'前一定要有空格
- 函数的参数之间
// not good
var a = {
b :1
}
// good
var a = {
b: 1
}
// not good
++ x
y ++
z = x?1:2
// good
++x
y++
z = x ? 1 : 2
// not good
var a = [ 1, 2 ]
// good
var a = [1, 2]
// not good
var a = ( 1+2 )*3
// good
var a = (1 + 2) * 3
// no space before '(', one space before '{', one space between function parameters
var doSomething = function(a, b, c) {
// do something
}
// no space before '('
doSomething(item)
// not good
for(i=0i<6i++){
x++
}
// good
for (i = 0 i < 6 i++) {
x++
}
# 4、单行注释
双斜线后,必须跟一个空格;缩进与下一行代码保持一致;可位于一个代码行的末尾,与代码间隔一个空格。
if (condition) {
// if you made it here, then all security checks passed
allowed()
}
var zhangsan = 'zhangsan' // one space after code
# 5、多行注释
最少三行, '*'后跟一个空格,具体参照右边的写法;
/*
* one space after '*'
*/
var x = 1
# 6、文档注释
建议在以下情况下使用:
- 所有常量
- 所有函数
- 所有类
/**
* @func
* @desc 一个带参数的函数
* @param {string} a - 参数a
* @param {number} b=1 - 参数b默认值为1
* @param {string} c=1 - 参数c有两种支持的取值</br>1—表示x</br>2—表示xx
* @param {object} d - 参数d为一个对象
* @param {string} d.e - 参数d的e属性
* @param {string} d.f - 参数d的f属性
* @param {object[]} g - 参数g为一个对象数组
* @param {string} g.h - 参数g数组中一项的h属性
* @param {string} g.i - 参数g数组中一项的i属性
* @param {string} [j] - 参数j是一个可选参数
*/
function foo(a, b, c, d, g, j) {
...
}
# 7、引号
最外层统一使用单引号。
// not good
var x = "test"
// good
var y = 'foo'
var z = '<div id="test"></div>'
# 8、变量声明
一个函数作用域中所有的变量声明尽量提到函数首部,用一个var声明,不允许出现两个连续的var声明。
function doSomethingWithItems(items) {
// use one var
var value = 10,
result = value + 10,
i,
len
for (i = 0, len = items.length i < len i++) {
result += 10
}
}
# 9、函数
无论是函数声明还是函数表达式,'('前不要空格,但'{'前一定要有空格;
函数调用括号前不需要空格;
立即执行函数外必须包一层括号;
不要给inline function命名;
参数之间用', '分隔,注意逗号后有一个空格。
// no space before '(', but one space before'{'
var doSomething = function(item) {
// do something
}
function doSomething(item) {
// do something
}
// not good
doSomething (item)
// good
doSomething(item)
// requires parentheses around immediately invoked function expressions
(function() {
return 1
})()
// not good
[1, 2].forEach(function x() {
...
})
// good
[1, 2].forEach(function() {
...
})
// not good
var a = [1, 2, function a() {
...
}]
// good
var a = [1, 2, function() {
...
}]
// use ', ' between function parameters
var doSomething = function(a, b, c) {
// do something
}
# 10、数组、对象
使用字面值创建对象
对象属性名不需要加引号;
对象以缩进的形式书写,不要写在一行;
数组、对象最后不要有逗号。
// bad
var item = new Object()
// good
var item = {}
// not good
var a = {
'b': 1
}
var a = {b: 1}
var a = {
b: 1,
c: 2,
}
// good
var a = {
b: 1,
c: 2
}
# 12、括号
下列关键字后必须有大括号(即使代码块的内容只有一行):if, else, for, while, do, switch, try, catch, finally, with。
// not good
if (condition)
doSomething()
// good
if (condition) {
doSomething()
}
# 13、null
适用场景:
- 初始化一个将来可能被赋值为对象的变量
- 与已经初始化的变量做比较
- 作为一个参数为对象的函数的调用传参
- 作为一个返回对象的函数的返回值
不适用场景:
- 不要用null来判断函数调用时有无传参
- 不要与未初始化的变量做比较
// not good
function test(a, b) {
if (b === null) {
// not mean b is not supply
...
}
}
var a
if (a === null) {
...
}
// good
var a = null
if (a === null) {
...
}
# 14、undefined
永远不要直接使用undefined进行变量判断;
使用typeof和字符串'undefined'对变量进行判断。
// not good
if (person === undefined) {
...
}
// good
if (typeof person === 'undefined') {
...
}
# 15、jshint
用'===', '!=='代替'==', '!=';
for-in里一定要有hasOwnProperty的判断;
不要在内置对象的原型上添加方法,如Array, Date;
不要在内层作用域的代码里声明了变量,之后却访问到了外层作用域的同名变量;
变量不要先使用后声明;
不要在一句代码中单单使用构造函数,记得将其赋值给某个变量;
不要在同个作用域下声明同名变量;
不要在一些不需要的地方加括号,例:delete(a.b);
不要使用未声明的变量(全局变量需要加到.jshintrc文件的globals属性里面);
不要声明了变量却不使用;
不要在应该做比较的地方做赋值;
debugger不要出现在提交的代码里;
数组中不要存在空元素;
不要在循环内部声明函数;
不要像这样使用构造函数,例:new function () { ... }, new Object;
慎用console.log 因 console.log 大量使用会有性能问题,所以在非 webpack 项目中谨慎使用 log 功能
// not good
if (a == 1) {
a++
}
// good
if (a === 1) {
a++
}
// good
for (key in obj) {
if (obj.hasOwnProperty(key)) {
// be sure that obj[key] belongs to the object and was not inherited
console.log(obj[key])
}
}
// not good
Array.prototype.count = function(value) {
return 4
}
// not good
var x = 1
function test() {
if (true) {
var x = 0
}
x += 1
}
// not good
function test() {
console.log(x)
var x = 1
}
// not good
new Person()
// good
var person = new Person()
// not good
delete(obj.attr)
// good
delete obj.attr
// not good
if (a = 10) {
a++
}
// not good
var a = [1, , , 2, 3]
// not good
var nums = []
for (var i = 0 i < 10 i++) {
(function(i) {
nums[i] = function(j) {
return i + j
}
}(i))
}
// not good
var singleton = new function() {
var privateVar
this.publicMethod = function() {
privateVar = 1
}
this.publicMethod2 = function() {
privateVar = 2
}
}
# 16、undefined 判断
永远不要直接使用 undefined 进行变量判断;使用 typeof 和字符串’undefined’对变量进行判断。
正例:
if (typeof person === 'undefined') {
...
}
反例:
if (person === undefined) {
...
}
# 17、条件判断和循环最多三层
条件判断能使用三目运算符和逻辑运算符解决的,就不要使用条件判断,但是谨记不要写太长的三目运算符。如果超过 3 层请抽成函数,并写清楚注释。
# 其他杂项规范
不要混用tab和space;
不要在一处使用多个tab或space;
换行符统一用'LF';
对上下文 this 的引用只能使用 self 来命名
能用箭头函数的地方, 直接用 this, 不要给 this 取别名
行尾不要有空白字符;
switch的falling through和no default的情况一定要有注释特别说明;
不允许有空的代码块。
// not good
var a = 1
function Person() {
// not good
var me = this
// good
var self = this
}
// good
switch (condition) {
case 1:
case 2:
...
break
case 3:
...
// why fall through
case 4
...
break
// why no default
}
// not good with empty block
if (condition) {
}
# 写在最后
# 1、JavaScript代码格式化
JavaScript的代码格式化,能解决部分JavaScript代码规范,如代码缩进、空格、分号、换行、引号、大小括号间隔对称等。所以能解决的这些规范仅供参考。