JavaScript 編碼規範
所有 JavaScript 專案請始終使用相同的編碼規範。
JavaScript 編碼規範
編碼規範是程式設計的風格指南。它們通常涵蓋：
- 變數和函式的命名及宣告規則。
- 空格、縮排和註釋的使用規則。
- 程式設計實踐和原則。
編碼規範確保質量：
- 提高程式碼可讀性
- 使程式碼維護更容易
編碼規範可以是團隊遵循的文件化規則，也可以只是您個人的編碼習慣。
本頁介紹了 W3Schools 使用的通用 JavaScript 編碼規範。
您還應該閱讀下一章“最佳實踐”，瞭解如何避免編碼陷阱。
變數名
在 W3schools，我們使用 駝峰式命名法 (camelCase) 作為識別符號名稱（變數和函式）。
所有名稱都以字母開頭。
在本頁底部，您將找到關於命名規則的更廣泛討論。
firstName = "John";
lastName = "Doe";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);
運算子周圍的空格
始終在運算子（= + - * /）周圍和逗號後新增空格
示例
let x = y + z;
const myArray = ["Volvo", "Saab", "Fiat"];
程式碼縮排
程式碼塊縮排始終使用 2 個空格
函式
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
請勿使用製表符進行縮排。不同的編輯器對製表符的解釋不同。
語句規則
簡單語句的通用規則
- 簡單語句始終以分號結束。
示例
const cars = ["Volvo", "Saab", "Fiat"];
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
複雜（複合）語句的通用規則
- 將開括號放在第一行的末尾。
- 在開括號前使用一個空格。
- 將閉括號放在新行上，不帶前導空格。
- 複雜語句不以分號結束。
函式
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
迴圈
for (let i = 0; i < 5; i++) {
x += i;
}
條件語句
if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
物件規則
物件定義的通用規則
- 將開括號放在物件名稱的同一行。
- 在每個屬性及其值之間使用冒號加一個空格。
- 字串值使用引號，數字值不使用引號。
- 最後一個屬性-值對後不加逗號。
- 將閉括號放在新行上，不帶前導空格。
- 物件定義始終以分號結束。
示例
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
短物件可以壓縮寫在一行上，只在屬性之間使用空格，如下所示
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
行長度 < 80
為提高可讀性，避免行長超過 80 個字元。
如果 JavaScript 語句不適合一行，最佳換行位置是在運算子或逗號之後。
命名約定
始終對所有程式碼使用相同的命名約定。例如：
- 變數和函式名稱以駝峰式命名法 (camelCase) 編寫
- 全域性變數以大寫字母 (UPPERCASE) 編寫（我們不這樣做，但這很常見）
- 常量（如 PI）以大寫字母 (UPPERCASE) 編寫
變數名稱應該使用連字元 (hyp-hens)、駝峰式命名法 (camelCase) 還是下劃線 (under_scores)？
這是程式設計師經常討論的問題。答案取決於您問誰：
HTML 和 CSS 中的連字元
HTML5 屬性可以以 data- 開頭（data-quantity, data-price）。
CSS 在屬性名稱中使用連字元（font-size）。
連字元可能被誤認為是減法操作。JavaScript 名稱中不允許使用連字元。
下劃線
許多程式設計師喜歡使用下劃線（date_of_birth），尤其是在 SQL 資料庫中。
PHP 文件中經常使用下劃線。
帕斯卡命名法 (PascalCase)
C 程式設計師通常更喜歡帕斯卡命名法 (PascalCase)。
駝峰式命名法 (camelCase)
JavaScript 本身、jQuery 和其他 JavaScript 庫都使用駝峰式命名法 (camelCase)。
不要以 $ 符號開頭命名。這會與許多 JavaScript 庫的名稱衝突。
在 HTML 中載入 JavaScript
使用簡單的語法載入外部指令碼（不需要 type 屬性）
<script src="myscript.js"></script>
訪問 HTML 元素
使用“不整潔”的 HTML 樣式可能會導致 JavaScript 錯誤。
這兩個 JavaScript 語句將產生不同的結果：
const obj = getElementById("Demo")
const obj = getElementById("demo")
如果可能，請在 HTML 中使用與 JavaScript 相同的命名約定。
副檔名
HTML 檔案應使用 .html 副檔名（允許使用 .htm）。
CSS 檔案應使用 .css 副檔名。
JavaScript 檔案應使用 .js 副檔名。
使用小寫檔名
大多數 Web 伺服器（Apache、Unix）對檔名區分大小寫
london.jpg 無法透過 London.jpg 訪問。
其他 Web 伺服器（Microsoft、IIS）不區分大小寫
london.jpg 可以透過 London.jpg 或 london.jpg 訪問。
如果您混合使用大小寫，則必須保持極度一致。
如果您從不區分大小寫的伺服器遷移到區分大小寫的伺服器，即使是很小的錯誤也可能導致您的網站崩潰。
為避免這些問題，請始終使用小寫檔名（如果可能）。
效能
編碼規範不受計算機使用。大多數規則對程式的執行影響很小。
縮排和額外空格在小型指令碼中不重要。
對於開發中的程式碼，應優先考慮可讀性。較大的生產指令碼應進行最小化處理。
