Web前端開(kāi)發(fā)規(guī)范文檔
規(guī)范目的:
- 使開(kāi)發(fā)流程更加規(guī)范化。
通用規(guī)范:
TAB鍵用兩個(gè)空格代替(
WINDOWS
下TAB鍵占四個(gè)空格,LINUX
下TAB鍵占八個(gè)空格)。
CSS
樣式屬性或者JAVASCRIPT
代碼后加“;”方便壓縮工具“斷句”。文件內(nèi)容編碼均統(tǒng)一為
UTF-8
。
CSS
、JAVASCRIPT
中的非注釋類中文字符須轉(zhuǎn)換成unicode編碼使用,
以避免編碼錯(cuò)誤時(shí)亂碼顯示。
文件規(guī)范:
文件名用英文單詞,多個(gè)單詞用駝峰命名法。
一些瀏覽器會(huì)將含有這些詞的作為廣告攔截,文件命名、ID、CLASS等所有命名避免以上詞匯。
```
ad
、ads
、adv
、banner
、sponsor
、gg
、guangg
、guanggao
等
html書(shū)寫(xiě)規(guī)范:
為每個(gè)
HTML
頁(yè)面的第一行添加標(biāo)準(zhǔn)模式(standard
mode)的聲明,確保在每個(gè)瀏覽器中擁有一致的展現(xiàn)。<!DOCTYPE html>
文檔類型聲明
統(tǒng)一為HTML5聲明類型,編碼
統(tǒng)一為UTF-8。<meta charset="UTF-8">
<HEAD>
中添加信息。<meta name="author" content="smile@kang.cool">//作者 <meta name="description" content="hello">//網(wǎng)頁(yè)描述 <meta name="keywords" content="a,b,c">//關(guān)鍵字,“,”分隔 <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">//設(shè)定網(wǎng)頁(yè)的到期時(shí)間。一旦網(wǎng)頁(yè)過(guò)期,必須到服務(wù)器上重新調(diào)閱 <meta http-equiv="Pragma" content="no-cache">//禁止瀏覽器從本地機(jī)的緩存中調(diào)閱頁(yè)面內(nèi)容 <meta http-equiv="Window-target" content="_top">//用來(lái)防止別人在框架里調(diào)用你的頁(yè)面 <meta http-equiv="Refresh" content="5;URL=http://kahn1990.com/">//跳轉(zhuǎn)頁(yè)面,5指時(shí)間停留5秒 網(wǎng)頁(yè)搜索機(jī)器人向?qū)АS脕?lái)告訴搜索機(jī)器人哪些頁(yè)面需要索引,哪些頁(yè)面不需要索引 <meta name="robots" content="none">//content的參數(shù)有all,none,index,noindex,follow,nofollow,默認(rèn)是all <link rel="Shortcut Icon" href="favicon.ico">//收藏圖標(biāo) <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">//網(wǎng)頁(yè)不會(huì)被緩存
IE
支持通過(guò)特定<meta>標(biāo)簽來(lái)確定繪制當(dāng)前頁(yè)面所應(yīng)該采用的IE
版本。除非有強(qiáng)烈的特殊需求,否則最好是設(shè)置為edge
mode ,從而通知IE
采用其所支持的最新的模式。<meta http-equiv="X-UA-Compatible" content="IE=Edge">
非特殊情況下
CSS
樣式文件外鏈至HEAD之間,JAVASCRIPT
文件外鏈至頁(yè)面底部。<!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
庫(kù)文件,文件名須包含庫(kù)名稱及版本號(hào)及是否為壓縮版。jQuery-1.8.3.min.js
引入
JAVASCRIPT
插件, 文件名格式為庫(kù)名稱+.
+插件名稱。jQuery.cookie.js
HTML
屬性應(yīng)當(dāng)按照以下給出的順序依次排列,來(lái)確保代碼的易讀性。class id 、 name data-* src、for、 type、 href title、alt aria-*、 role
編碼均遵循
XHTML
標(biāo)準(zhǔn),
標(biāo)簽、屬性、屬性命名由小寫(xiě)英文、數(shù)字和_組成,且所有標(biāo)簽必須閉合,屬性值必須用雙引號(hào)"",
避免使用中文拼音盡量簡(jiǎn)易并要求語(yǔ)義化。CLASS --> nHeadTitle --> CLASS遵循小駝峰命名法(little camel-case) ID --> n_head_title --> ID遵循名稱+_ NAME --> N_Head_Title --> NAME屬性命名遵循首個(gè)字母大寫(xiě)+_ <div class="nHeadTitle" id="n_head_title" name="N_Head_Title"></div>
當(dāng)
JAVASCRIPT
獲取單個(gè)元素時(shí),通常使用document.getElementById來(lái)獲取dom元素,document.getElementById兼容所有瀏覽器,但I(xiàn)E瀏覽器會(huì)混淆元素的ID和NAME屬性,所以要區(qū)分ID和NAME命名。<input type="text" name="test"> <div id="test"></div> <button onclick="alert(document.getElementById('test').tagName)"></button> <!-- ie6下為INPUT -->
特殊符號(hào)應(yīng)使用轉(zhuǎn)意符。
< --> < > --> > 空格 -->
含有描述性表單元素(
INPUT
,TEXTAREA
)添加LABEL
。<p> <label for="test">測(cè)試</label> <input type="text" id="test" /> </p>
多用無(wú)兼容性問(wèn)題的
HTML
內(nèi)置標(biāo)簽,
比如SPAN、EM、STRONG、OPTGROUP、LABEL等,需要自定義HTML
標(biāo)簽屬性時(shí),首先考慮是否存在已有的合適標(biāo)簽可替換,如果沒(méi)有,
可使用須以“data-
”為前綴來(lái)添加自定義屬性,避免使用其他命名方式。語(yǔ)義化
HTML
。盡可能減少
<DIV>
嵌套。書(shū)寫(xiě)鏈接地址時(shí)避免重定向。
//即在URL地址后面加“/”
HTML
中對(duì)于屬性的定義,確保全部使用雙引號(hào),絕不要使用單引號(hào)
css書(shū)寫(xiě)規(guī)范:
為了欺騙
W3C
的驗(yàn)證工具,可將代碼分為兩個(gè)文件,一個(gè)是針對(duì)所有瀏覽器,一個(gè)只針對(duì)IE。即將所有符合W3C
的代碼寫(xiě)到一個(gè)文件中,而一些IE中必須而又不能通過(guò)W3C
驗(yàn)證的代碼(如:
cursor:hand;
)放到另一個(gè)文件中,再用下面的方法導(dǎo)入。<!-- 放置所有瀏覽器樣式--> <link rel="stylesheet" type="text/css" href=""> <!-- 只放置IE必須,而不能通過(guò)w3c的--> <!--[if IE] <link rel="stylesheet" href=""> <![endif]-->
CSS
樣式新建或修改盡量遵循以下原則。根據(jù)新建樣式的適用范圍分為三級(jí):全站級(jí)、產(chǎn)品級(jí)、頁(yè)面級(jí)。 盡量通過(guò)繼承和層疊重用已有樣式。 不要輕易改動(dòng)全站級(jí)CSS。改動(dòng)后,要經(jīng)過(guò)全面測(cè)試。
CSS
屬性顯示順序。顯示屬性 元素位置 元素屬性 元素內(nèi)容屬性
CSS
書(shū)寫(xiě)順序。.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 };
兼容多個(gè)瀏覽器時(shí),將標(biāo)準(zhǔn)屬性寫(xiě)在底部。
-moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; /* Safari和Chrome */ border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE瀏覽器 *//標(biāo)準(zhǔn)屬性
使用選擇器時(shí),命名比較短的詞匯或者縮寫(xiě)的不允許直接定義樣式。
.hd,.bd,.td{};//如這些命名
可用上級(jí)節(jié)點(diǎn)進(jìn)行限定。
.recommend-mod .hd
多選擇器規(guī)則之間換行,即當(dāng)樣式針對(duì)多個(gè)選擇器時(shí)每個(gè)選擇器占一行。
button.btn, input.btn, input[type="button"] {…};
優(yōu)化
CSS
選擇器。#header a { color: #444; };/*CSS選擇器是從右邊到左邊進(jìn)行匹配*/
瀏覽器將檢查整個(gè)文檔中的所有鏈接和每個(gè)鏈接的父元素,并遍歷文檔樹(shù)去查找ID為header的祖先元素,如果找不到header將追溯到文檔的根節(jié)點(diǎn),解決方法如下。
避免使用通配規(guī)則和相鄰兄弟選擇符、子選擇符,、后代選擇符、屬性選擇符等選擇器 不要限定id選擇符,如div#header(提權(quán)的除外) 不要限定類選擇器,如ul.recommend(提權(quán)的除外) 不要使用 ul li a 這樣長(zhǎng)的選擇符 避免使用標(biāo)簽子選擇符,如#header > li > a
使用
z-index
屬性盡量z-index
的值不要超過(guò)150(通用組的除外),頁(yè)面中的元素內(nèi)容的z-index
不能超過(guò)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 { … }; /* 反面示例 */
六個(gè)不要三個(gè)避免一個(gè)使用。
不要在標(biāo)簽上直接寫(xiě)樣式 不要在CSS中使用expression 不要在CSS中使用@import 不要在CSS中使用!important 不要在CSS中使用“*”選擇符 不要將CSS樣式寫(xiě)為單行 避免使用filter 避免使用行內(nèi)(inline)樣式 避免使用“*”設(shè)置{margin: 0; padding: 0;} 使用after或overflow的方式清浮動(dòng)
減少使用影響性能的屬性。
position:absolute; float:left;//如這些定位或浮動(dòng)屬性
減少在
CSS
中使用濾鏡表達(dá)式和圖片repeat,
尤其在body當(dāng)中,渲染性能極差, 如果需要用repeat的話,
圖片的寬或高不能少于8px。
javaScript書(shū)寫(xiě)規(guī)范:
命名規(guī)范。
常量名 全部大寫(xiě)并單詞間用下劃線分隔 如:CSS_BTN_CLOSE、TXT_LOADING 對(duì)象的屬性或方法名 小駝峰式(little camel-case) 如:init、bindEvent、updatePosition 示例:Dialog.prototype = { init: function () {}, bindEvent: function () {}, updatePosition: function () {} … }; 類名(構(gòu)造器) -->小駝峰式但首字母大寫(xiě) -->如:Current、DefaultConfig 函數(shù)名 -->小駝峰式 -->如:current()、defaultConfig() 變量名 -->小駝峰式 -->如:current、defaultConfig 私有變量名 -->小駝峰式但需要用_開(kāi)頭 -->如:_current、_defaultConfig 變量名的前綴 -->續(xù)
代碼格式。
"()"前后需要跟空格 "="前后需要跟空格 ","后面需要跟空格 JSON對(duì)象需格式化對(duì)象參數(shù) if、while、for、do語(yǔ)句的執(zhí)行體用"{}"括起來(lái)
"{}"格式如下。
if (a==1) { //代碼 };
避免額外的逗號(hào)。
var arr = [1,2,3,];
for-in
循環(huán)體中必須用hasOwnProperty
方法檢查成員是否為自身成員,避免來(lái)自原型鏈上的污染。長(zhǎng)語(yǔ)句可考慮斷行。
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
的檢驗(yàn)機(jī)制沖突,“.”或“+”這類操作符放在行尾。TEMPL_SONGLIST.replace('{TABLE}', da['results']). replace('{PREV_NUM}', prev). replace('{NEXT_NUM}', next). replace('{CURRENT_NUM}', current). replace('{TOTAL_NUM}', da.page_total);
如果模塊代碼中,使用其它全局變量想跳過(guò)JSLint的檢查,可以在該文件中加入
/*global*/
聲明。/*global alert: true, console: true, top: true, setTimeout: true */
使用嚴(yán)格的條件判斷符。用===代替==,用!==代替!=,避免掉入==造成的陷阱
在條件判斷時(shí),這樣的一些值表示false。null undefined與null相等 字符串'' 數(shù)字0 NaN
在==時(shí),則會(huì)有一些讓人難以理解的陷阱。
(function () { var undefined; undefined == null; // true 1 == true; //true 2 == true; // false 0 == false; // true 0 == ''; // true NaN == NaN;// false [] == false; // true [] == ![]; // true })();
對(duì)于不同類型的 == 判斷,有這樣一些規(guī)則,順序自上而下:
undefined與null相等 一個(gè)是number一個(gè)是string時(shí),會(huì)嘗試將string轉(zhuǎn)換為number 嘗試將boolean轉(zhuǎn)換為number 0或1 嘗試將Object轉(zhuǎn)換成number或string
而這些取決于另外一個(gè)對(duì)比量,即值的類型,所以對(duì)于0、空字符串的判斷,建議使用
===
。===
會(huì)先判斷兩邊的值類型,類型不匹配時(shí)為false
。下面類型的對(duì)象不建議用new構(gòu)造。
new Number new String new Boolean new Object //用{}代替 new Array //用[]代替
引用對(duì)象成員用
obj.prop
代替obj["prop"]
,除非屬性名是變量。從number到string的轉(zhuǎn)換。
/** 推薦寫(xiě)法*/ var a = 1; typeof(a); //"number" console.log(a); //1 var aa=a+''; typeof(aa); //"string" console.log(aa); //'1' /** 不推薦寫(xiě)法*/ new String(a)或a.toString()
從string到number的轉(zhuǎn)換,使用parseInt,必須顯式指定第二個(gè)參數(shù)的進(jìn)制。
/** 推薦寫(xiě)法*/ var a = '1'; var aa = parseInt(a,10); typeof(a); //"string" console.log(a); //'1' typeof(aa); //"number" console.log(aa); //1
從float到integer的轉(zhuǎn)換。
/** 推薦寫(xiě)法*/ Math.floor/Math.round/Math.ceil /** 不推薦寫(xiě)法*/ parseInt
字符串拼接應(yīng)使用數(shù)組保存字符串片段,使用時(shí)調(diào)用join方法。避免使用+或+=的方式拼接較長(zhǎng)的字符串,每個(gè)字符串都會(huì)使用一個(gè)小的內(nèi)存片段,過(guò)多的內(nèi)存片段會(huì)影響性能。
/**推薦的拼接方式array的push、join*/ var str=[], list=['測(cè)試A','測(cè)試B']; for (var i=0 , len=list.length; i < len; i++) { str.push( '<div>'+ list[i] + '</div>'); }; console.log(str.join('')); //<div>測(cè)試A</div><div>測(cè)試B</div> /** 不推薦的拼接方式+=*/ var str = '', list=['測(cè)試A','測(cè)試B']; for (var i = 0, len = list.length; i< len; i++) { str+='<div>' + list[i] + '</div>'; }; console.log(str); //<div>測(cè)試A</div><div>測(cè)試B</div>
盡量避免使用存在兼容性及消耗資源的方法或?qū)傩浴?/p>
不要使用with,void,evil,eval_r,innerText
注重
HTML
分離, 減小reflow
, 注重性能。
圖片規(guī)范:
命名應(yīng)用
小寫(xiě)英文
、數(shù)字
、_
組合,便于團(tuán)隊(duì)其他成員理解。header_btn.gif header_btn2.gif
頁(yè)面元素類圖片均放入
img
文件夾,
測(cè)試用圖片放于img/testimg
文件夾,psd源圖放入img/psdimg
文件夾。圖片格式僅限于
gif
、png
、jpg
等。用
png
圖片做圖片時(shí),
要求圖片格式為png-8
格式,若png-8
實(shí)在影響圖片質(zhì)量或其中有半透明效果,
請(qǐng)為ie-6
單獨(dú)定義背景,并盡量避免使用半透明的png圖片。背景圖片請(qǐng)盡可能使用
sprite
技術(shù), 減小http
請(qǐng)求。
注釋規(guī)范:
JAVASCRIPT
、CSS
文件注釋需要標(biāo)明作者、文件版本、創(chuàng)建/修改時(shí)間、重大版本修改記錄、函數(shù)描述、文件版本、創(chuàng)建或者修改時(shí)間、功能、作者等信息。/* * 注釋塊 */
中間可添加如下信息。
@file 文件名 @addon 把一個(gè)函數(shù)標(biāo)記為另一個(gè)函數(shù)的擴(kuò)張,另一個(gè)函數(shù)的定義不在源文件中 @argument 用大括號(hào)中的自變量類型描述一個(gè)自變量 @author 函數(shù)/類作者的姓名 @base 如果類是繼承得來(lái),定義提供的類名稱 @class 用來(lái)給一個(gè)類提供描述,不能用于構(gòu)造器的文檔中 @constructor 描述一個(gè)類的構(gòu)造器 @deprecated 表示函數(shù)/類已被忽略 @exception 描述函數(shù)/類產(chǎn)生的一個(gè)錯(cuò)誤 @exec @extends 表示派生出當(dāng)前類的另一個(gè)類 @fileoverview 表示文檔塊將用于描述當(dāng)前文件,這個(gè)標(biāo)簽應(yīng)該放在其它任何標(biāo)簽之前 @final 指出函數(shù)/類 @ignore 讓jsdoc忽視隨后的代碼 @link 類似于@link標(biāo)簽,用于連接許多其它頁(yè)面 @member 定義隨后的函數(shù)為提供的類名稱的一個(gè)成員 @param 用大括號(hào)中的參數(shù)類型描述一個(gè)參數(shù) @private 表示函數(shù)/類為私有,不應(yīng)包含在生成的文檔中 @requires 表示需要另一個(gè)函數(shù)/類 @return 描述一個(gè)函數(shù)的返回值 @see 連接到另一個(gè)函數(shù)/類 @throws 描述函數(shù)/類可能產(chǎn)生的錯(cuò)誤 @type 指定函數(shù)/成員的返回類型 @version 函數(shù)/類的版本號(hào)
開(kāi)發(fā)及測(cè)試工具約定:
編碼格式化,三碼統(tǒng)一。
測(cè)試工具: 前期開(kāi)發(fā)僅測(cè)試FireFox & IE6 & IE7 & IE8 & IE9 & Opera &
Chrome & Safari