英文 | https://javascript.plainenglish.io/javascript-aesthetics-101-style-rules-for-beautiful-code-9d25642512d

翻譯 | 楊小愛

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

var a = 1; // badlet 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); // ReferenceErrorconsole.log(b); // ReferenceErrorconsole.log(c); // Prints 1

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

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

要創(chuàng)建一個空對象，可以使用 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、字符串首選單引號

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

// badconst name = "Edmon Dantès";
// bad - template literals should contain interpolation or newlinesconst name = `Edmon Dantès`;
// goodconst name = 'Edmon Dantès';

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

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

然而，對于這項任務(wù)，使用模板文字是最復(fù)雜和最簡單的。

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

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

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

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

// badfunction foo() { ... }
// badconst 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)雅的方式。因為，它在 this 的上下文中創(chuàng)建了箭頭函數(shù)的一個版本，這通常是你想要的，并且是一種更簡潔的語法。

// 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)格的。松散的是 == 和 != 比較不關(guān)心類型。例如，根據(jù)松散比較，2 和 '2' 相等。但是，如果你使用嚴(yán)格的 === 和 !==，那么它也會考慮類型，這通常會是你想要的結(jié)果。

// badconsole.log(2 == '2') // true
// goodconsole.log(2 === '2') // false

8、不要嵌套三元組

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

// badconst foo = maybe1 > maybe2  ? "bar"  : value1 > value2   ? "baz"   : null;
// split into 2 separated ternary expressionsconst maybeNull = value1 > value2 ? 'baz' : null;
// goodconst foo = maybe1 > maybe2 ? 'bar' : maybeNull;

9、 用空格

為了增加可讀性，請確保在評論的開頭放置一個空格。

// bad//is current tablet isActive = true;
// good// is current tablet isActive = true;

10、 選擇正確的外殼樣式

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

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

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

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

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

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

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

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

最后，謝謝你們的閱讀。如果你喜歡它，請給我點贊，如果你還有一些對你很重要的風(fēng)格規(guī)則，請在留言區(qū)給我留言。

學(xué)習(xí)更多技能

請點擊下方公眾號