关于 Google 发布的 JS 代码规范

更新日期: 2018-04-12阅读量: 1803标签: 代码

Google为了那些还不熟悉代码规范的人发布了一个js代码规范。其中列出了编写简洁易懂的代码所应该做的最佳实践。

代码规范并不是一种编写正确JavaScript代码的规则,而是为了保持源代码编写模式一致的一种选择。对于JavaScript语言尤其如此,因为它灵活并且约束较少,允许开发者使用许多不同的编码样式。

Google和Airbnb各自占据着当前最流行的编码规范的半壁江山。如果你会在编写js代码上投入很长时间的话,我强烈推荐你通读一遍这两家公司的编码规范。

接下来要写的是我个人认为在Google的代码规范中,与日常开发密切相关的十三条规则。

它们处理的问题都非常具有争议性,包括tab与空格、是否强制使用分号等等。还有一些令我感到惊讶的规则,往往最后都改变了我编写JS代码的习惯。

对于每一条规则,我都会先给出规范的摘要,然后引用规范中的详细说明。我还会举一些适当的反例论证遵守这些规则的重要性。


使用空格代替tab

除了每一行的终止符序列,ASCII水平空格符(0x20)是唯一一个可以出现在源文件中任意位置的空格字符。这也意味着,tab字符不应该被使用,以及被用来控制缩进。

规范随后指出应该使用2个,而不是4个空格带实现缩进。

// bad
function foo() {
∙∙∙∙let name;
}
// bad
function bar() {
∙let name;
}
// good
function baz() {
∙∙let name;
}


不能省略分号

每个语句必须以分号结尾。不允许依赖于JS自动添加分号的功能。

尽管我不明白为什么会有人反对这个规则,但目前分号的使用问题显然已经像“空格 vs 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 module

由于ES6模块的语义尚不完全确定,所以暂时不要使用,比如export和import关键字。一旦它们的相关规范制定完成,那么请忽略这一条规则。

// 暂时不要编写下面的代码:
//------ 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';

译者注:感觉遵守这条规范不大现实,毕竟现在已经有babel了。而且使用react时,最佳实践就是使用ES6模块吧。


不推荐代码水平对齐

Google的代码规范允许但不推荐对代码进行水平对齐。即使之前的代码中做了水平对齐的处理,以后也应该避免这种行为。

对代码进行水平对齐会在代码中添加若干多余的空格,这让相邻两行的字符看上去处于一条垂直线上。

// bad
{
 tiny:  42, 
 longer: 435, 
};
// good
{
 tiny: 42, 
 longer: 435,
};

杜绝var

使用const或let来声明所有局部变量。如果变量不需要被重新赋值,默认应该使用const。应该拒绝使用关键字var

我不知道是因为没有人能说服他们,还是说因为旧习难改。目前我仍能看到许多人在StackOverFlow或其他地方使用var声明变量。

// bad
var example = 42;
// good
const example = 42;

优先使用箭头函数

箭头函数提供了一种简洁的语法,并且避免了一些关于this指向的问题。相比较与function关键字,开发者应该优先使用箭头函数来声明函数,尤其是声明嵌套函数。

坦白说,我曾以为箭头函数的作用只在于简洁美观。但现在我发现原来它们还有更重要的作用。

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


不要使用续行符分割长字符串

在JS中,\也代表着续行符。Google的代码规范不允许在不管是模板字符串还是普通字符串中使用续行符。尽管ES5中允许这么做,但如果在\后跟着某些结束空白符,这种行为会导致一些错误,而这些错误在审阅代码时很难注意到。

这条规则很有趣,因为Airbnb的规范中有一条与之不相同的规则

Google推荐下面这样的写法,而Airbnb则认为应该顺其自然,不做特殊处理,该多长就多长。

// bad (建议在PC端阅读)
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.';
// 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...of

在ES6中,有3种不同的for循环。尽管每一种有它的应用场景,但Google仍推荐使用for...of。

真有趣,Google居然会特别指定一种for循环。虽然这很奇怪,但不影响我接受这一观点。

