一、Airbnb JavaScript 风格指南
这是由 Airbnb 开源的 JavaScript 代码风格指南。主要是为编写 JavaScript 代码提供规范的风格，方便开发者理解、阅读代码。在github上已经接近有90,000+Star,18,000+fork了。是目前比较流行的一套 前端开发流程规范。
github原文地址： https://github.com/airbnb/javascript
github中文版地址：https://github.com/lin-123/javascript
二、Google JavaScript样式指南
github原文地址：https://google.github.io/styleguide/jsguide.html#formatting-block-indentation
其中 Google JavaScript样式指南的有13点是挺值得注意，在这里跟大家分享一下
1、使用空格，而不是制表符
除了行终止符序列之外，ASCII水平空格字符（0x20）是唯一出现在源文件中任何地方的空格字符。这意味着…制表符不用于缩进。
指南稍后会指定缩进应使用两个空格（而不是四个）。
// badfunction foo() {∙∙∙∙let name;}// badfunction bar() {∙let name;}// goodfunction baz() {∙∙let name;}
2、需要分号
每个语句必须以分号结尾。禁止依靠自动分号插入。
尽管我无法想象为什么有人会反对这个想法，但是在JS中对分号的一致使用正成为新的“空格与制表符”辩论。Google在捍卫分号方面坚定地走在这里。
// badlet luke = {}let leia = {}[luke, leia].forEach(jedi => jedi.father = 'vader')
// goodlet luke = {};let leia = {};[luke, leia].forEach((jedi) => { jedi.father = 'vader';});
3、暂不使用ES6模块
尚未使用ES6模块（即exportand import关键字），因为它们的语义尚未最终确定。请注意，一旦语义完全标准，该政策将被重新考虑。
// 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';
4、不建议水平对齐（但不禁止）
允许这种做法，但Google风格通常不鼓励这样做。甚至不需要在已经使用过的地方保持水平对齐。
水平对齐是在代码中添加可变数量的其他空格的一种做法，以使某些标记直接出现在前几行中某些其他标记的下方。
// bad{ tiny: 42, longer: 435, };
// good{ tiny: 42, longer: 435,};
5、不再使用var
用const或声明所有局部变量let。默认情况下使用const，除非需要重新分配变量。将var不得使用关键字。
我仍然看到人们var在StackOverflow和其他地方的代码示例中使用。我不能说是否有人会为此辩护，或者仅仅是因为旧习惯在不断消亡。
// badvar example = 42;
// goodlet example = 42;
6、首选箭头功能
箭头函数提供了简洁的语法并解决了许多问题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;});
7、使用模板字符串而不是串联
`在复杂的字符串连接上使用模板字符串（以分隔），尤其是在涉及多个字符串文字的情况下。模板字符串可能跨越多行。
// badfunction sayHi(name) { return 'How are you, ' + name + '?';}// badfunction sayHi(name) { return ['How are you, ', name, '?'].join();}// badfunction sayHi(name) { return `How are you, ${ name }?`;}// goodfunction sayHi(name) { return `How are you, ${name}?`;}
8、不要对长字符串使用换行符
请勿在普通或模板字符串文字中使用换行符（即，在字符串文字中的行以反斜杠结束）。即使ES5允许这样做，但如果在斜杠后出现任何尾随空格，则可能会导致棘手的错误，并且对读者而言不太明显。
有趣的是，这是Google和Airbnb意见不一致的一条规则（这是Airbnb的规格）。
虽然Google建议串联较长的字符串（如下所示），但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.';
// goodconst 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.';
9、“ for…of”是“ for loop”的首选类型
使用ES6，该语言现在具有三种不同的for循环。所有可以使用，但for- of循环应首选在可能的情况。
如果您问我，这很奇怪，但是我想我将其包括在内，因为Google声明了首选的for循环类型非常有趣。
我总是给人以这样的印象：for… in循环更适合对象，而for… of更适合数组。一种“适合正确工作的正确工具”类型的情况。
尽管Google的规范不一定与该思想相抵触，但有趣的是，他们特别喜欢此循环。
10、不要使用eval（）
不要使用eval或Function(…string)构造函数（代码加载器除外）。这些功能具有潜在的危险，根本无法在CSP环境中使用。
该MDN页的eval()甚至有一段名为“不要使用eval！”
// badlet obj = { a: 20, b: 30 };let propName = getPropName(); // returns "a" or "b"eval( 'var result = obj.' + propName );
// goodlet obj = { a: 20, b: 30 };let propName = getPropName(); // returns "a" or "b"let result = obj[ propName ]; // obj[ "a" ] is the same as obj.a
11、常量应以ALL_UPPERCASE命名，并用下划线分隔
常量名称使用CONSTANT_CASE：所有大写字母，单词之间用下划线分隔。
如果您绝对确定不应该更改变量，则可以通过大写常量名称来表明这一点。在整个代码中使用常量时，这使常量的不变性显而易见。
该规则的一个显着例外是常量是否是函数范围的。在这种情况下，应使用camelCase编写。
// badconst number = 5;
// goodconst NUMBER = 5;
12、每个声明一个变量
每个局部变量声明仅声明一个变量：let a = 1, b = 2;不使用诸如的声明。
// badlet a = 1, b = 2, c = 3;
// goodlet a = 1;let b = 2;let c = 3;
13、使用单引号，而不是双引号
普通字符串文字用单引号（’）而不是双引号（"）分隔。
提示：如果字符串包含单引号字符，请考虑使用模板字符串，以避免不得不对引号进行转义。
// badlet directive = "No identification of self or mission."
// badlet saying = 'Say it ain\u0027t so.';
// goodlet directive = 'No identification of self or mission.';
// goodlet saying = `Say it ain't so`;
如果您也正在学习前端的路上，记得关注该博主，学习更多关于前端的知识~
如果该文章对您有所帮助，记得点个赞再走哟~谢谢