課程表

JS 教程

JS 版本

JS 對象

JS 函數

JS 類

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs jQuery

JS 圖形

JS 實例

JS 參考手冊

選修課

課程推薦：

CodeW3C.com 百寶箱

JavaScript 樣式指南

請始終為您所有的 JavaScript 項目使用相同的代碼約定。

JavaScript 代碼約定

代碼約定(Coding conventions)指的是編程的樣式指導方針。這些原則大體上包括：

變量和函數的命名和聲明規則
使用空格、縮進和注釋的規則
編程習慣和準則

代碼約定確保質量：

改善代碼可讀性
提升代碼可維護性

代碼約定可以是團隊遵守的成文規則，也可以是您個人的編碼習慣。

本頁介紹 CodeW3C.com 使用的通用 JavaScript 代碼約定。

您應該繼續閱讀下一章“最佳實踐”，學習如何避免編碼陷阱。

變量名

在 CodeW3C.com，我們對標識符名稱（變量和函數）使用了駝峰式大小寫。

所有名稱以字母開頭。

在本頁的底部，我們會更廣泛地討論命名規則。

firstName = "Bill";
lastName = "Gates";
price = 19.90;
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 的解釋也不盡相同。

語句規則

簡單語句的通用規則：

請始終以分號結束單條語句：

實例

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

針對復雜語句（compound）的通用規則：

請在第一行的結尾處寫開括號
請在開括號前使用一個空格
請在新行上寫閉括號，不帶前導空格
請不要以分號來結束復雜語句

函數：

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

循環：

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

條件：

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

對象規則

針對對象定義的通用規則：

把開括號與對象名放在同一行
在每個屬性與其值之間使用冒號加一個空格
不要在最后一個屬性值對后面寫逗號
請在新行上寫閉括號，不帶前導空格
請始終以分號結束對象定義

實例

var person = {
    firstName: "Bill",
    lastName: "Gates",
    age: 19,
    eyeColor:  "blue"
};

可以對短對象在一行中進行壓縮，只在屬性之間使用空格，就像這樣：

var person = {firstName:"Bill", lastName:"Gates", age:50, eyeColor:"blue"};

行長度小于 80

為了提高可讀性，請避免每行的長度超過 80 個字符。

如果 JavaScript 語句超過一行的長度，換行的最佳位置是運算符或逗號之后。

實例

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

親自試一試

命名約定

請始終對您所有的代碼使用相同的命名約定。例如：

變量和函數名以駝峰大小寫來寫
全局變量使用大寫（我們不這樣做，但是相當普遍）
常量（比如 PI）使用大寫

我們是否應在變量名中使用連字符、駝峰大小寫或下劃線嗎？

這是程序員們經常討論的問題。答案取決于這個問題是誰回答的：

HTML 和 CSS 中的連字符：

HTML5 屬性能夠以 data- 開頭（data-quantity, data-price）。

CSS 在 property-names 中使用連字符（font-size）。

Hyphens 可被錯誤地視為減法運算符。JavaScript 命名不允許使用連字符。

下劃線：

許多程序員喜歡使用下劃線（date_of_birth），特別是在 SQL 數據庫中。

下劃線經常被用在 PHP 參考資料中。

帕斯卡命名法（PascalCase）：

C 語言程序員經常使用帕斯卡命名法。

駝峰大小寫（camelCase）：

JavaScript 本身、jQuery 以及其他 JavaScript 庫使用駝峰大小寫。

JavaScript 命名請不要以 $ 符號開頭。此舉會引起 JavaScript 庫名稱沖突。

在 HTML 中加載 JavaScript

使用簡單的語法來加載外部腳本（type 屬性不是必需的）：

<script src="myscript.js"></script>

訪問 HTML 元素

使用“不整潔的” HTML 樣式的后果，也許是導致 JavaScript 錯誤。

這兩條 JavaScript 語句會產生不同的結果：

var obj = getElementById("Demo")
var obj = getElementById("demo")

如果可能，請在 HTML 中使用相同的命名約定（就像 JavaScript 那樣）。

訪問 HTML 樣式指南。

文件擴展名

HTML 文件應該使用 .html 擴展名（而非 .htm）。

CSS 文件應該使用 .css 擴展名。

JavaScript 文件應該使用 .js 擴展名。

使用小寫文件名

大多數 web 服務器（Apache、Unix）對文件名的大小寫敏感：

london.jpg 無法視作 London.jpg 進行訪問。

其他 web 服務器（微軟的 IIS）對大小寫不敏感：

london.jpg 能夠以 London.jpg 或 london.jpg 來訪問。

如果您混合使用大小寫，則必須嚴格保持連續和一致。

如果您將站點從大小寫不敏感的服務器轉移至對大小寫敏感的服務器，即使這種小錯誤也可能破壞您的網站。

為了避免這些問題，請始終使用小寫文件名（如果可能）。

性能

計算機不會使用代碼約定。大部分規則對程序的執行影響很小。

縮進和額外的空格對小段腳本并不重要。

對于開發中的腳本，應該優先考慮可讀性。應該縮小更大型的生產腳本。

課程表