二十六、js樣式與代碼約定
1.代碼約定(Coding conventions)指的是編程的樣式指導方針。這些原則大體上包括：
·變量和函數的命名和聲明規則
·使用空格、縮進和註釋的規則
·編程習慣和準則
2. 代碼約定確保質量：
·改善代碼可讀性
·提升代碼可維護性
3.變量名：在 W3School，我們對標識符名稱（變量和函數）使用了駝峯式大小寫。所有名稱以字母開頭。
4. 運算符周圍的空格：請始終在運算符（ = + - * / ）周圍以及逗號之後添加空格
5. 代碼縮進：請始終使用對代碼塊縮進使用 4 個空格
6. 語句規則：請始終以分號結束單條語句
針對複雜語句（compound）的通用規則：
• 請在第一行的結尾處寫開括號
• 請在開括號前使用一個空格
• 請在新行上寫閉括號，不帶前導空格
• 請不要以分號來結束複雜語句
7. 對象規則
針對對象定義的通用規則：
• 把開括號與對象名放在同一行
• 在每個屬性與其值之間使用冒號加一個空格
• 不要在最後一個屬性值對後面寫逗號
• 請在新行上寫閉括號，不帶前導空格
• 請始終以分號結束對象定義
可以對短對象在一行中進行壓縮，只在屬性之間使用逗號，就像這樣：
var person = {firstName:"Bill", lastName:"Gates", age:50, eyeColor:"blue"};
8.行長度小於 80
爲了提高可讀性，請避免每行的長度超過 80 個字符。如果 JavaScript 語句超過一行的長度，換行的最佳位置是運算符或逗號之後。
9. 使用簡單的語法來加載外部腳本（type 屬性不是必需的）：
<script src="myscript.js"></script>
10.訪問 HTML 元素
使用“不整潔的” HTML 樣式的後果，也許是導致 JavaScript 錯誤。請在 HTML 中使用相同的命名約定（就像 JavaScript 那樣）
11. 請使用正確的文檔類型
請始終在文檔的首行聲明文檔類型：
<!DOCTYPE html>
如果您一貫堅持小寫標籤，那麼可以使用：
<!doctype html>
12.請使用小寫元素名
HTML5 允許在元素名中使用混合大小寫字母。
我們推薦使用小寫元素名：
• 混合大小寫名稱並不好
• 開發者習慣使用小寫名（比如在 XHTML 中）
• 小寫更起來更純淨
• 小寫更易書寫
<section>
<p>This is a paragraph.</p>
</section>
13.關閉所有 HTML 元素
在 HTML5 中，您不必關閉所有元素（例如
元素）。
我們建議關閉所有 HTML 元素：
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>
14.關閉所有 HTML 元素
在 HTML5 中，關閉空元素是可選的。
<meta charset="utf-8" />
斜槓（/）在 XHTML 和 XML 中是必需的。
如果您期望 XML 軟件來訪問您的頁面，保持這個習慣是個好主意。
15. 使用小寫屬性名
HTML5 允許大小寫混合的屬性名。
我們建議使用小寫屬性名：
• 混合屬性名並不好
• 開發者習慣於使用小寫屬性名（比如在 XHTML 中）
• 小寫屬性名看情況更純淨
• 小寫屬性名更易書寫
16. 屬性值加引號
HTML5 允許不加引號的屬性值。
我們推薦屬性值加引號：
• 如果屬性值包含值，則必須使用引號
• 混合樣式絕對不好
• 加引號的值更易閱讀
17. 必需的屬性
請始終對圖像使用 alt 屬性。當圖像無法顯示時該屬性很重要。
請始終定義圖像尺寸。這樣做會減少閃爍，因爲瀏覽器會在圖像加載之前爲圖像預留空間。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
18.我們不推薦省略 和 標籤。
19. <title> 元素在 HTML5 中是必需的。請儘可能製作有意義的標題。爲了確保恰當的解釋，以及正確的搜索引擎索引，在文檔中對語言和字符編碼的定義越早越好：
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>HTML5 Syntax and Coding Style</title>
</head>
20.HTML 註釋
短註釋應該在單行中書寫，並在 <!-- 之後增加一個空格，在 <!-- 之前增加一個空格：
<!-- This is a comment -->
長註釋，跨越多行，應該通過 <!--和--> 在獨立的行中書寫：
<!--
This is a long comment example. This is a long comment example. This is a long comment example.
This is a long comment example. This is a long comment example. This is a long comment example.
-->
長註釋更易觀察，如果它們被縮進兩個空格的話。
21. 樣式表
請使用簡單的語法來鏈接樣式表（type 屬性不是必需的）：
<link rel="stylesheet" href="styles.css">
短規則可以壓縮爲一行，就像這樣：
p.into {font-family:"Verdana"; font-size:16em;}
長規則應該分爲多行：
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}
• 開括號與選擇器位於同一行
• 在開括號之前用一個空格
• 使用兩個字符的縮進
• 在每個屬性與其值之間使用冒號加一個空格
• 在每個逗號或分號之後使用空格
• 在每個屬性值對（包括最後一個）之後使用分號
• 只在值包含空格時使用引號來包圍值
• 把閉括號放在新的一行，之前不用空格
• 避免每行超過 80 個字符
22. 使用小寫文件名
大多數 web 服務器（Apache、Unix）對文件名的大小寫敏感：
不能以 london.jpg 訪問 London.jpg。
其他 web 服務器（微軟，IIS）對大小寫不敏感：
能夠以 london.jpg 或 London.jpg 訪問 London.jpg。
如果使用混合大小寫，那麼您必須保持高度的一致性。
如果您從對大小寫不敏感的服務器轉到一臺對大小寫敏感的服務器上，這些小錯誤將破壞您的網站。
爲了避免這些問題，請始終使用小寫文件名（如果可以的話）
23. 文件擴展名
HTML 文件名應該使用擴展名 .html（而不是 .htm）。
CSS 文件應該使用擴展名 .css。
JavaScript 文件應該使用擴展名 .js。
