你知道為什么很多人對(duì) PHP 感到厭惡?jiǎn)?？這主要是因?yàn)樗耐庥^。PHP 可以隨心所欲，所以會(huì)使他變得丑陋。因?yàn)?PHP 的創(chuàng)建者沒有為 PHP 建議任何大小寫或格式。一些開發(fā)人員使用 under_score，而另一些開發(fā)人員使用 PascalCase。因此，這種不一致最終導(dǎo)致了人們對(duì) PHP 的巨大仇恨。

幸運(yùn)的是，JavaScript 并非如此，因?yàn)榫帉?JavaScript 代碼有一些官方規(guī)則。例如，camelCase 是官方推薦的 JavaScript 大小寫方法。然而，將這些樣式規(guī)則提升到一個(gè)新的水平并為 JavaScript 創(chuàng)建一個(gè)通用的視覺效果是至關(guān)重要的，原因如下：

•  在整個(gè)代碼庫中擁有一致的風(fēng)格使其易于閱讀和變異。
•  當(dāng)另一個(gè) JS 開發(fā)人員查看你寫的代碼時(shí)，他/她不會(huì)感到不舒服，因?yàn)橐磺卸己苁煜ぁ?br>
•  隨著項(xiàng)目的進(jìn)行以及你寫的代碼越多，如果沒有樣式指南，維護(hù)和改進(jìn)就會(huì)變得越來越困難。
  
•  使用這些規(guī)則將使你的代碼更具可讀性和一致性。
  

下面我們開始吧。

1、使用 Let 和 Const 聲明變量

ES2015 引入了 let 和 const 關(guān)鍵字，它們是用來替換 var 的。但是 var 有什么問題呢？嗯，很多。

var 從一開始就在 JavaScript 中，但它對(duì)于今天的標(biāo)準(zhǔn)有一些缺點(diǎn)。隨著項(xiàng)目的發(fā)展，會(huì)導(dǎo)致全球范圍內(nèi)的意外行為和污染。

例如，由于 var 不是塊范圍的，它也在塊級(jí)標(biāo)記之外定義，例如 if 和 for。例如，迭代變量 i 是在循環(huán)完成后定義的。

示例如下：

var a = 1; // bad
let a = 1; // good
// const and let only exist in the blocks they are defined in.
{
 let a = 1;
 const b = 1;
 var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1

2、盡可能的使用隱式構(gòu)造函數(shù)

如果你正在使用 JavaScript，你應(yīng)該知道有多種方法可以完成相同的任務(wù)。例如，你可以使用三元組或 if-else 塊來創(chuàng)建條件邏輯。這種不同的選擇有時(shí)會(huì)導(dǎo)致你寫的代碼不一致。

要?jiǎng)?chuàng)建一個(gè)空對(duì)象，可以使用 Object 構(gòu)造函數(shù)或隱式的 {}。字符串、函數(shù)、數(shù)組、數(shù)字等也是如此。

為了保持一致性和易于閱讀，盡可能使用隱式構(gòu)造函數(shù)。

// bad
const a = new Object();  
const b = new String("str");
const c = new Function('a', 'b', 'return a + b');
// good
const a = {};
const b = "str";
const c = (a,b) => a + b;

3、字符串首選單引號(hào)

為了創(chuàng)建一致性，在所有代碼庫中使用單引號(hào) ' 代替雙引號(hào) " 和模板文字（反引號(hào)） `。為了簡(jiǎn)化此過程，你可以利用 Prettier 立即格式化。

// bad
const name = "Edmon Dantès";
// bad - template literals should contain interpolation or newlines
const name = `Edmon Dantès`;
// good
const name = 'Edmon Dantès';

4、盡可能使用字符串插值

正如我所提到的，在 JavaScript 中，有很多方法可以獲得相同的結(jié)果，但其中一些方法比其他方法更復(fù)雜。要連接字符串，你可以使用 + 運(yùn)算符、數(shù)組上的 join 方法或字符串上的 concat 方法。

然而，對(duì)于這項(xiàng)任務(wù)，使用模板文字是最復(fù)雜和最簡(jiǎn)單的。

// bad
const str = 'How are you, ' + name + '?';
// bad
const str = ['How are you, ', name, '?'].join();
// good
const str = `How are you, ${name}?`;

5、選擇命名函數(shù)表達(dá)式

