《Web前端開發最佳實踐》——2.6 前端代碼基本命名規範和格式規範

本節書摘來自華章計算機《web前端開發最佳實踐》一書中的第2章，第2.6節,作者:黨　建 更多章節内容可以通路雲栖社群“華章計算機”公衆号檢視。

命名規範和格式規範是代碼規範中最基本的規範，任何代碼的混亂都是從命名和格式的混亂開始的，而意義明确的命名和規整的代碼格式則提高了代碼的可讀性與可維護性，給代碼的閱讀者和維護者留下了良好的第一印象。命名規範和格式規範沒有一個統一的标準，不同的人可能有不同的認識，但是在同一個項目中，必須嚴格遵守統一的命名和格式規範。以下推薦的規範是在實際項目中認同度較高的代碼規範，供讀者參考。

2.6.1　html命名規範及格式規範

html代碼所有的标簽名和屬性應該都為小寫，雖然html代碼是不區分大小寫的，但是w3c的規範建議小寫；屬性值應該使用雙引号閉合。

不推薦示例：

給所有的關鍵元素定義元素的id和class，便于和css、javascript互動。因為id名稱和class名稱有可能作為檢索值用在javascript代碼中，是以命名一定要規範，這樣才能保證不會出現不必要的重複而導緻bug的産生。

推薦的做法是根據語義和dom樹的層級關系來定義合适的名稱，名稱中全部使用小寫，id名稱中的關鍵詞用下劃線（_）連接配接，class的關鍵詞用中劃線（–）連接配接，這樣可以最大限度地保證命名的不重複。

推薦示例：

如果class名稱僅作為javascript調用的“鈎子”，則可在名稱中添加“js”字首。

示例代碼：

html代碼的層級縮進為4個空格。如果元素包含子元素，則此元素對應的起始标簽和閉合标簽分别單獨占用一行。

給html代碼添加必要的注釋。頁面html代碼的注釋不宜過多，添加的原則是在保證代碼維護性的基礎上盡量讓html代碼簡潔。基于這樣的原則，可以在頁面的公共部分（如頁面的頭部、尾部以及側邊欄等）、頁面經常變化的部分（如廣告欄）以及需要後端代碼注入的部分添加注釋。注釋添加的位置在要注釋的代碼上部并單獨占用一行，不要在代碼行的後面直接添加。

2.6.2　css命名規範及格式規範

推薦的css類的命名規則和元素的id命名規則相似，隻是組成類名稱的關鍵字的連接配接符為中劃線（–）。

為了避免class命名的重複，命名時取父元素的class名作為字首。

在css樣式定義中，左大括号放置在選擇器的同一行，并和選擇器之間添加一個空格分隔，在保證可讀性的基礎上縮短代碼的行數；在樣式聲明中，屬性名稱和值之間用一個空格分隔，提高代碼可讀性。

/不推薦示例：多個選擇器具有相同的樣式聲明時，所有選擇器放置于同一行/

h1,h2,h3 {

font-weight: normal;

line-height: 1.2;

}

/推薦示例：多個選擇器具有相同的樣式聲明時，每個選擇器應該單獨占一行/

h1,

h2,

h3 {

/樣式聲明的順序以字母序排列/

.reader-content-title {

background: #fff;

border: 1px solid;

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

border-radius: 4px;

color: black;

text-align: center;

/ reader header/

.reader-header-title {

.reader-header-introduce {

/reader footer/

.reader-footer-copyright{

.reader-footer-links {

/ 注釋規範說明：檔案頭部的檔案資訊注釋 /

/*!

reader content v1.0

*

copyright 2012

dual licensed under the mit or gpl version 2 licenses.

designed and built by dangjian

*/

/ 注釋規範說明：子產品樣式定義的開始和結束 /

/ content containers start /

/ 注釋規範說明：注釋需要添加在選擇器的上一行，而不是和選擇器相同一行 /

/ content title /

...

/ content containers end /

// 不推薦示例：變量命名首字母大寫

var readerbookmark = 'bookmark';

// 不推薦示例：變量命名意義不明确

var object = {};

// 不推薦示例：變量命名以類型作為字首

var strname = 'note';

// 不推薦示例：變量命名使用語義不明确的縮寫

var newnt = function(){

// 推薦示例：變量命名語義明确

var bookmarkdefaulttitle = 'untitled bookmark';

reader.content = function(){

// 私有變量

var info, title;

// 私有方法

var getcontent = function(){

};

return {

}();

var $toctitle = $('.reader-toc-title');

//左大括号應該在行的結束位置，而不應該單獨一行

for (var i=0; i<100; i++) {

//應該一直使用大括号括起邏輯塊，即使邏輯隻有一行

var isfound = false;

if (statement) {

isfound = true;

var content = '…';

dosomething(mychar, 0, 1);

while (x === y){

return

{

a + b

// return 後面會添加一個分号

return ；

var b = function(){

return function(){return 1}

var a = b

(function(){

})()

var a = b(function(){

/ 檔案頭部的檔案資訊注釋 /

reader.content = (function(){

})();