這個 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 字符串時避免問題。在適當的情況下,使用模板字面量而不是變量插值。