Web前端開發規範
一、前端開發規範目的
爲提高團隊協作效率, 便於後臺人員添加功能及前端後期優化維護, 輸出高質量的文檔, 特制訂此文檔. 本規範文檔一經確認, 前端開發人員必須按本文檔規範進行前臺頁面開發. 本文檔如有不對或者不合適的地方請及時提出, 經討論決定後方可更改.
二、基本準則
符合web標準, 語義化html標籤；
結構、表現、行爲三者相互分離, 兼容性優良；
頁面性能方面, 代碼要求簡潔明瞭有序, 儘可能的減小服務器負載, 保證最快的解析速度。
三、html規範
1、DTD統一用<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">；
2、統一UTF-8編碼；
3、 一般情況下css文件外鏈至head之間，js文件外鏈至body底部；
4、html應在保證彈性的基礎上儘量減少嵌套層數；
5、標籤語義化，去樣式後可讀性良好；
6、在頁面中儘量避免使用style屬性；
7、能以背景形式呈現的圖片, 儘量寫入css樣式中；
8、重要圖片必須加上alt屬性； 給重要的元素和截斷的元素加上title；
9、書寫頁面過程中, 請考慮向後擴展性；
10、方便服務端程序員套模板，html需爲模板添加註釋，格式爲：“<!—xxx開始{--> content <!--}xxx結束-->”；
四、CSS規範
1、CSS Reset用YUI的CSS Reset；
2、CSS採用base.css+common.css+app.css形式；
3、app.css採用分工制，一個前端工程師負責一個欄目，如果多人維護，需要添加註釋；
4、優先對已存在的common.css中的類進行組合，減少自定義類的數量；
5、CSS用一行的寫法，避免行數太長，不利查找；
6、充分利用html自身屬性及樣式繼承原理減少代碼量
7、使用table標籤時請不要用table屬性直接定義表現, 應儘可能的利用table自身私有屬性分離結構與表現，最好先在base.css文件中初始化表格樣式；
8、避免兼容性屬性的使用, 比如text-shadow || css3的相關屬性；
9、 減少使用影響性能的屬性, 比如position:absolute || float ；
10、正式發佈前應進行壓縮，壓縮後文件的命名應添加“_min”後綴；
五、JavaScript規範
1、JavaScript儘量避免使用全局變量，通過命名空間或匿名函數將變量封裝到閉包中；
2、庫引入： 原則上僅引入jQuery庫；
3、JS採用base.js+common.js+app.js形式；
4、 類命名: 首字母大寫, 駝峯式命名；
5、 函數命名: 首字母小寫駝峯式命名；
6、 命名語義化, 儘可能利用英文單詞或其縮寫；
7、儘量避免使用存在兼容性及消耗資源的方法或屬性, 比如eval() & innerText；
8、代碼結構明瞭, 加適量註釋. 提高函數重用率；
9、 注重與html分離, 減小reflow, 注重性能；
10、正式發佈前應進行壓縮，壓縮後文件的命名應添加“_min”後綴；
六、圖片規範
1、所有頁面元素類圖片均放入img文件夾, 測試用圖片放於img/demoimg文件夾；
2 、圖片格式僅限於gif || png || jpg；
3、命名全部用小寫英文字母 || 數字 || _ 的組合，其中不得包含漢字 || 空格 || 特殊字符；儘量用易懂的詞彙, 便於團隊其他成員理解； 另外, 命名分頭尾兩部分, 用下劃線隔開, 比如ad_left01.gif || btn_submit.gif；
4、在保證視覺效果的情況下選擇最小的圖片格式與圖片質量, 以減少加載時間；
5 、儘量避免使用半透明的png圖片；
6、運用css sprite技術集中小的背景圖或圖標, 減小頁面http請求, 但注意, 請務必在對應的sprite psd源圖中劃參考線, 並保存至img目錄下。
七、註釋規範
1、公共組件和各欄目的維護者都需要在文件頭部加上註釋說明：
/**
* 文件用途說明
* 作者姓名
* 聯繫方式
* 製作日期
**/
2、大的模塊註釋方法
//==========
// 代碼用途
//==========
3、小的註釋，單佔一行，不要再代碼後的同一行內加註釋
// 代碼說明