一般來說，每個(gè)人都有自己喜歡的方法來創(chuàng)建函數(shù)，因?yàn)?JavaScript 在方法方面非?？犊?。有箭頭函數(shù)、匿名函數(shù)表達(dá)式、函數(shù)聲明等。但是要編寫一致且可讀的 JavaScript 代碼，你應(yīng)該在任何地方使用一種類型。

函數(shù)表達(dá)式?jīng)]有被提升，這意味著要使用一個(gè)函數(shù)，你需要先在頂部或另一個(gè)模塊中定義它。此外，名稱可以很長(zhǎng)且具有描述性，從而防止單獨(dú)使用注釋。因此，代碼才會(huì)更具可讀性。

// bad
function foo() { ... }
// bad
const foo = function () { ... };
// good
// lexical name distinguished from the variable-referenced invocation(s)
const short = function longUniqueMoreDescriptiveLexicalFoo() { ... };

6、在回調(diào)中首選箭頭函數(shù)

有一些方法，例如 map 或 filter，它們將匿名函數(shù)作為參數(shù)。在這些情況下，有很多選擇，但使用箭頭函數(shù)是最方便和優(yōu)雅的方式。因?yàn)?，它?this 的上下文中創(chuàng)建了箭頭函數(shù)的一個(gè)版本，這通常是你想要的，并且是一種更簡(jiǎn)潔的語法。

// bad
[1, 2, 3].forEach(function (x) {
 const y = x ** 2;
 return x + y;
});
// good
[1, 2, 3].forEach((x) => {
 const y = x ** 2;
 return x + y;
});

7、使用嚴(yán)格等式進(jìn)行等式比較

有兩種類型的相等運(yùn)算符：松散的和嚴(yán)格的。松散的是 == 和 != 比較不關(guān)心類型。例如，根據(jù)松散比較，2 和 '2' 相等。但是，如果你使用嚴(yán)格的 === 和 !==，那么它也會(huì)考慮類型，這通常會(huì)是你想要的結(jié)果。

// bad
console.log(2 == '2') // true
// good
console.log(2 === '2') // false

8、不要嵌套三元組

三元運(yùn)算符允許你創(chuàng)建內(nèi)聯(lián)條件語句。在 if-else 語句上使用它，你可以真正節(jié)省許多代碼行。但是，正如它所定義的，它必須是內(nèi)聯(lián)的和短的。因?yàn)榍短兹M會(huì)極大地?fù)p害代碼的可讀性。

// bad
const foo = maybe1 > maybe2
 ? "bar"
  : value1 > value2  
  ? "baz"  
 : null;
// split into 2 separated ternary expressions
const maybeNull = value1 > value2 ? 'baz' : null;
// good
const foo = maybe1 > maybe2 ? 'bar' : maybeNull;

9、 用空格

為了增加可讀性，請(qǐng)確保在評(píng)論的開頭放置一個(gè)空格。

// bad
//is current tab
let isActive = true;
// good
// is current tab
let isActive = true;

10、 選擇正確的外殼樣式

正如我在介紹中提到的，大小寫樣式是使代碼看起來不錯(cuò)的最重要的概念之一，如果它是一致的。在 JavaScript 中，大小寫樣式有一些約定。

在命名對(duì)象、函數(shù)、變量和實(shí)例時(shí)使用 camelCase。

僅在命名構(gòu)造函數(shù)或類時(shí)使用 PascalCase。

在命名不可重新分配的變量和枚舉時(shí)使用 UPPERCASE_VARIABLES。

根本不要使用snake_case 或kebab-case。

// bad
const StudentCount = 15;
class particle { ... }
function get_name() { ... }
let apiKey = 'cX25zanxsPcdjsbxX985ddXM3';
// good
const studentCount = 15;
class Particle { ... }    
function getName() { ... }
const API_KEY = 'cX25zanxsPcdjsbxX985ddXM3';

寫計(jì)算機(jī)可以理解的代碼一點(diǎn)也不難，然而，寫人類容易理解的代碼是具有挑戰(zhàn)性的。這就是為什么在寫程序上有一些基本規(guī)則，確實(shí)會(huì)造成好代碼和壞代碼之間的差異。

在本文中，我嘗試使用 AirBNB 的 JavaScript 樣式指南來分享我在編寫好的 JavaScript 代碼時(shí)必不可少的規(guī)則。這些是我的首選，但如果你看一下這個(gè)綜合風(fēng)格指南，我相信你會(huì)發(fā)現(xiàn)一些你還不知道的東西。

最后，謝謝你們的閱讀。如果你喜歡它，請(qǐng)給我點(diǎn)贊。