/

JavaScript 程式碼風格

JavaScript 程式碼風格

這個 JavaScript 程式碼風格是我在使用 JavaScript 時每天都遵循的一套規範。這是一份不斷更新的文件，我遵循的主要規則。

每種語言都有一套語法規則。

剛開始時，有些人可能會按照不破壞語言規則的方式將代碼添加到文件中，但卻不關心和注意編程風格。

這並不是因為他們不關心風格，而是因為他們還沒有足夠的經驗來認識其重要性。

我真的相信編程是一門藝術。就像繪畫、木工或任何涉及創造力的事情一樣，我們的程序可以做很多事情，但它們應該以一種有風格的方式進行。

我們有一些適用於所有編程語言的規則。

編程風格是與您自己和團隊達成的一種共識，以保持項目的一致性。

如果您沒有團隊，則這是一份與自己的共識，始終保持您的代碼達到您的標準。

在代碼編寫格式上設定固定規則有助於使代碼更易讀且易於管理。

常用的風格指南

這裡有幾個常用的風格指南，以下是 JavaScript 領域中最常見的兩個：

您可以選擇遵循其中之一，或者創建自己的風格指南。

始終與您所工作的項目保持一致

即使您偏好一套風格，但在項目中工作時，應該使用該項目的風格。

GitHub 上的開源項目可能遵循一套規則，您在團隊中的另一個項目可能遵循完全不同的規則。

Prettier 是一個很棒的工具，可以強制執行代碼格式，請使用它。

我的個人偏好

我對 JavaScript 風格的看法是：

始終使用最新的 ES 版本。如果需要支持舊瀏覽器，使用 Babel。

縮進：使用空格而不是制表符，縮進使用 2 個空格。

分號：不使用分號。

行長：盡量將行長限制在 80 個字符，如果可能的話。

行內注釋：在代碼中使用行內注釋。僅使用塊注釋進行文檔化。

無用代碼：不要註釋掉舊代碼，以防萬一將來會用到。僅保留您現在需要的代碼，版本控制/您的筆記應用程序是為此而設的。

僅在需要時進行注釋：不要添加不幫助理解代碼的注釋。如果代碼通過良好的變量和函數命名以及 JSDoc 函數注釋能夠自我解釋，則不需要添加注釋。

變量聲明：始終聲明變量以避免污染全局對象。不要使用 var。默認使用 const，僅在需要重新賦值變量時使用 let。

函數：除非有特殊原因需要使用常規函數（例如對象方法或構造函數），否則使用箭頭函數。將它們聲明為 const，如果可能的話使用隱式返回。

1
2
3
const test = (a, b) => a + b

const another = a => a + 2

可以自由使用嵌套函數將幫助函數隱藏在代碼的其餘部分中。

命名：函數名稱、變量名稱和方法名稱始終以小寫字母開頭（除非您將它們標識為私有，請參閱下文），並使用駝峰命名法。只有構造函數和類名應以大寫字母開頭。如果使用需要特定慣例的框架，請相應地更改您的習慣。文件名應全部小寫，單詞之間用 - 分隔。

語句特定的格式和規則：

if

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
if (condition) {
 statements
}

if (condition) {
 statements
} else {
 statements
}

if (condition) {
 statements
} else if (condition) {
 statements
} else {
 statements
}

for

始終在初始化中初始化長度以進行緩存，不要將其插入到條件中。

避免使用 for in，除非與 .hasOwnProperty() 搭配使用。優先使用 for of（參見 JavaScript 迴圈）

1
2
3
for (initialization; condition; update) {
 statements
}

while

1
2
3
while (condition) {
 statements
}

do

1
2
3
do {
 statements
} while (condition);

switch

1
2
3
4
5
6
switch (expression) {
 case expression:
 statements
 default:
 statements
}

try

1
2
3
4
5
6
7
8
9
10
11
12
13
try {
 statements
} catch (variable) {
 statements
}

try {
 statements
} catch (variable) {
 statements
} finally {
 statements
}

空格：明智地使用空格以提高可讀性：在關鍵字後面跟隨 ( 之前和之後；在二進制操作（+、-、/、*、&& 等）之前和之後；在 for 語句中，在每個 ; 之後以分隔語句的每個部分；在每個 , 之後。

換行符：使用換行符將執行具有邏輯相關操作的代碼塊分隔開來。

引號：優先使用單引號 ' 而不是雙引號 "。在 HTML 屬性中，雙引號是標準的，因此使用單引號有助於在處理 HTML 字符串時避免問題。在適當的情況下，使用模板字面量而不是變量插值。

tags: [“JavaScript”, “Coding Style”, “Best Practices”]