以前我认为for...in适合遍历Object,而for...of适合遍历数组。因为我喜欢这种各司其职的使用方式。

尽管Google的规范与这种使用方式相冲突,但Google对for...of的偏爱依然让我觉得十分有趣。


不要使用eval语句

除非是在code loader中,否则不用使用eval或是Function(...string)结构。这个功能具有潜在的危险性,并且在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是科技巨头之一,但这份代码规范也仅仅是用来当作参考罢了。

Google是一家人才汇聚的科技公司,雇佣着出色的程序员来编写优秀的代码。能够看到这样的公司发布的代码规范是一件很有趣的事情。

如果你想要实现一种Google式的代码,那么你可以在项目中制定这些规范。但你可能并不赞成这份代码规范,这时也没有人会阻拦你舍弃其中某些规则。

我个人认为在某些场景下,Airbnb的代码规范比Google的代码规范要出色。但不管你支持哪一种,也不管你编写的是什么类型的代码,最重要的是在脑海中时刻遵守着同一份代码规范。

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/629

【重构】使用 Hooks 让代码更易于变更

重构过程中,肯定会遇到新的代码如何做技术选型的问题,要考虑到这套技术的生命力,也就是他是否是更新的技术,还有他的灵活和拓展性,期望能够达到在未来至少 3 年内不需要做大的技术栈升级

程序员该如在低代码和无代码开发中抉择?

对于一个人第一次是如何了解低代码/无代码这两种开发方式,我总是充满好奇。这就是为什么我觉得贸易展会是如此有趣的原因;因为我可以拿同样的问题问每一个走进你的展台的人们。通常这是我问他们的第一个问题,当然是在扫描了他们的胸牌之后。

你解决的问题比你编写的代码更重要!

程序员似乎忘记了软件的真正目的,那就是解决现实问题。您编写的代码的目的是为了创造价值并使现有世界变得更美好,而不是满足您对自我世界应该是什么的以自我为中心的观点。有人说:如果你拥有的只是一把锤子,那么一切看起来都像钉子一样

20个杀手级 JavaScript 单行代码

本文整理了一些实用的 JavaScript 单行代码,非常好用~~获取浏览器Cookie的值;颜色RGB转十六进制;复制到剪贴板;检查日期是否合法;查找日期位于一年中的第几天

代码越写越乱?那是因为你没用责任链

在开始学习责任链之前,先看一下在开发中常见的问题。下面是前端用来处理 API 错误码的代码:当然实际项目中不可能只有一行 console,这是为了说明原理的简化版。

看看这些被同事喷的JS代码风格你写过多少?

现在写代码比以前好多了,代码的格式都有eslint,prettier,babel(写新版语法)这些来保证,然而,技术手段再高端都不能解决代码可读性(代码能否被未来的自己和同事看懂)的问题,因为这个问题只有人自己才能解决

如何写出优雅的 JS 代码?使用 SOLID 原则

把这六个原则的首字母联合起来(两个 L 算做一个)就是 SOLID (solid,稳定的),其代表的含义就是这六个原则结合使用的好处:建立稳定、灵活、健壮的设计。下面我们来分别看一下这六大设计原则。

开发中比较容易理解的代码套路

举个栗子:我们有一些业务需要添加元素到数组中,但同时也可能过会又要将其移除。更好的方式是我们把他们封装成函数,并利用高阶函数闭包的特性来标记删除,这样就减少了去查找这个元素的问题了

提高代码质量:如何编写函数

本文从函数命名,函数参数和函数的代码编写三个方面谈了关于如何编写好一个函数的感受和想法。文中提到了很多具体的情况,当然日常编码中肯定会遇到更多复杂的情况可能我暂时没有想到。我简单的归纳了几点

一文帮你搞定90%的JS手写题

还在害怕手写题吗,本文可以帮你扩展并巩固自己的JS基础,顺便搞定90%的手写题。在工作中还可以对常用的需求进行手写实现,比如深拷贝、防抖节流等可以直接用于往后的项目中,提高项目开发效率。不说废话了,下面就直接上代码吧。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!