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

Posted 2021-02-06

Google 和 Airbnb 是目前最流行的 javascript 代码风格，如果你长期使用 JavaScript 来写代码的话，建议对比看看。

以下是我认为在 Google 代码风格指南中最有意思的十三条规则，和大家分享一下：

使用空格，而不是 tab

除了行终止符外，在系统文件中，空格是唯一表示空白的字符，这意味着 tab 不能作为缩进使用。

这份指南规定用2个空格（而不是4个）来表示缩进。

// bad
function foo() {
????let name;
}

// bad
function bar() {
?let name;
}

// good
function baz() {
??let name;
}

必不可少的分号

每个语句都必须以分号结尾，不要依赖编译器自动插入分号。

尽管我无法理解为什么有人会反对加分号，就像“tab 和 空格”争论一样。无论怎么样 Google 是站在加分号这边的。

// 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 模块化

暂时不要用 ES6 模块化（比如 import 和 export 关键字），因为 ES6 模块化的语法还没最终确定。

// 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,
};

不使用 var

声明局部变量用 const 或者 let，默认使用 const，除非变量需要重新赋值。

// bad
var example = 42;

// good
let example = 42;

箭头函数完美替代 function

箭头函数不仅语法简洁易读，而且修复了 this 的问题，特别是在嵌套函数中。

// 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}?`;
}

for 循环首选 “for… of”

在 ES6 中，支持多种 for 循环写法，可能你都用过，但尽可能选用 for… of 吧。

不要使用 eval()

不要使用 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 ainu0027t so.‘;

// good
let directive = ‘No identification of self or mission.‘;

// good
let saying = `Say it ain‘t so`;

最后

很多时候跟着书和网站查找资料学习，会发现没有目标，学了很多却不知道自己到底能够做出什么成绩。要有一个清晰的职业学习规划，学习过程中会遇到很多问题，你可以到我们的前端学习交流q-u-n【 731771211 】，基础，进阶。从企业招聘人才需求 到怎么学习前端开发，和学习什么内容都有免费系统分享，让你无论是自学还是找相应的培训都能让你少走弯路。希望可以帮助你快速了解前端，学习前端

点击：加入