最新的Web開發教程
 

JavaScript風格指南和編碼約定

❮上一頁 下一頁章❯

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

JavaScript編碼約定

編碼約定編程風格指南 。 他們通常包括：

  • 命名和申報規則變量和函數。
  • 規則使用空格，縮進和評論。
  • 編程實踐和原則

編碼規範安全質量 ：

  • 提高代碼的可讀性
  • 使代碼維護更輕鬆

編碼約定可以記錄規則，團隊跟隨，或者只是你個人的編程習慣。

本頁面描述了w3ii使用的通用JavaScript代碼約定。
你也應該閱讀下一章“最佳實踐”，並學會如何避免編碼陷阱。

變量名

在w3ii我們使用駝峰的標識符名稱（變量和函數）。

所有名稱以字母開頭 。

在這個頁面的底部，你會發現有關命名規則的更廣泛的討論。

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

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);
}

不要縮進使用製表符（製表）。 不同的編輯解釋標籤不同。

聲明規則

對於簡單的語句一般規則：

  • 始終以分號結束一個簡單的語句。

例子：

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 < 5; 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個字符的行。

如果一個JavaScript語句不適合在一行，最好的地方，打破它，是一個運算符或逗號之後。

例

document.getElementById("demo").innerHTML =
    "Hello Dolly.";
試一試»

命名約定

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

  • 變量和函數名寫為駝峰
  • 寫大寫全局變量（我們不這樣做，但它是很常見的）
  • 常量（如PI）寫成大寫

如果您使用HYP-母雞 ， 駝峰 ，或under_scores在變量名？

這是一個問題的程序員經常討論。 答案取決於你問誰：

連字符的HTML和CSS：

HTML5屬性可以使用數據 - （數據量，數據價格）開始。

CSS使用的財產的名稱（字號）連字符。

連字符可以被誤認為企圖減法。 連字符在JavaScript的名字不允許的。

強調：

許多程序員喜歡使用下劃線（DATE_OF_BIRTH），尤其是在SQL數據庫。

下劃線往往PHP文檔中使用。

PascalCase：

PascalCase往往是由C程序員首選。

駝峰：

駝峰是由JavaScript本身的jQuery和其他JavaScript庫使用。

不要用$符號開頭的名稱。 這將讓你在衝突中有許多JavaScript庫的名稱。

在HTML中加載JavaScript

使用簡單的語法，用於加載外部腳本（type屬性是沒有必要的）：

<script src="myscript.js">

訪問HTML元素

使用“凌亂”HTML樣式的後果，可能會導致JavaScript錯誤。

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

var obj = getElementById("Demo")

var obj = getElementById("demo")

如果可能的話，使用HTML相同的命名約定（如JavaScript）。

訪問HTML風格指南 。

文件擴展名

HTML文件應該有一個.html擴展名（不熱媒 ）。

CSS文件應該有一個擴展名為.css。

JavaScript文件應該有一個.js擴展。

使用小寫文件名

大多數Web服務器（Apache的，UNIX）的有關文件名大小寫敏感：

london.jpg不能作為訪問London.jpg 。

其他Web服務器（微軟，IIS）是不區分大小寫：

london.jpg可以作為被訪問London.jpg或london.jpg 。

如果使用大小寫混合，你必須非常一致。

如果你從一個不敏感的情況下，要區分大小寫的服務器移動，甚至小錯誤可以打破你的網站。

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

性能

編碼約定不使用的計算機。 大多數規則對程序的執行沒有什麼影響。

縮進和多餘的空格不小的腳本顯著。

對於開發代碼，可讀性應該是首選。 較大的生產腳本應該精縮。


❮上一頁 下一頁章❯