十個寫出漂亮JavaScript 代碼的樣式規則
你知道為什么很多人對 PHP 感到厭惡嗎？這主要是因為它的外觀。PHP 可以隨心所欲，所以會使他變得丑陋。因為 PHP 的創建者沒有為 PHP 建議任何大小寫或格式。一些開發人員使用 under_score，而另一些開發人員使用 PascalCase。因此，這種不一致最終導致了人們對 PHP 的巨大仇恨。
幸運的是，JavaScript 并非如此，因為編寫 JavaScript 代碼有一些官方規則。例如，camelCase 是官方推薦的 JavaScript 大小寫方法。然而，將這些樣式規則提升到一個新的水平并為 JavaScript 創建一個通用的視覺效果是至關重要的，原因如下：
- 在整個代碼庫中擁有一致的風格使其易于閱讀和變異。
- 當另一個 JS 開發人員查看你寫的代碼時，他/她不會感到不舒服，因為一切都很熟悉。
- 隨著項目的進行以及你寫的代碼越多，如果沒有樣式指南，維護和改進就會變得越來越困難。
- 使用這些規則將使你的代碼更具可讀性和一致性。
下面我們開始吧。
1、使用 Let 和 Const 聲明變量
ES2015 引入了 let 和 const 關鍵字，它們是用來替換 var 的。但是 var 有什么問題呢？嗯，很多。
var 從一開始就在 JavaScript 中，但它對于今天的標準有一些缺點。隨著項目的發展，會導致全球范圍內的意外行為和污染。
例如，由于 var 不是塊范圍的，它也在塊級標記之外定義，例如 if 和 for。例如，迭代變量 i 是在循環完成后定義的。
示例如下：
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、盡可能的使用隱式構造函數
如果你正在使用 JavaScript，你應該知道有多種方法可以完成相同的任務。例如，你可以使用三元組或 if-else 塊來創建條件邏輯。這種不同的選擇有時會導致你寫的代碼不一致。
要創建一個空對象，可以使用 Object 構造函數或隱式的 {}。字符串、函數、數組、數字等也是如此。
為了保持一致性和易于閱讀，盡可能使用隱式構造函數。
// 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、字符串首選單引號
為了創建一致性，在所有代碼庫中使用單引號 ' 代替雙引號 " 和模板文字（反引號） `。為了簡化此過程，你可以利用 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 中，有很多方法可以獲得相同的結果，但其中一些方法比其他方法更復雜。要連接字符串，你可以使用 + 運算符、數組上的 join 方法或字符串上的 concat 方法。
然而，對于這項任務，使用模板文字是最復雜和最簡單的。
// bad
const str = 'How are you, ' + name + '?';
// bad
const str = ['How are you, ', name, '?'].join();
// good
const str = `How are you, ${name}?`;
5、選擇命名函數表達式
一般來說，每個人都有自己喜歡的方法來創建函數，因為 JavaScript 在方法方面非?？犊?。有箭頭函數、匿名函數表達式、函數聲明等。但是要編寫一致且可讀的 JavaScript 代碼，你應該在任何地方使用一種類型。
函數表達式沒有被提升，這意味著要使用一個函數，你需要先在頂部或另一個模塊中定義它。此外，名稱可以很長且具有描述性，從而防止單獨使用注釋。因此，代碼才會更具可讀性。
// bad
function foo() { }
// bad
const foo = function () { };
// good
// lexical name distinguished from the variable-referenced invocation(s)
const short = function longUniqueMoreDescriptiveLexicalFoo() { };
6、在回調中首選箭頭函數
有一些方法，例如 map 或 filter，它們將匿名函數作為參數。在這些情況下，有很多選擇，但使用箭頭函數是最方便和優雅的方式。因為，它在 this 的上下文中創建了箭頭函數的一個版本，這通常是你想要的，并且是一種更簡潔的語法。
// 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、使用嚴格等式進行等式比較
有兩種類型的相等運算符：松散的和嚴格的。松散的是 == 和 != 比較不關心類型。例如，根據松散比較，2 和 '2' 相等。但是，如果你使用嚴格的 === 和 !==，那么它也會考慮類型，這通常會是你想要的結果。
// bad
console.log(2 == '2') // true
// good
console.log(2 === '2') // false
8、不要嵌套三元組
三元運算符允許你創建內聯條件語句。在 if-else 語句上使用它，你可以真正節省許多代碼行。但是，正如它所定義的，它必須是內聯的和短的。因為嵌套三元組會極大地損害代碼的可讀性。
// 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、 用空格
為了增加可讀性，請確保在評論的開頭放置一個空格。
// bad
//is current tab
let isActive = true;
// good
// is current tab
let isActive = true;
10、 選擇正確的外殼樣式
正如我在介紹中提到的，大小寫樣式是使代碼看起來不錯的最重要的概念之一，如果它是一致的。在 JavaScript 中，大小寫樣式有一些約定。
在命名對象、函數、變量和實例時使用 camelCase。
僅在命名構造函數或類時使用 PascalCase。
在命名不可重新分配的變量和枚舉時使用 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';
寫計算機可以理解的代碼一點也不難，然而，寫人類容易理解的代碼是具有挑戰性的。這就是為什么在寫程序上有一些基本規則，確實會造成好代碼和壞代碼之間的差異。
在本文中，我嘗試使用 AirBNB 的 JavaScript 樣式指南來分享我在編寫好的 JavaScript 代碼時必不可少的規則。這些是我的首選，但如果你看一下這個綜合風格指南，我相信你會發現一些你還不知道的東西。
最后，謝謝你們的閱讀。如果你喜歡它，請給我點贊。
