Web前端開發規范文檔
規范目的：
- 使開發流程更加規范化。
通用規范：
TAB鍵用兩個空格代替（
WINDOWS下TAB鍵占四個空格，LINUX下TAB鍵占八個空格）。
CSS樣式屬性或者JAVASCRIPT代碼后加“;”方便壓縮工具“斷句”。文件內容編碼均統一為
UTF-8。
CSS、JAVASCRIPT中的非注釋類中文字符須轉換成unicode編碼使用,
以避免編碼錯誤時亂碼顯示。
文件規范：
文件名用英文單詞，多個單詞用駝峰命名法。
一些瀏覽器會將含有這些詞的作為廣告攔截，文件命名、ID、CLASS等所有命名避免以上詞匯。
```
ad、ads、adv、banner、sponsor、gg、guangg、guanggao等
html書寫規范：
為每個
HTML頁面的第一行添加標準模式（standard
mode）的聲明，確保在每個瀏覽器中擁有一致的展現。<!DOCTYPE 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">//網頁不會被緩存
IE支持通過特定<meta>標簽來確定繪制當前頁面所應該采用的IE版本。除非有強烈的特殊需求，否則最好是設置為edge
mode ，從而通知IE采用其所支持的最新的模式。<meta http-equiv="X-UA-Compatible" content="IE=Edge">非特殊情況下
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
HTML屬性應當按照以下給出的順序依次排列，來確保代碼的易讀性。class id 、 name data-* src、for、 type、 href title、alt aria-*、 role編碼均遵循
XHTML標準,
標簽、屬性、屬性命名由小寫英文、數字和_組成，且所有標簽必須閉合，屬性值必須用雙引號"",
避免使用中文拼音盡量簡易并要求語義化。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>當
JAVASCRIPT獲取單個元素時，通常使用document.getElementById來獲取dom元素，document.getElementById兼容所有瀏覽器，但IE瀏覽器會混淆元素的ID和NAME屬性，所以要區分ID和NAME命名。<input type="text" name="test"> <div id="test"></div> <button onclick="alert(document.getElementById('test').tagName)"></button> <!-- ie6下為INPUT -->特殊符號應使用轉意符。
< --> < > --> > 空格 -->含有描述性表單元素（
INPUT，TEXTAREA）添加LABEL。<p> <label for="test">測試</label> <input type="text" id="test" /> </p>多用無兼容性問題的
HTML內置標簽,
比如SPAN、EM、STRONG、OPTGROUP、LABEL等,需要自定義HTML標簽屬性時，首先考慮是否存在已有的合適標簽可替換，如果沒有,
可使用須以“data-”為前綴來添加自定義屬性，避免使用其他命名方式。語義化
HTML。盡可能減少
<DIV>嵌套。書寫鏈接地址時避免重定向。
//即在URL地址后面加“/”
HTML中對于屬性的定義，確保全部使用雙引號，絕不要使用單引號
css書寫規范：
為了欺騙
W3C的驗證工具,可將代碼分為兩個文件，一個是針對所有瀏覽器,一個只針對IE。即將所有符合W3C的代碼寫到一個文件中,而一些IE中必須而又不能通過W3C驗證的代碼（如:
cursor:hand;）放到另一個文件中，再用下面的方法導入。<!-- 放置所有瀏覽器樣式--> <link rel="stylesheet" type="text/css" href=""> <!-- 只放置IE必須，而不能通過w3c的--> <!--[if IE] <link rel="stylesheet" href=""> <![endif]-->
CSS樣式新建或修改盡量遵循以下原則。根據新建樣式的適用范圍分為三級：全站級、產品級、頁面級。 盡量通過繼承和層疊重用已有樣式。 不要輕易改動全站級CSS。改動后，要經過全面測試。
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瀏覽器 *//標準屬性使用選擇器時，命名比較短的詞匯或者縮寫的不允許直接定義樣式。
.hd,.bd,.td{};//如這些命名可用上級節點進行限定。
.recommend-mod .hd多選擇器規則之間換行，即當樣式針對多個選擇器時每個選擇器占一行。
button.btn, input.btn, input[type="button"] {…};優化
CSS選擇器。#header a { color: #444; };/*CSS選擇器是從右邊到左邊進行匹配*/瀏覽器將檢查整個文檔中的所有鏈接和每個鏈接的父元素，并遍歷文檔樹去查找ID為header的祖先元素，如果找不到header將追溯到文檔的根節點，解決方法如下。
避免使用通配規則和相鄰兄弟選擇符、子選擇符,、后代選擇符、屬性選擇符等選擇器 不要限定id選擇符，如div#header（提權的除外） 不要限定類選擇器，如ul.recommend（提權的除外） 不要使用 ul li a 這樣長的選擇符 避免使用標簽子選擇符，如#header > li > a使用
z-index屬性盡量z-index的值不要超過150（通用組的除外），頁面中的元素內容的z-index不能超過10（提示框等模塊除外但維持在150以下），不允許直接使用（999~9999）之間大值。盡量避免使用CSS Hack。
property:value; /* 所有瀏覽器 */ +property:value; /* IE7 */ _property:value; /* IE6 */ *property:value; /* IE6/7 */ property:value\9; /* IE6/7/8/9，即所有IE瀏覽器 */* html selector { … }; /* IE6 */ *:first-child+html selector { … }; /* IE7 */ html>body selector { … }; /* 非IE6 */ @-moz-document url-prefix() { … }; /* firefox */ @media all and (-webkit-min-device-pixel-ratio:0) { … }; /* saf3+/chrome1+ */ @media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) { … }; /* opera */ @media screen and (max-device-width: 480px) { … }; /* iPhone/mobile webkit */避免使用低效的選擇器。
body > * {…}; ul > li > a {…}; #footer > h3 {…}; ul#top_blue_nav {…}; #searbar span.submit a { … }; /* 反面示例 */六個不要三個避免一個使用。
不要在標簽上直接寫樣式 不要在CSS中使用expression 不要在CSS中使用@import 不要在CSS中使用!important 不要在CSS中使用“*”選擇符 不要將CSS樣式寫為單行 避免使用filter 避免使用行內（inline）樣式 避免使用“*”設置{margin: 0; padding: 0;} 使用after或overflow的方式清浮動減少使用影響性能的屬性。
position:absolute; float:left;//如這些定位或浮動屬性減少在
CSS中使用濾鏡表達式和圖片repeat,
尤其在body當中,渲染性能極差, 如果需要用repeat的話,
圖片的寬或高不能少于8px。
javaScript書寫規范：
命名規范。
常量名 全部大寫并單詞間用下劃線分隔 如：CSS_BTN_CLOSE、TXT_LOADING 對象的屬性或方法名 小駝峰式（little camel-case） 如：init、bindEvent、updatePosition 示例：Dialog.prototype = { init: function () {}, bindEvent: function () {}, updatePosition: function () {} … }; 類名（構造器） -->小駝峰式但首字母大寫 -->如：Current、DefaultConfig 函數名 -->小駝峰式 -->如：current()、defaultConfig() 變量名 -->小駝峰式 -->如：current、defaultConfig 私有變量名 -->小駝峰式但需要用_開頭 -->如：_current、_defaultConfig 變量名的前綴 -->續代碼格式。
"()"前后需要跟空格 "="前后需要跟空格 ","后面需要跟空格 JSON對象需格式化對象參數 if、while、for、do語句的執行體用"{}"括起來"{}"格式如下。
if (a==1) { //代碼 };避免額外的逗號。
var arr = [1,2,3,];
for-in循環體中必須用hasOwnProperty方法檢查成員是否為自身成員，避免來自原型鏈上的污染。長語句可考慮斷行。
TEMPL_SONGLIST.replace('{TABLE}', da['results']) .replace('{PREV_NUM}', prev) .replace('{NEXT_NUM}', next) .replace('{CURRENT_NUM}', current) .replace('{TOTAL_NUM}', da.page_total);為了避免和
JSLint的檢驗機制沖突，“.”或“+”這類操作符放在行尾。TEMPL_SONGLIST.replace('{TABLE}', da['results']). replace('{PREV_NUM}', prev). replace('{NEXT_NUM}', next). replace('{CURRENT_NUM}', current). replace('{TOTAL_NUM}', da.page_total);如果模塊代碼中，使用其它全局變量想跳過JSLint的檢查，可以在該文件中加入
/*global*/聲明。/*global alert: true, console: true, top: true, setTimeout: true */使用嚴格的條件判斷符。用===代替==，用!==代替!=，避免掉入==造成的陷阱
在條件判斷時，這樣的一些值表示false。null undefined與null相等 字符串'' 數字0 NaN在==時，則會有一些讓人難以理解的陷阱。
(function () { var undefined; undefined == null; // true 1 == true; //true 2 == true; // false 0 == false; // true 0 == ''; // true NaN == NaN;// false [] == false; // true [] == ![]; // true })();對于不同類型的 == 判斷，有這樣一些規則，順序自上而下：
undefined與null相等 一個是number一個是string時，會嘗試將string轉換為number 嘗試將boolean轉換為number 0或1 嘗試將Object轉換成number或string而這些取決于另外一個對比量，即值的類型，所以對于0、空字符串的判斷，建議使用
===
。===會先判斷兩邊的值類型，類型不匹配時為false。下面類型的對象不建議用new構造。
new Number new String new Boolean new Object //用{}代替 new Array //用[]代替引用對象成員用
obj.prop代替obj["prop"]，除非屬性名是變量。從number到string的轉換。
/** 推薦寫法*/ var a = 1; typeof(a); //"number" console.log(a); //1 var aa=a+''; typeof(aa); //"string" console.log(aa); //'1' /** 不推薦寫法*/ new String(a)或a.toString()從string到number的轉換，使用parseInt，必須顯式指定第二個參數的進制。
/** 推薦寫法*/ var a = '1'; var aa = parseInt(a,10); typeof(a); //"string" console.log(a); //'1' typeof(aa); //"number" console.log(aa); //1從float到integer的轉換。
/** 推薦寫法*/ Math.floor/Math.round/Math.ceil /** 不推薦寫法*/ parseInt字符串拼接應使用數組保存字符串片段，使用時調用join方法。避免使用+或+=的方式拼接較長的字符串，每個字符串都會使用一個小的內存片段，過多的內存片段會影響性能。
/**推薦的拼接方式array的push、join*/ var str=[], list=['測試A','測試B']; for (var i=0 , len=list.length; i < len; i++) { str.push( '<div>'+ list[i] + '</div>'); }; console.log(str.join('')); //<div>測試A</div><div>測試B</div> /** 不推薦的拼接方式+=*/ var str = '', list=['測試A','測試B']; for (var i = 0, len = list.length; i< len; i++) { str+='<div>' + list[i] + '</div>'; }; console.log(str); //<div>測試A</div><div>測試B</div>盡量避免使用存在兼容性及消耗資源的方法或屬性。
不要使用with，void，evil，eval_r，innerText注重
HTML分離, 減小reflow, 注重性能。
圖片規范：
命名應用
小寫英文、數字、_組合，便于團隊其他成員理解。header_btn.gif header_btn2.gif頁面元素類圖片均放入
img文件夾,
測試用圖片放于img/testimg文件夾，psd源圖放入img/psdimg文件夾。圖片格式僅限于
gif、png、jpg等。用
png圖片做圖片時,
要求圖片格式為png-8格式,若png-8實在影響圖片質量或其中有半透明效果,
請為ie-6單獨定義背景，并盡量避免使用半透明的png圖片。背景圖片請盡可能使用
sprite技術, 減小http請求。
注釋規范：
JAVASCRIPT、CSS文件注釋需要標明作者、文件版本、創建/修改時間、重大版本修改記錄、函數描述、文件版本、創建或者修改時間、功能、作者等信息。/* * 注釋塊 */中間可添加如下信息。
@file 文件名 @addon 把一個函數標記為另一個函數的擴張，另一個函數的定義不在源文件中 @argument 用大括號中的自變量類型描述一個自變量 @author 函數/類作者的姓名 @base 如果類是繼承得來，定義提供的類名稱 @class 用來給一個類提供描述，不能用于構造器的文檔中 @constructor 描述一個類的構造器 @deprecated 表示函數/類已被忽略 @exception 描述函數/類產生的一個錯誤 @exec @extends 表示派生出當前類的另一個類 @fileoverview 表示文檔塊將用于描述當前文件，這個標簽應該放在其它任何標簽之前 @final 指出函數/類 @ignore 讓jsdoc忽視隨后的代碼 @link 類似于@link標簽，用于連接許多其它頁面 @member 定義隨后的函數為提供的類名稱的一個成員 @param 用大括號中的參數類型描述一個參數 @private 表示函數/類為私有，不應包含在生成的文檔中 @requires 表示需要另一個函數/類 @return 描述一個函數的返回值 @see 連接到另一個函數/類 @throws 描述函數/類可能產生的錯誤 @type 指定函數/成員的返回類型 @version 函數/類的版本號
開發及測試工具約定：
編碼格式化，三碼統一。
測試工具: 前期開發僅測試FireFox & IE6 & IE7 & IE8 & IE9 & Opera &
Chrome & Safari
