Web前端開發規范文檔
規范目的：
使開發流程更加規范化。
通用規范：
-
TAB鍵用兩個空格代替（
windos下tab鍵占四個空格，linux下TAB鍵占八個空格）。 CSS樣式屬性或者JAVASCRIPT代碼后加“;”方便壓縮工具“斷句”。
-
文件內容編碼均統一為
UTF-8。 CSS、JAVASCRIPT中的非注釋類中文字符須轉換成unicode編碼使用,以避免編碼錯誤時亂碼顯示。
文件規范：
-
文件名用英文單詞，多個單詞用駝峰命名法。
- 一些瀏覽器會將含有這些詞的作為廣告攔截，文件命名、ID、CLASS等所有命名避免以下詞匯。
`ad`、`ads`、`adv`、`banner`、`sponsor`、`gg`、`guangg`、`guanggao`等
html書寫規范：
文檔類型聲明統一為HTML5聲明類型，編碼統一為UTF-8。
<meta charset="UTF-8">
<HEAD>中添加信息。
<meta name="author" content="smile@kang.cool">//作者 <meta name="description" content="hello">//網頁描述 <meta name="keywords" content="a,b,c">//關鍵字,“，”分隔 <meta http-equiv="expires" content="Wed, 26 Feb 1997 08：21：57 GMT">//設定網頁的到期時間。一旦網頁過期，必須到服務器上重新調閱 <meta http-equiv="Pragma" content="no-cache">//禁止瀏覽器從本地機的緩存中調閱頁面內容 <meta http-equiv="Window-target" content="_top">//用來防止別人在框架里調用你的頁面 <meta http-equiv="Refresh" content="5;URL=http://kahn1990.com/">//跳轉頁面，5指時間停留5秒 網頁搜索機器人向導。用來告訴搜索機器人哪些頁面需要索引，哪些頁面不需要索引 <meta name="robots" content="none">//content的參數有all,none,index,noindex,follow,nofollow，默認是all <link rel="Shortcut Icon" href="favicon.ico">//收藏圖標 <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">//網頁不會被緩存
非特殊情況下CSS樣式文件外鏈至HEAD之間，JAVASCRIPT文件外鏈至頁面底部。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- 邏輯代碼 -->
<!-- 邏輯代碼底部 -->
<script src="lib/jquery/jquery-2.1.1.min.js"></script>
</body>
</html>
引入JAVASCRIPT庫文件，文件名須包含庫名稱及版本號及是否為壓縮版。
jQuery-1.8.3.min.js
引入JAVASCRIPT插件, 文件名格式為庫名稱+.+插件名稱。
jQuery.cookie.js
命名方式：
CLASS --> nHeadTitle --> CLASS遵循小駝峰命名法（little camel-case） ID --> n_head_title --> ID遵循名稱+_ NAME --> N_Head_Title --> NAME屬性命名遵循首個字母大寫+_ <div class="nHeadTitle" id="n_head_title" name="N_Head_Title"></div>
css書寫規范：
CSS書寫順序
.header {
/* 顯示屬性 */
display || visibility
list-style
position top || right || bottom || left
z-index
clear
float
/* 自身屬性 */
width max-width || min-width
height max-height || min-height
overflow || clip
margin
padding
outline
border
background
/* 文本屬性 */
color
font
text-overflow
text-align
text-indent
line-height
white-space
vertical-align
cursor
content
};
兼容多個瀏覽器時，將標准屬性寫在底部
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari和Chrome */
border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE瀏覽器 *//標准屬性
使用z-index屬性盡量z-index的值不要超過150（通用組的除外），頁面中的元素內容的z-index不能超過10（提示框等模塊除外但維持在150以下），不允許直接使用（999~9999）之間大值。
減少使用影響性能的屬性。
position:absolute;
float:left;//如這些定位或浮動屬性
減少在CSS中使用濾鏡表達式和圖片repeat,尤其在body當中,渲染性能極差, 如果需要用repeat的話,圖片的寬或高不能少於8px。
javaScript書寫規范：
代碼格式
"()"前后需要跟空格
"="前后需要跟空格
","后面需要跟空格
JSON對象需格式化對象參數
if、while、for、do語句的執行體用"{}"括起來
"{}"格式如下
if (a==1) {
//代碼
};
下面類型的對象不建議用new構造
new Number
new String
new Boolean
new Object //用{}代替
new Array //用[]代替
圖片規范：
命名應用小寫英文、數字、_組合，便於團隊其他成員理解
header_btn.gif header_btn2.gif
頁面元素類圖片均放入img文件夾,測試用圖片放於img/testimg文件夾，psd源圖放入psdimg文件夾。
圖片格式僅限於gif、png、jpg等。用png圖片做圖片時,要求圖片格式為png-8格式。
注釋規范：
JAVASCRIPT、CSS文件注釋需要標明作者、文件版本、創建/修改時間、重大版本修改記錄、函數描述、文件版本、創建或者修改時間、功能、作者等信息。
/* 注釋塊 */
開發及測試工具約定：
測試工具: 前期開發僅測試FireFox & IE8 & IE9 & Opera &Chrome & Safari