一、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`;
如果您也正在學習前端的路上，記得關注該博主，學習更多關於前端的知識~
如果該文章對您有所幫助，記得點個贊再走喲~謝謝