Google JavaScript 代码风格指南

栏目: JavaScript · 发布时间: 6年前

内容简介:Google 和以下是我认为在 Google 代码风格指南中最有意思的十三条规则,和大家分享一下:除了行终止符外,在系统文件中,空格是唯一表示空白的字符,这意味着 tab 不能作为缩进使用。

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}?`;
}
复制代码

不要用反斜杠对长字符串换行

虽然 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.';
复制代码

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 ain\u0027t so.';

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

// good
let saying = `Say it ain't so`;
复制代码

以上所述就是小编给大家介绍的《Google JavaScript 代码风格指南》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

移动Web手册

移动Web手册

Peter-Paul Koch(彼得-保罗 科赫) / 奇舞团 / 电子工业出版社 / 2015-4 / 65.00元

《移动Web手册(双色)》主要讲解了移动Web开发和传统PC网站开发的不同之处。作者首先对移动互联网相关的运营商、设备、操作系统和软件进行了简单的介绍,让读者理解移动开发的复杂之处。接下来对移动设备上的各种浏览器进行了详细介绍,以及这些浏览器的市场占有率、特性支持等。《移动Web手册(双色)》为那些想进入移动Web开发领域的人提供了一些指导性的建议并对移动Web开发的未来进行了展望。 《移动......一起来看看 《移动Web手册》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具