一辛藻、文件命名
文件名不得含有空格
文件名建議只使用小寫字母，不使用大寫字母互订。( 為了醒目吱肌，某些說明文件的文件名，可以使用大寫字母屁奏，比如README岩榆、LICENSE错负。 )
文件名包含多個(gè)單詞時(shí)坟瓢，單詞之間建議使用半角的連詞線 ( - ) 分隔。
引入資源使用相對(duì)路徑犹撒，不要指定資源所帶的具體協(xié)議 ( http:,https: ) 折联，除非這兩者協(xié)議都不可用。
//不推薦：
<script src="http://cdn.com/foundation.min.js"></script>
// 推薦：
<script src="http://cdn.com/foundation.min.js"></script>
1.Js 文件命名規(guī)范
- 字母全部小寫
- 不要帶空格
- 用破折號(hào)（-）連接單詞
- 庫(kù)文件可用逗點(diǎn)（.）识颊，用于體現(xiàn)版本或從屬關(guān)系
示例： - vue.min.js
- vue-router.js
- jquery.form.js
- jquery-1.4.2.min.js
文件夾及文件命名
用簡(jiǎn)短有意義的英文或者拼音（不能出現(xiàn)中文命名）來命名诚镰。
①文件夾命名規(guī)則: 全部小寫。例如(emotions, download, mail)祥款。
②html,js,css文件命名規(guī)則: 第一個(gè)單詞首字母小寫,之后每個(gè)單詞首字母大寫,html文件后綴名統(tǒng)一為.htm清笨。例如(index.htm, customizeCity.htm, register.js, dateSelect.js, base.css, mapApply.css)。
③圖片命名規(guī)則: 第一個(gè)單詞首字母小寫,之后每個(gè)單詞首字母大寫,或者全部小寫,單詞間用下劃線連接刃跛。例如(btn_sign.gif, bgTipBox.png)抠艾。
二、HTML命名規(guī)范及格式規(guī)范
HTML代碼所有的標(biāo)簽名和屬性應(yīng)該都為小寫桨昙，雖然HTML代碼是不區(qū)分大小寫的检号，但是W3C的規(guī)范建議小寫；屬性值應(yīng)該使用雙引號(hào)閉合蛙酪。
<!--不推薦示例：標(biāo)簽名稱大寫齐苛，或者大小寫混合；屬性值沒有用雙引號(hào)閉合-->
<IMG src=demo.jpg alt='test' />
推薦示例：
<!—推薦示例：標(biāo)簽名稱小寫桂塞；屬性值用雙引號(hào)閉合-->
<img src="demo.jpg" alt="test" />
給所有的關(guān)鍵元素定義元素的id和class凹蜂，便于和CSS、JavaScript交互阁危。因?yàn)閕d名稱和class名稱有可能作為檢索值用在JavaScript代碼中炊甲，所以命名一定要規(guī)范，這樣才能保證不會(huì)出現(xiàn)不必要的重復(fù)而導(dǎo)致Bug的產(chǎn)生欲芹。
推薦的做法是根據(jù)語義和DOM樹的層級(jí)關(guān)系來定義合適的名稱卿啡，名稱中全部使用小寫，id名稱中的關(guān)鍵詞用下劃線（_）連接菱父，class的關(guān)鍵詞用中劃線（–）連接颈娜，這樣可以最大限度地保證命名的不重復(fù)剑逃。
<!--不推薦示例：命名簡(jiǎn)單隨意，很難保證命名不重復(fù)-->
<div id="Reader">
<div id="introduce" class="Introduce ">
…
</div>
</div>
<!--推薦示例：根據(jù)語義以及上下層級(jí)關(guān)系定義名稱-->
<div id="reader">
<div id="reader_introduce" class="reader-introduce">
…
</div>
</div>
如果class名稱僅作為JavaScript調(diào)用的“鉤子”官辽，則可在名稱中添加“js”前綴蛹磺。
示例代碼：
<!--class名稱僅作為JavaScript調(diào)用的"鉤子"，可在名稱中添加"js"前綴-->
<ul id="js_reader_menu">
<li class="menu-toc js-active">Toc</li>
<li class="menu-store js-active">Store</li>
<li class="menu-library">Library</li>
<li class="menu-news">News</li>
</ul>
HTML代碼的層級(jí)縮進(jìn)為4個(gè)空格同仆。如果元素包含子元素萤捆，則此元素對(duì)應(yīng)的起始標(biāo)簽和閉合標(biāo)簽分別單獨(dú)占用一行。
<!--不推薦示例：標(biāo)簽樹形層級(jí)之間沒有縮進(jìn)或者縮進(jìn)混亂-->
<ul>
<li>item1</li><li>item2</li>
<li>item3</li><li>item4</li></ul>
推薦示例：
<!--推薦示例：利用縮進(jìn)體現(xiàn)元素的層級(jí)關(guān)系-->
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
給HTML代碼添加必要的注釋俗批。頁(yè)面HTML代碼的注釋不宜過多俗或，添加的原則是在保證代碼維護(hù)性的基礎(chǔ)上盡量讓HTML代碼簡(jiǎn)潔∷晖基于這樣的原則辛慰，可以在頁(yè)面的公共部分（如頁(yè)面的頭部、尾部以及側(cè)邊欄等）干像、頁(yè)面經(jīng)常變化的部分（如廣告欄）以及需要后端代碼注入的部分添加注釋帅腌。注釋添加的位置在要注釋的代碼上部并單獨(dú)占用一行，不要在代碼行的后面直接添加麻汰。
示例代碼：
<body>
<!--main header-->
<div id="reader_header">
...
</div>
<!--main content-->
<div id="reader_content">
...
<!--動(dòng)態(tài)綁定列表: toc-->
<ul id="reader_content_toc">
</ul>
</div>
<!--main footer-->
<div id="reader_footer">
...
</div>
</body>
三速客、CSS命名規(guī)范及格式規(guī)范
推薦的CSS類的命名規(guī)則和元素的id命名規(guī)則相似，只是組成類名稱的關(guān)鍵字的連接符為中劃線
示例代碼：
.reader-content-title {
...
}
為了避免class命名的重復(fù)五鲫，命名時(shí)取父元素的class名作為前綴溺职。
/* 父元素的樣式聲明 */
.reader-content {
...
}
/* 子元素的class名稱以父元素中的class名稱作為前綴 */
.reader-content-body {
...
}
在CSS樣式定義中，左大括號(hào)放置在選擇器的同一行臣镣，并和選擇器之間添加一個(gè)空格分隔辅愿，在保證可讀性的基礎(chǔ)上縮短代碼的行數(shù)；在樣式聲明中忆某，屬性名稱和值之間用一個(gè)空格分隔点待，提高代碼可讀性。
/* 不推薦示例：CSS樣式定義中的左大括號(hào)單獨(dú)占一行弃舒；樣式聲明沒有縮進(jìn)或縮進(jìn)混亂癞埠；屬性名稱和值之間沒有用空格分隔*/
.reader-content-title
{
background:#FFF;
...
}
/* 推薦示例：CSS樣式定義中的左大括號(hào)放置在選擇器的同一行；樣式聲明中屬性名稱和值之間用一個(gè)空格分隔*/
.reader-content-title {
background: #FFF;
...
}
多個(gè)選擇器具有相同的樣式聲明時(shí)聋呢，每個(gè)選擇器應(yīng)該單獨(dú)占一行苗踪，便于閱讀和維護(hù)。
示例：
//不推薦示例：多個(gè)選擇器具有相同的樣式聲明時(shí)削锰，所有選擇器放置于同一行/
h1,h2,h3 {
font-weight: normal;
line-height: 1.2;
}
//推薦示例：多個(gè)選擇器具有相同的樣式聲明時(shí)通铲，每個(gè)選擇器應(yīng)該單獨(dú)占一行/
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}
樣式聲明的順序按字母順序排列，不考慮瀏覽器前綴器贩。單純靠手寫代碼并保證樣式聲明按照一定的順序是不現(xiàn)實(shí)的颅夺。建議使用一些CSS美化工具做樣式聲明排序的工作朋截。
示例代碼：
/樣式聲明的順序以字母序排列/
.reader-content-title {
background: #FFF;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
}
樣式定義按照模塊來分組，相同模塊的樣式定義放在一起吧黄，不同模塊的定義之間用一個(gè)空行分割部服。
示例代碼：
// reader header/
.reader-header-title {
...
}
.reader-header-introduce {
...
}
//reader footer/
.reader-footer-copyright{
...
}
.reader-footer-links {
...
}
CSS中的注釋非常重要，能對(duì)CSS樣式起到解釋和說明的作用拗慨，提高了CSS代碼的可讀性廓八。有些開發(fā)者可能擔(dān)心添加過多的注釋會(huì)讓CSS文件行數(shù)增多，其實(shí)不用擔(dān)心赵抢，可以在發(fā)布網(wǎng)站的時(shí)候?qū)SS文件進(jìn)行壓縮剧蹂，這個(gè)過程中會(huì)去掉所有的注釋。在CSS樣式文件中添加注釋主要有兩種類型：文件頭部的文件信息注釋和正文中的解釋說明性注釋昌讲。文件信息一般包括文件版本国夜、版權(quán)信息以及作者等减噪；解釋說明性的注釋有給模塊的注釋和單獨(dú)給選擇器的注釋短绸，模塊的注釋則需要添加注釋表明模塊樣式定義的開始和結(jié)束，CSS選擇器的注釋需要添加在選擇器的上一行筹裕，而不是和選擇器相同一行醋闭。
示例代碼：
/ 注釋規(guī)范說明：文件頭部的文件信息注釋 /
/*!
reader content v1.0
*
Copyright 2012
Dual licensed under the MIT or GPL Version 2 licenses.
*
Designed and built by dangjian
*/
/ 注釋規(guī)范說明：模塊樣式定義的開始和結(jié)束 /
/ Content containers start /
/ 注釋規(guī)范說明：注釋需要添加在選擇器的上一行，而不是和選擇器相同一行 /
/ content title /
.reader-content-title {
...
}
...
/ Content containers end /
四朝卒、JavaScript命名規(guī)范及格式規(guī)范
JavaScript局部變量命名采用首字母小寫证逻，其他單詞首字母大寫的方式。命名時(shí)建議采用有意義的單詞命名抗斤，不推薦使用標(biāo)識(shí)變量類型的前綴囚企，如int、str瑞眼、obj等龙宏。不推薦使用單詞縮寫命名，變量以縮寫命名則降低了其可讀性伤疙。如果認(rèn)為變量名太長(zhǎng)而使JavaScript腳本文件變大银酗，則可以在發(fā)布階段通過JavaScript腳本混淆壓縮等手段來縮小文件。
不推薦示例：
// 不推薦示例：變量命名首字母大寫
var ReaderBookmark = 'bookmark';
// 不推薦示例：變量命名意義不明確
var object = {};
// 不推薦示例：變量命名以類型作為前綴
var strName = 'Note';
// 不推薦示例：變量命名使用語義不明確的縮寫
var newNT = function(){
…
}
推薦示例：
// 推薦示例：變量命名語義明確
var bookmarkDefaultTitle = 'Untitled Bookmark';
現(xiàn)在流行JavaScript的面向?qū)ο缶幊掏较瘢敲淳蜁?huì)有公有或私有接口的概念黍特。原則上公有接口的命名為首字母大寫，私有接口的命名為首字母小寫锯蛀。
示例代碼：
Reader.Content = function(){
// 私有變量
var info, title;
// 私有方法
var getContent = function(){
...
};
return {
// 公有方法
SetTitle: function(contentTitle){
title = contentTitle;
},
// 公有屬性
ContentInfo: info
}
}();
jQuery框架在項(xiàng)目中使用廣泛灭衷，推薦給jQuery類型變量添加“$”作為前綴。
示例代碼：
var $tocTitle = $('.reader-toc-title');
左大括號(hào)應(yīng)該在行的結(jié)束位置旁涤，而不應(yīng)該單獨(dú)一行翔曲，因?yàn)檫@樣增加了不必要的行數(shù)经备。應(yīng)該一直使用大括號(hào)括起邏輯塊，即使邏輯只有一行部默，也應(yīng)該用大括號(hào)括起來侵蒙，以便提高代碼的可讀性和可維護(hù)性。
示例代碼：
//左大括號(hào)應(yīng)該在行的結(jié)束位置傅蹂，而不應(yīng)該單獨(dú)一行
for (var i=0; i<100; i++) {
doSomething(i);
}
//應(yīng)該一直使用大括號(hào)括起邏輯塊纷闺，即使邏輯只有一行
var isFound = false;
if (statement) {
isFound = true;
}
JavaScript中可以用單引號(hào)或者雙引號(hào)定義字符串，但是因?yàn)榱?xí)慣于定義HTML的元素屬性值時(shí)使用雙引號(hào)份蝴，而JavaScript中又經(jīng)常包含HTML代碼犁功，所以字符串定義使用單引號(hào)也可方便于在字符串內(nèi)部包含含有雙引號(hào)的HTML代碼。
示例代碼：
var content = '…';
空格的作用是提高代碼的可讀性婚夫，在函數(shù)參數(shù)的逗號(hào)后面使用一個(gè)空格浸卦，在操作符前后各使用一個(gè)空格。另外案糙，使用一個(gè)空行來區(qū)分業(yè)務(wù)邏輯段限嫌。
示例代碼：
doSomething(myChar, 0, 1);
while (x === y){
...
}
JavaScript語句結(jié)束時(shí)應(yīng)該添加一個(gè)分號(hào)。語句結(jié)束是否添加分號(hào)這個(gè)話題曾經(jīng)引起很大的討論时捌，大名鼎鼎的Bootstrap框架中的JavaScript語句結(jié)束就沒有添加分號(hào)怒医。著名的框架都不在語句行尾添加分號(hào)，這里有必要簡(jiǎn)單介紹一下在行尾推薦添加分號(hào)的理由奢讨。首先來看看JavaScript是如何看待分號(hào)的稚叹。JavaScript有自動(dòng)插入分號(hào)的算法，在沒有添加分號(hào)的JavaScript語句的結(jié)束處會(huì)自動(dòng)添加一個(gè)分號(hào)拿诸，但是如果語句的下一行以“[”扒袖、“（”、“+”亩码、“-”季率、“/”開頭則不會(huì)在此語句后面添加分號(hào)◇吧欤看似合理的設(shè)計(jì)蚀同，但其實(shí)如果應(yīng)用不慎就會(huì)導(dǎo)致一些莫名其妙的錯(cuò)誤，如下這個(gè)示例是由于自動(dòng)添加分號(hào)而導(dǎo)致的邏輯錯(cuò)誤啊掏。
錯(cuò)誤示例：
return
{
a + b
}
按照自動(dòng)添加分號(hào)的算法蠢络，會(huì)在return后面添加一個(gè)分號(hào)，代碼等價(jià)于：
// return 后面會(huì)添加一個(gè)分號(hào)
return 迟蜜；
{
a + b
}
其結(jié)果自然會(huì)返回undefined刹孔，而不是期望的值。其實(shí)這個(gè)詭異的問題可以通過規(guī)定左大括號(hào)必須放置在前一個(gè)語句結(jié)尾處的方式來解決。
上面的例子是在不想添加分號(hào)的地方被自動(dòng)添加了分號(hào)髓霞，而下面的例子則是因?yàn)闆]有在該添加分號(hào)的地方添加分號(hào)而導(dǎo)致的邏輯錯(cuò)誤卦睹。
錯(cuò)誤示例：
var b = function(){
return function(){return 1}
}
var a = b
(function(){
...
})()
根據(jù)自動(dòng)添加分號(hào)的算法，“var a = b”這行語句的后一行代碼以左小括號(hào)開頭方库，不會(huì)為這行語句自動(dòng)添加分號(hào)结序，此行代碼等價(jià)于：
var b = function(){
return function(){return 1}
}
var a = b(function(){
...
})()
這完全背離了代碼表達(dá)的初衷。當(dāng)然纵潦，可以給以“[”徐鹤、“（”、“+”邀层、“-”返敬、“/”開頭的語句前添加一個(gè)分號(hào)來避免出現(xiàn)這樣的邏輯錯(cuò)誤，但是這也是一種“丑陋”的方案寥院。
JavaScript這種有缺陷的自動(dòng)添加分號(hào)的算法希望開發(fā)者格外小心劲赠。開發(fā)者明白這些缺陷則有助于在實(shí)際的開發(fā)過程中避免犯錯(cuò)誤。盡管在語句結(jié)尾添加分號(hào)和不添加分號(hào)都會(huì)有一些問題存在秸谢，但是考慮到大多數(shù)開發(fā)者已有的習(xí)慣凛澎，還是建議給語句的結(jié)尾添加分號(hào)。
因?yàn)镴avaScript代碼在前端中是邏輯性最強(qiáng)的钮追，所以需要添加足夠的注釋來保證代碼的可讀性预厌。在JavaScript代碼中阿迈，如果注釋未占有多行元媚，那么建議使用//，不推薦使用/**/苗沧。注釋應(yīng)該單獨(dú)占用一行刊棕，而不是寫在和代碼相同一行的右邊。和CSS代碼的注釋規(guī)范相似待逞，JavaScript代碼的注釋主要也是文件信息注釋和代碼邏輯注釋甥角。
示例代碼
/ 文件頭部的文件信息注釋 /
/*!
reader content v1.0
*
Copyright 2012
Dual licensed under the MIT or GPL Version 2 licenses.
*
Designed and built by dangjian
*/
Reader.Content = (function(){
return {
// reader初始化
Init: function(){
...
};
};
})();
五、圖片命名
1识樱、 圖片的名稱分為頭尾兩部分嗤无，用下劃線隔開，頭部分表示此圖片的大類性質(zhì)怜庸，例如：廣告当犯、標(biāo)志、菜單割疾、按鈕等等
2 嚎卫、 常規(guī)命名
2.1 放置在頁(yè)面頂部的廣告、裝飾圖案等長(zhǎng)方形的圖片取名：banner
2.2 標(biāo)志性的圖片取名為：logo
2.3 在頁(yè)面位置不固定并且?guī)в墟溄拥男D片我們?nèi)∶篵utton
2.4 在頁(yè)面上某一個(gè)位置連續(xù)出現(xiàn)宏榕，性質(zhì)相同的鏈接欄目的圖片我們?nèi)∶簃enu
2.5 裝飾用的照片我們?nèi)∶簆ic
2.6 不帶鏈接表示標(biāo)題的圖片我們?nèi)∶簍itle
3 范例
banner_sohu.gif
banner_sina.gif
menu_aboutus.gif
menu_job.gif
title_news.gif
logo_police.gif
logo_national.gif
pic_people.jpg
