JS 程式碼規範

• 所有的 JS 專案適用同一種規範

JS 程式碼規範

• 程式碼規範通常包括以下幾個方面
  • 變數和函式的命名規則
  • 空格、縮排、註釋的使用規則
  • 其它常用規範
• 程式碼規範一般在開發前規定，可以跟你的團隊成員來協商設定

變數名

• 變數名推薦用駝峰法來命名（camelCase）

firstName = "John";
lastName = "Doe";

price = 19.98;
tax = 0.20;

fullPrice = price + (price * tax);

空格與運算子

• 通常運算子（= + - * /）前後需要新增空格

var x = y + z;
var values = ["Volvo","Saab","Fiat"];

程式碼縮排

• 通常使用 4 個空格符號來縮排程式碼塊：

function toCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}

• 注意：不推薦使用 Tab 鍵來縮排，因為不同編輯器 Tab 鍵的解析不一樣

語句規則

• 簡單語句的通用規則
  • 一條語句通常以分號作為結束符

var values = ["Volvo","Saab","Fiat"];
var person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
};
 

• 複雜語句的通用規則
  • 將左花括號放在第一行的結尾
  • 左花括號前新增一個空格額
  • 將右花括號獨立放在一行
  • 不要以分號結束一個複雜的宣告

函式

function toCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}

迴圈

for (i = 0; i < 10; i++) {
    x += i;
}

條件語句

if (time < 20) {
    greeting = "Good day";
} else {
    greeting = "Good evening";
}
 

物件規則

• 物件定義的規則
  • 將左花括號與類名放在同一行
  • 冒號與屬性值間有個空格
  • 字串使用雙引號，數字不需要
  • 最後一個屬性-值後面不要新增逗號
  • 將右花括號獨立放在一行，並以分號作為結束符

var person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
};

• 短的物件程式碼可以直接寫成一行

var person = {firstName: "John",lastName: "Doe",age: 50,eyeColor: "blue"};

每行程式碼小於 80 字元

• 每行字元數建議小於 80 個
• 如果一個 JS 語句超過了 80 個字元，建議在運算子或者逗號後換行

document.getElementById("demo").innerHTML = 
    "Hello World";

命名規則

• 一般很多程式碼語言的命名規則都是類似的，例如：
  • 變數和函式使用駝峰法命名，即除第一個單詞之外，其他單詞首字母大寫（lowerCamelCase）
  • 全域性變數為大寫（UPPERCASE）
  • 常量（例如 PI）為大寫（UPPERCASE）
• 變數命名還可以使用下劃線（under_scores）
• HTML 和 CSS 的橫槓（-）字元
  • HTML5 屬性可以用 data-（例如：data-quantity，data-price）作為字首
  • CSS 使用 - 來連線屬性名（font-size）
  • 橫槓 - 在 JS 中通常認為是減法，所以在 JS 中不允許使用橫槓 - 來命名變數和函式
• 變數名不要以 $ 作為開始標記，會和很多 JS 庫衝突

副檔名

• HTML 檔案字尾可以是 .html 或者 .htm
• CSS 檔名字尾是 .css
• JavaScrippt 檔案字尾是 .js

使用小寫檔名

• 大多 Web 伺服器 (Apache, Unix) 對大小寫敏感： london.jpg 不能通過 London.jpg 訪問
• 其他 Web 伺服器 (Microsoft, IIS) 對大小寫不敏感： london.jpg 可以通過 London.jpg 或 london.jpg 訪問
• 你必須保持統一的風格，我們建議統一使用小寫的檔名