对于那些还不熟悉JavaScript的编写风格的人,谷歌提供了编写JavaScript的编写风格指南,谷歌风格指南 其中列出了编写干净、可理解代码的最佳风格实践。javascript
对于编写有效的JavaScript来讲,这些并非硬性的、快速的规则,而只是在源文件中维护一致的、吸引人的样式选择的规则。这对于JavaScript来讲尤为有趣,它是一种灵活且多变的语言,容许多种风格的选择。html
谷歌和Airbnb有两个最受欢迎的编写风格指南。若是个人工做是花费大量时间编写JS,那么能够先学习这两种方法。前端
如下是谷歌JS风格指南中我认为最有趣和相关的13条规则:java
谷歌JS风格指南处理各类各样的问题,从激烈争论的问题(制表符与空格的比较,以及分号应该如何使用这个有争议的问题),到一些更模糊的规范,这些规范令我吃惊,它们确定会改变我之后写JS的方式。git
对于每一个规则,我将对规范进行总结,而后引用样式指南中的支持部分,详细描述该规则。在适用的状况下,我还将提供实践中的样式示例,并将其与不遵循规则的代码进行对比。github
除了行结束符序列以外,ASCII水平空格字符(0x20)是源文件中出如今任何位置的唯一空格字符。这意味着…制表符不用于缩进数组
** 使用两个空格(而不是四个)进行缩进**架构
// bad function foo() { ∙∙∙∙let name; } // bad function bar() { ∙let name; } // good function baz() { ∙∙let name; }
### 分号是必需的less
每一个语句必须以分号结束,禁止依靠自动分号插入。ide
虽然没法想象为何会有人反对这个想法,但JS中分号的一导致用正在成为新的“空格对制表符”的争论。谷歌一惯建议结束须要使用分号。
// bad let luke = {} let leia = {} [luke, leia].forEach(jedi => jedi.father = 'vader') // good let luke = {}; let leia = {}; [luke, leia].forEach((jedi) => { jedi.father = 'vader'; });
为了帮助你们让学习变得轻松、高效,给你们免费分享一大批资料,帮助你们在成为全栈工程师,乃至架构师的路上披荆斩棘。在这里给你们推荐一个前端全栈学习交流圈:866109386(点击便可进群).欢迎你们进群交流讨论,学习交流,共同进步。
不要使用ES6模块
不要使用ES6模块(即导出和导入关键字),由于它们的语义尚未最终肯定。注意,一旦语义彻底标准,将从新定义使用的方式。
// 先别作这种事 //------ 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声明全部本地变量来代替 var。默认状况下使用 const,除非须要从新分配变量在使用 let 声明。
// bad var example = 42; // good let 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}?`; }
** 不要对长字符串使用 \ 来表示连续**
不要在普通或模板字符串文字中使用连续行(也就是说,在字符串文字中以反斜杠结束一行)。尽管ES5容许这样作,可是若是斜杠后面有任何尾随空格,那么可能会致使一些棘手的错误,并且对读者来讲不太明显。
有趣的是,谷歌和Airbnb不一样意这个规则(这是Airbnb的规范)。
虽然谷歌建议链接更长的字符串(以下所示),Airbnb的风格指南基本上建议什么也不作,并容许长字符串继续,只要他们须要。
// bad (sorry, this doesn't show up well on mobile) 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是for循环的首选类型**
使用ES6,该语言如今有三种不一样的for循环。全部的循环均可以使用,可是若是可能的话,for-of循环应该是首选的。
若是您问我,这是一个奇怪的问题,可是我认为我应该包含它,由于谷歌声明了一种首选的for循环类型,这很是有趣。
我总以为 for...in 循环对于对象更好,而对于for...of 的更适合数组,不一样场景可使用不一样方式。
虽然这里的Google规范不必定与这个想法相矛盾,可是了解他们特别喜欢这个循环仍是颇有趣的。
** 不要使用eval()**
不要使用eval或function(…string)构造函数(代码加载器除外)。这些特性具备潜在的危险,并且在CSP环境中根本不起做用
MDN 页面的eval()中,甚至有一个名为“不要使用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
** 常量应该用全大写字母命名,用下划线分隔**
常量名称使用CONSTANT_CASE的格式:全部大写字母,单词由下划线分隔。
若是您绝对确信某个变量不该该更改,那么能够经过将该常量的名称大写来表示。这使得在整个代码中使用该常量时,它的不变性很是明显。
一个值得注意的例外是,若是常量是函数做用域的。在这种状况下,应该用camelCase来写。
// bad const number = 5; // good const NUMBER = 5;
** 每次声明一个变量**
每一个局部变量声明只声明一个变量:声明如令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`;
** 最后一个注意**
正如我在开始时所说,这些不是强制要求。谷歌只是众多科技巨头之一,这些只是推荐。
也就是说,看看谷歌这样的公司提出的风格建议是颇有趣的,这家公司雇佣了不少才华横溢的人,他们花了不少时间编写优秀的代码。
若是你想要遵循“符合谷歌的源代码”的指导原则,那么你能够遵循这些规则—可是,固然,许多人不一样意这些规则,你能够随意忽略这些规则中的任何一个或全部规则。
我我的认为在不少状况下Airbnb的规范比谷歌更有吸引力。不管您对这些特定的规则采起何种立场,在编写任何类型的代码时,始终牢记风格一致性仍然很重要。
英文原文:13 Noteworthy Points from Google’s JavaScript Style Guide