Google 和 Airbnb 是目前最流行的 JavaScript 代码风格,若是你长期使用 JavaScript 来写代码的话,建议对比看看。javascript
如下是我认为在 Google 代码风格指南中最有意思的十三条规则,和你们分享一下:html
除了行终止符外,在系统文件中,空格是惟一表示空白的字符,这意味着 tab 不能做为缩进使用。java
这份指南规定用2个空格(而不是4个)来表示缩进。git
// bad
function foo() {
∙∙∙∙let name;
}
// bad
function bar() {
∙let name;
}
// good
function baz() {
∙∙let name;
}
复制代码
每一个语句都必须以分号结尾,不要依赖编译器自动插入分号。github
尽管我没法理解为何有人会反对加分号,就像“tab 和 空格”争论同样。不管怎么样 Google 是站在加分号这边的。less
// bad
let luke = {}
let leia = {}
[luke, leia].forEach(jedi => jedi.father = 'vader')
// good
let luke = {};
let leia = {};
[luke, leia].forEach((jedi) => {
jedi.father = 'vader';
});
复制代码
暂时不要用 ES6 模块化(好比 import 和 export 关键字),由于 ES6 模块化的语法还没最终肯定。ide
// Don't do this kind of thing yet:
//------ lib.js ------
export function square(x) {
return x * x;
}
export function diag(x, y) {
return sqrt(square(x) + square(y));
}
//------ main.js ------
import { square, diag } from 'lib';
复制代码
尽可能不要上下对齐代码,维护成本过高。模块化
// bad
{
tiny: 42,
longer: 435,
};
// good
{
tiny: 42,
longer: 435,
};
复制代码
声明局部变量用 const 或者 let,默认使用 const,除非变量须要从新赋值。函数
// bad
var example = 42;
// good
let example = 42;
复制代码
箭头函数不只语法简洁易读,并且修复了 this 的问题,特别是在嵌套函数中。ui
// bad
[1, 2, 3].map(function (x) {
const y = x + 1;
return x * y;
});
// good
[1, 2, 3].map((x) => {
const y = x + 1;
return x * y;
});
复制代码
用模板字符串(用 ` 分割)处理复杂的字符串,特别是处理多行的字符串。
// bad
function sayHi(name) {
return 'How are you, ' + name + '?';
}
// bad
function sayHi(name) {
return ['How are you, ', name, '?'].join();
}
// bad
function sayHi(name) {
return `How are you, ${ name }?`;
}
// good
function sayHi(name) {
return `How are you, ${name}?`;
}
复制代码
虽然 ES5 是容许这样作的,可是会带来诡异的错误,并且会对阅读代码的人带来误导
颇有意思的是,Google 和 Airbnb 的规则截然不同(这里是 Airbnb 的规则)
// bad (在移动端会出问题)
const longString = 'This is a very long string that \ far exceeds the 80 column limit. It unfortunately \ contains long stretches of spaces due to how the \ continued lines are indented.';
// bad (Airbnb 推荐这种写法,不对长字符串作任何处理。)
const longString = 'This is a very long string that far exceeds the 80 column limit. It does not contain long stretches of spaces since the concatenated strings are cleaner.';
// good
const longString = 'This is a very long string that ' +
'far exceeds the 80 column limit. It does not contain ' +
'long stretches of spaces since the concatenated ' +
'strings are cleaner.';
复制代码
在 ES6 中,支持多种 for 循环写法,可能你都用过,但尽量选用 for… of 吧。
不要使用 eval() (代码加载器除外),会带来潜在的不肯定性,由于在 CSP 环境中没法工做。
在 MDN中也明确提到了,不用使用 eval()。
// bad
let obj = { a: 20, b: 30 };
let propName = getPropName(); // returns "a" or "b"
eval( 'var result = obj.' + propName );
// good
let obj = { a: 20, b: 30 };
let propName = getPropName(); // returns "a" or "b"
let result = obj[ propName ]; // obj[ "a" ] is the same as obj.a
复制代码
常量用大写字母加下划线表示,全部单词大写,下划线分割。
若是你的代码遵照此规则,可大大增长代码的可阅读性,但须要注意的是,若是常量是函数,须要写成驼峰。
// bad
const number = 5;
// good
const NUMBER = 5;
复制代码
每次申明一个变量,不要写成 let a = 1, b = 2;
// bad
let a = 1, b = 2, c = 3;
// good
let a = 1;
let b = 2;
let c = 3;
复制代码
普通的字符串用单引号分割(’),若是字符串中包含单引号,那么考虑用模板字符串。
// bad
let directive = "No identification of self or mission."
// bad
let saying = 'Say it ain\u0027t so.';
// good
let directive = 'No identification of self or mission.';
// good
let saying = `Say it ain't so`;
复制代码
本文翻译自 Daniel Simmons - 《13 Noteworthy Points from Google’s JavaScript Style Guide》