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

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

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

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

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

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

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

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

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

常用的風格指南

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

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

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

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

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

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

我的個人偏好

我對 JavaScript 風格的看法是:

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

縮進:使用空格而不是制表符,縮進使用 2 個空格。

分號:不使用分號。

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

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

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

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

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

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

const test = (a, b) => a + b

const another = a => a + 2

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

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

語句特定的格式和規則

if

if (condition) {
 statements
}

if (condition) {
 statements
} else {
 statements
}

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

for

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

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

for (initialization; condition; update) {
 statements
}

while

while (condition) {
 statements
}

do

do {
 statements
} while (condition);

switch

switch (expression) {
 case expression:
 statements
 default:
 statements
}

try

try {
 statements
} catch (variable) {
 statements
}

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

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

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

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