1.HTML命名規範及格式規範
標籤名和屬性應該都小寫,雖然HTML代碼不區分大小寫;屬性值應該用雙引號閉合。
<IMG src=demo.jpg alt='test'/>(N)
<img src=demo.jpg alt="test"/>(Y)
給所有的關鍵元素定義元素的id和class,便於和CSS、javascript交互。推薦做法:根據語義和DOM樹的層級關係來定義合適的名稱,名稱中全部使用小寫,id名稱中的關鍵詞使用下劃線(_)連接,class的關鍵詞用中劃線(-)連接,這樣可以最大限度的保證命名不重複。
不推薦示例:
<div id="Reader">
<div id="introduce"class="introduce">
...
</div>
</div>(N)
推薦示例:
<div id="Reader">
<div id="Reader_introduce" class="Reader-introduce">
...
</div>
</div>
如果class名稱僅座位javascript調用的“鈎子”,則可在名稱中添加“js”前綴,如下
<ul id="js_reader_memu">
<li class="memu-toc js-active">Toc</li>
<li class="memu-store js-active">Store</li>
<li class="memu-library">Library</li>
<li class="memu-news">News</li>
</ul>
HTML代碼層級縮進為4個空格,如果元素中包含子元素,則此元素對應的起始標籤和閉合標籤分別獨佔用一行
不推薦示例:
<ul>
<li> item1</li><li>item2</li>
<li>item3</li><li>item4</li></ul>
推薦示例:
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
給HTML代碼添加必要的註釋。可以在頁面的公共部分(頁面的頭部、尾部以及側邊欄等)、頁面經常變化的部分(如廣告欄)以及需要後端代碼注入的部分添加註釋。註釋添加的位置在要註釋的代碼上單獨佔用一行,不要再代碼行的後面直接添加,例如:
<body>
<!--main header-->
<div id="reader_head">
...
</div>
<!--動態綁定列表:toc-->
<ul id="reader_content_toc">
</ul>
...
</div>
</body>
2.CSS命名規範及格式規範
推薦的CSS類的命名規則和元素的id命名規範相似,只是組成類名稱的關鍵字的連接符為中劃線(-)
.reader-content-title{
...
}
為了避免重複,命名時,取父元素的class名作為前綴
/*父元素的樣式聲明*/
.reader-content{
...
}
/*子元素的class名稱以父元素中的class名稱作為前綴*/
.reader-content-body{
...
}
在css樣式定義中,左大括號放置在選擇器的同一行,並和選擇器之間添加一個空格分隔,在保證可讀性的基礎上,縮短代碼的行數;在樣式聲明中,屬性名稱和值之間用一個空格分隔,提高代碼可讀性。
不推薦示例:
.reader-content-title
{
backgrond:#FFF;
...
}
推薦示例:
.reader-content-title{
background:#FFF;
...
}
多個選擇器具有相同的樣式聲明時,每個選擇器應該獨佔一行,便於閲讀和維護
不推薦示例:
h1,h2,h3{
font-weight:normal;
line-height:1.2;
}
推薦示例:
h1,
h2,
h3{
font-weight:normal;
line-height:1.2;
}
使用CSS美化工具做樣式聲明排序的工作
示例代碼:
.reader-content-title{
background:#FFF;
boder:1px solid;
-moz-border-radius:4px;
-webkit-boeder-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{
...
}
在CSS中添加註釋,主要分為,兩種類型,文件頭部的文件信息註釋和正文中的解釋説明性註釋。文件信息一般包括文件版本,版本信息以及作者等;解釋性説明性註解,有給模塊的註釋性和單獨給選擇器的註釋,模塊的註釋則需添加註釋表明模塊樣式定義的開始和結束,CSS選擇器的註釋需要添加在選擇器的上一行,而不是的選擇器相同一行。
示例代碼:
/*註釋規範説明:文件頭部的文件信息註釋*/
/*!
*reader content v1.0
*
*Copyright 2012
*Dual licensed under the MIT or GPL Version 2 licensed
*
*Desighned and built by dangjian
*
*/
/*註釋規範説明:模塊樣式定義的開始和結束*/
/*content containers start*/
/*註釋規範説明:註釋需要添加在選擇器的上一行,而不是和選擇器相同的一行*/
/*content title*/
.reader-content-title{
...
}
/*content containers end*/
3.javascript命名規範及格式規範
javascript局部變量命名採用首字母小寫,其他字母大寫的方式命名,命名時建議採用有意義的單詞命名,不推薦使用標示變量類型的前綴,如int,str,obj等。
//不推薦使用:變量命名首字母大寫
var ReaderBookMark='bookmark'
//不推薦使用:變量命名意義不明確
var object={};
//不推薦使用:變量命名以類型作為前綴
var strName='Note'
//不推薦使用:變量命名使用語義不明確的縮寫
var newNT=function(){
...
}
//推薦示例:變量命名語義明確
var bookmarkDefaultTitle='UntitleBookmark'
公有接口的命名為首字母大寫,私有接口的命名為首字母小寫
示例代碼:
Reader.Contect=function{
//私有變量
var info,title;
//私有方法
var getContent=function(){
...
}
return{
//公有方法
SetTitle:function(contentTitle){
title=contentTitle;
},
//公有屬性
ContentInfo:info
}
}()
JQuery框架在項目中使用廣泛,推薦給JQuery類型變量添加“$”作為前綴
示例代碼
var $tocTitle=$('.reader-toc-title')
左大括號應該在行的結束位置,而不應該單獨一行,因為這樣增加了不必要的行數。應該一直使用大括號括起邏輯塊,即使邏輯塊只有一行,也應該用大括號括起來,以便提高代碼的可讀性和可維護性。
示例代碼
//左大括號應該在行的結束位置,而不應該單獨一行
for(var i=0;i<100,i++){
doSomething(i);
}
//應該一直使用大括號括起邏輯塊,即使邏輯只有一行,
var isFound=false;
if(statement){
isFound=true;
}
JavaScript中可以用單引號或者雙引號定義字符串,但是因為習慣於定義HTML的元素屬性值時使用雙引號,而JavaScript中又經常包含HTML代碼,所以字符串定義使用單引號也可方便於在字符串內部包含含有雙引號的HTML代碼。
示例代碼:
var content='<span id="main_content">...';
空格的作用是提高代碼的可讀性,在函數參數的逗號後面使用一個空格,在操作符前後各使用一個空格,另外,使用一個空行來區分業務邏輯段
示例代碼:
doSomething(myChar , 0 , 1);
where(x===y){
...
}
javascript語句結束時,應該添加一個分號。
javascript代碼中,如果註釋未佔有多行,那麼建議使用//,不推薦使用/**/。註釋應單獨佔一行,而不是寫在和代碼相同一行的右邊。哦CSS代碼的註釋規範相似,javascript代碼的註釋主要也是文件信息註釋和代碼邏輯註釋