轉(zhuǎn)載
整理一些前端開發(fā)規(guī)范文檔
這份文檔已經(jīng)寫了差不多一年了律姨，最近也更新過了付呕，作為一個(gè)有組織和紀(jì)律的團(tuán)隊(duì)，規(guī)范是必須的概作，畢竟每個(gè)coder都有自己的一套風(fēng)格和規(guī)范嗜价，為了以后團(tuán)隊(duì)的和諧發(fā)展艇抠，結(jié)合前端業(yè)界的開發(fā)經(jīng)驗(yàn)，故而寫出了一個(gè)相對是大而簡潔的文檔久锥，希望能夠?qū)δ阋灿兴鶈l(fā)家淤。下面簡要的摘錄我的文檔，詳細(xì)的可以在本文底部下載PDF文檔瑟由。
第一部分：文件規(guī)范
tpl, css, js, img文件均歸檔至<系統(tǒng)開發(fā)規(guī)范>約定的目錄中;
tpl文件命名: 英文命名, 后綴.html,請重命名與php文件同名, 以方便后端添加功能時(shí)查找對應(yīng)頁面;
css文件命名: 英文命名, 后綴.css. 共用base.css, 首頁index.css, 其他頁面依實(shí)際模塊需求命名.;
Js文件命名: 英文命名, 后綴.js. 共用common.js, 其他依實(shí)際模塊需求命名.
第二部分：HTML書寫規(guī)范
文檔類型聲明及編碼: 統(tǒng)一為html5聲明類型; 編碼統(tǒng)一為, 書寫時(shí)利用IDE實(shí)現(xiàn)層次分明的縮進(jìn);
非特殊情況下樣式文件必須外鏈至<head></head>之間;非特殊情況下JavaScript文件必須外鏈至頁面底部;
3 引入JS庫文件, 文件名須包含庫名稱及版本號及是否為壓縮版, 比如jquery-1.7.1.min.js; 引入插件, 文件名格式為庫名稱+插件名稱, 比如jQuery.cookie.js;
所有編碼均遵循xhtml標(biāo)準(zhǔn), 標(biāo)簽 & 屬性 & 屬性命名 必須由小寫字母及下劃線數(shù)字組成, 且所有標(biāo)簽必須閉合; 屬性值必須用雙引號包括;
充分利用無兼容性問題的html自身標(biāo)簽, 比如span, em, strong, optgroup, label,等等; 需要為html元素添加自定義屬性的時(shí)候, 首先要考慮下有沒有默認(rèn)的已有的合適標(biāo)簽去設(shè)置, 如果沒有, 可以使用須以”data-”為前綴來添加自定義屬性絮重，避免使用”data:”等其他命名方式;
語義化html, 如 標(biāo)題根據(jù)重要性用h(同一頁面只能有一個(gè)h1), 段落標(biāo)記用p, 列表用ul, 內(nèi)聯(lián)元素中不可嵌套塊級元素;
盡可能減少div嵌套
書寫鏈接地址時(shí), 必須避免重定向，例如：href=”http://www.example.com/”, 即須在URL地址后面加上“/”；
在頁面中盡量避免使用style屬性,即style=”…”青伤，應(yīng)該盡量使用class或者id來定義新的樣式督怜，然后再對應(yīng)的css文件里面修改;
一、 網(wǎng)頁制作細(xì)節(jié)
---- head區(qū)代碼規(guī)范
head區(qū)是指HTML代碼的<head>和</head>之間的內(nèi)容潮模。
必須加入的標(biāo)簽：
?公司版權(quán)注釋 ；
?網(wǎng)頁顯示字符集痴施。
簡體中文：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
繁體中文：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
英 語：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
?網(wǎng)頁制作者信息 <META name="author" content="webmaster@maketown.com">
?網(wǎng)站簡介 <META NAME="DESCRIPTION" CONTENT="xxxxxxxxxxxxxxxxxxxxxxxxxx">
?搜索關(guān)鍵字 <META NAME="keywords" CONTENT="xxxx,xxxx,xxx,xxxxx,xxxx,">
? 網(wǎng)頁的css規(guī)范 <LINK href="../css/style.css" rel="stylesheet" type="text/css">
?網(wǎng)頁標(biāo)題 <title>xxxxxxxxxxxxxxxxxx</title>
可以選擇加入的標(biāo)簽：
?設(shè)定網(wǎng)頁的到期時(shí)間擎厢。一旦網(wǎng)頁過期，必須到服務(wù)器上重新調(diào)閱辣吃。
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08：21：57 GMT">
?禁止瀏覽器從本地機(jī)的緩存中調(diào)閱頁面內(nèi)容动遭。
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
?用來防止別人在框架里調(diào)用你的頁面。
<META HTTP-EQUIV="Window-target" CONTENT="_top">
?自動(dòng)跳轉(zhuǎn)神得。
<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http：//www.yahoo.com"> 5指時(shí)間停留5秒
?網(wǎng)頁搜索機(jī)器人向?qū)Ю宓搿Ｓ脕砀嬖V搜索機(jī)器人哪些頁面需要索引，哪些頁面不需要索引哩簿。
<META NAME="robots" CONTENT="none">CONTENT的參數(shù)有all,none,index,noindex,follow,nofollow宵蕉。默認(rèn)是all。
?收藏夾圖標(biāo) www.111cn.net
<link rel = "Shortcut Icon" href="favicon.ico">
?所有的javascript的調(diào)用盡量采取外部調(diào)用节榜。
<SCRIPT LANGUAGE="JavaScript" SRC="script/xxxxx.js"></SCRIPT>
?附<body>標(biāo)簽：
<body>標(biāo)簽不屬于head區(qū)羡玛，這里強(qiáng)調(diào)一下，為了保證瀏覽器的兼容性宗苍，必須設(shè)置頁面背景<body bgcolor="#FFFFFF">
二稼稿、網(wǎng)頁制作細(xì)節(jié) ---- 字體
?在設(shè)定字體樣式時(shí)對于文字字號樣式和行間距應(yīng)必須使用CSS樣式表。禁止在頁面中出現(xiàn) <font size=?> 標(biāo)記讳窟。
?在網(wǎng)頁中中文應(yīng)首選使用宋體让歼。英文和數(shù)字首選使用verdana 和arial 兩種字體。一般使用中文宋體的9pt 和11pt 或12px 和14.7px 這是經(jīng)過優(yōu)化的字號丽啡，黑體字或者宋體字加粗時(shí)谋右，一般選用11pt 和14.7px 的字號比較合適。
?為了最大程度的發(fā)揮瀏覽器自動(dòng)排版的功能补箍，在一段完整的文字中請盡量不要使用
來人工干預(yù)分段倚评。
?不同語種的文字之間應(yīng)該有一個(gè)半角空格，但避頭的符號之前和避尾的符號之后除外馏予，漢字之間的標(biāo)點(diǎn)要用全角標(biāo)點(diǎn)天梧，英文字母和數(shù)字周圍的括號應(yīng)該使用半角括號。
?請不要在網(wǎng)頁中連續(xù)出現(xiàn)多于一個(gè)的 也盡量少使用全角空格（英文字符集下霞丧，全角空格會(huì)變成亂碼）呢岗，空白應(yīng)該盡量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 圖片來實(shí)現(xiàn)。
?行距建議用百分比來定義，常用的兩個(gè)行距的值是line-height:120%/150%.
?排版中我們經(jīng)常會(huì)遇到需要進(jìn)行首行縮進(jìn)的處理后豫，不要使用 或者全角空格來達(dá)到效果悉尾，規(guī)范的做法是在樣式表中定義 p { text-indent: 2em; } 然后給每一段加上 <p> 標(biāo)記，注意挫酿，一般情況下构眯，請不要省略 </p> 結(jié)束標(biāo)記 。
三早龟、網(wǎng)頁制作細(xì)節(jié) ---- 鏈接
?網(wǎng)站中的鏈接路徑全部采用相對路徑惫霸，一般鏈接到某一目錄下的缺省文件的鏈接路徑不必寫全名，如我們不必這樣：<a href=”aboutus/index.htm”> 而應(yīng)該這樣：<a href=”aboutus/”>葱弟，所有內(nèi)頁指向首頁的鏈接寫成<a href=”/”>
?在瀏覽器里壹店，當(dāng)我們點(diǎn)擊空鏈接時(shí)，它會(huì)自動(dòng)將當(dāng)前頁面重置到首端芝加，從而影響用戶正常的閱讀內(nèi)容硅卢，我們用代碼“javascript:void(null)”代替原來的“#”標(biāo)記
四、網(wǎng)頁制作細(xì)節(jié) ---- 表格
1px表格 style="border-collapse: collapse"
實(shí)例如下：
<table border="1" cellspacing="0" width="32" height="32" style="border-collapse: collapse" bordercolor="#000000" cellpadding="0">
<tr>
<td></td>
</tr>
</table>
設(shè)置亮藏杖、暗邊框顏色：表格有亮邊框（bordercolorlight）和暗邊框（bordercolordark）兩個(gè)屬性可以對表格樣式設(shè)置将塑。
<table border="1" width="500" bordercolorlight="#000000" bordercolordark="#FFFFFF">
在寫 <table> 互相嵌套時(shí)，嚴(yán)格按照的規(guī)范蝌麸，對于單獨(dú)的一個(gè)<table>來說抬旺，<table><tr>對齊，<td> 縮進(jìn)兩個(gè)半角空格祥楣，<td> 中如果還有嵌套的表格开财，<table>也縮進(jìn)兩個(gè)半角空格，如果<td>中沒有任何嵌套的表格误褪，</td> 結(jié)束標(biāo)記應(yīng)該與 <td> 處于同一行责鳍，不要換行，如我們注意在源代碼中不應(yīng)有這樣的代碼：
<td><img src=”../images/sample.gif”> </td>
而應(yīng)該是這樣的：
<td><img src=”../images/sample.gif”></td>
這是因?yàn)闉g覽器認(rèn)為換行相當(dāng)于一個(gè)半角空格兽间，以上不規(guī)范的寫法相當(dāng)于無意中增加一個(gè)半角空格历葛，如果確實(shí)有必要增加一個(gè)半角空格，也應(yīng)該這樣寫：
<td><img src=”../images/sample.gif”> </td>
一個(gè)網(wǎng)頁要盡量避免用整個(gè)一張大表格嘀略，所有的內(nèi)容都嵌套在這個(gè)大表格之內(nèi)恤溶，因?yàn)闉g覽器在解釋頁面的元素時(shí)，是以表格為單位逐一顯示帜羊，如果一張網(wǎng)頁是嵌套在一個(gè)大表格之內(nèi)咒程，那么很可能造成的后果就是，當(dāng)瀏覽者敲入網(wǎng)址讼育，他要先面對一片空白很長時(shí)間帐姻，然后所有的網(wǎng)頁內(nèi)容同時(shí)出現(xiàn)稠集。如果必須這樣做，請使用 <tbody>標(biāo)記饥瓷，以便能夠使這個(gè)大表格分塊顯示
五剥纷、網(wǎng)頁制作細(xì)節(jié) ---- 下載速度
首頁Flash 網(wǎng)頁大小應(yīng)限定在 200K 以下，盡可能的使用矢量圖形和Action來減小動(dòng)畫大小呢铆。非首頁靜態(tài)頁面含圖片大小應(yīng)限定在 70K 左右晦鞋，盡可能的使用背景顏色替換大塊同色圖片。
六棺克、網(wǎng)頁制作細(xì)節(jié) ---- include
asp標(biāo)準(zhǔn)寫法：
jsp 標(biāo)準(zhǔn)寫法：<%@ include file="../inc/index_top..jsp" %>
七悠垛、網(wǎng)頁制作細(xì)節(jié) ---- Alt和Title
都是提示性語言標(biāo)簽，請注意它們之間的區(qū)別逆航。
在我們?yōu)g覽網(wǎng)頁時(shí)鼎文，當(dāng)鼠標(biāo)停留在圖片對象或文字鏈接上時(shí)渔肩，在鼠標(biāo)的右下角有時(shí)會(huì)出現(xiàn)一個(gè)提示信息框因俐。對目標(biāo)進(jìn)行一定的注釋說明。在一些場合周偎，它的作用是很重要的抹剩。
alt 用來給圖片來提示的。Title用來給鏈接文字或普通文字提示的蓉坎。用法如下：
<p Title="給鏈接文字提示">文字</p>
<a href="#" Title="給鏈接文字提示">文字</a>
<img src="圖片.gif" alt="給圖片提示">
八澳眷、網(wǎng)頁制作細(xì)節(jié) ---- 緩存
網(wǎng)頁不會(huì)被緩存
?HTM網(wǎng)頁
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="0">
?ASP網(wǎng)頁
Response.Expires = -1
Response.ExpiresAbsolute = Now() - 1
九、網(wǎng)頁制作細(xì)節(jié) ---- 瀏覽器兼容性
創(chuàng)建站點(diǎn)時(shí)蛉艾，應(yīng)該明白訪問者可能使用各種 Web 瀏覽器钳踊。在已知的其他設(shè)計(jì)限制下，盡可能將站點(diǎn)設(shè)計(jì)為具有最大的瀏覽器兼容性勿侯。
目前使用的 Web 瀏覽器有二十多種拓瞪，大多數(shù)已發(fā)行了多個(gè)版本。即使您只針對使用 Netscape Navigator 和 Microsoft Internet Explorer 的大多數(shù) Web 用戶助琐，但您應(yīng)明確并不是每個(gè)人都在使用這兩種瀏覽器的最新版本祭埂。
您的站點(diǎn)越復(fù)雜（在布局、動(dòng)畫兵钮、多媒體內(nèi)容和交互方面）蛆橡，跨瀏覽器兼容的可能性就越小。例如掘譬，并非所有的瀏覽器都可以運(yùn)行JavaScript泰演。不使用特殊字符的純文本頁面或許能夠在任何瀏覽器中正確顯示，但比起有效地使用圖形葱轩、布局和交互的頁面粥血，這樣的頁面在美感上可能要差得多柏锄。所以，應(yīng)盡量在最佳效果設(shè)計(jì)和最大瀏覽器兼容性設(shè)計(jì)之間取得平衡复亏。
所有的HTML 標(biāo)簽的屬性都要用單引號或者雙引號括起趾娃，即我們應(yīng)該寫 <a href=”url”> 而不 是 <a href=url>.
十、圖片處理細(xì)節(jié) ---- banner
?全尺寸banner為468X60px缔御，半尺寸banner為234X60px抬闷，小banner為88X31px。
?另外120X90耕突，120X60也是小圖標(biāo)的標(biāo)準(zhǔn)尺寸笤成。全尺寸banner不超過14K。
?普遍的banner尺寸760X100眷茁，750X120炕泳，468X60，468X95上祈，728X90培遵，585X140
?次級頁的pip尺寸360X300，336X280
?游標(biāo):100X100或120X120
十一登刺、圖片處理細(xì)節(jié) ---- LOGO的國際標(biāo)準(zhǔn)規(guī)范
為了便于INTERNET上信息的傳播籽腕，一個(gè)統(tǒng)一的國際標(biāo)準(zhǔn)是需要的。實(shí)際上已經(jīng)有了這樣的一整套標(biāo)準(zhǔn)纸俭。其中關(guān)于網(wǎng)站的LOGO皇耗，目前有三種規(guī)格：
?8831 這是互聯(lián)網(wǎng)上最普遍的LOGO規(guī)格。
?12060 這種規(guī)格用于一般大小的LOGO揍很。
?120*90 這種規(guī)格用于大型LOGO郎楼。
十二、圖片處理細(xì)節(jié) ---- 頁面修飾圖片處理
圖片經(jīng)過優(yōu)化以加快下載的速度,有較佳的視覺空間效果窒悔，用圖要與頁面風(fēng)格呜袁、頁面內(nèi)容相符；制作精美蛉迹，細(xì)節(jié)處理得當(dāng)
第三部分：CSS規(guī)范
- 編碼統(tǒng)一為utf-8;
2.公用文件：協(xié)作開發(fā)過程中傅寡，會(huì)引入默認(rèn)的base.css(里面包括了css reset、常用的css間距北救，css字體荐操，css大小等，詳細(xì)參見base.css)珍策；
class與id命名: ,樣式名稱由 小寫英文 托启、 數(shù)字 和 _ 來組合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 盡量使用簡易的單詞組合；命名要語義化, 簡明化攘宙。
為JavaScript預(yù)留鉤子的命名, 盡量使用id屬性屯耸，可以更快的獲取到dom拐迁。
css屬性書寫順序, 建議遵循: 布局定位屬性–>自身屬性–>文本屬性–>其他屬性. 此條可根據(jù)自身習(xí)慣書寫, 但盡量保證同類屬性寫在一起. 屬性列舉: 布局定位屬性主要包括: display 、 list-style 疗绣、 position（相應(yīng)的 top,right,bottom,left） 线召、 float & clear 、 visibility 和 overflow多矮； 自身屬性主要包括: width 缓淹、height 、 margin 塔逃、 padding 讯壶、 border 和 background; 文本屬性主要包括：color 、 font湾盗、 text-decoration 伏蚊、 text-align 、 vertical-align 格粪、 white- space 和其他content; 我所列出的這些屬性只是最常用到的, 并不代表全部;
書寫代碼前, 考慮并提高樣式重復(fù)使用率;
背景圖片請盡可能使用sprite技術(shù), 減小http請求, 考慮到多人協(xié)作開發(fā), sprite按模塊制作;
必須為大區(qū)塊樣式添加注釋, 小區(qū)塊適量注釋;
代碼縮進(jìn)與格式: 建議單行書寫, 可根據(jù)自身習(xí)慣, 后期優(yōu)化會(huì)統(tǒng)一處理;
常用的CSS命名規(guī)則
頭：header
內(nèi)容：content/container
尾：footer
導(dǎo)航：nav
側(cè)欄：sidebar
欄目：column
頁面外圍控制整體?丫摯磯齲?rapper
左右中：left right center
登錄條：loginbar
標(biāo)志：logo
廣告：banner
頁面主體：main
熱點(diǎn)：hot
新聞：news
下載：download
子導(dǎo)航：subnav
菜單：menu
子菜單：submenu
搜索：search
友情鏈接：friendlink
頁腳：footer
版權(quán)：copyright
滾動(dòng)：scroll
內(nèi)容：content
標(biāo)簽：tags
文章列表：list
提示信息：msg
小技巧：tips
欄目標(biāo)題：title
加入：joinus
指南：guide
服務(wù)：service
注冊：regsiter
狀態(tài)：status
投票：vote
合作伙伴：partner
注釋的寫法:
/* Header /
內(nèi)容區(qū)
/ End Header */
id的命名:
1)頁面結(jié)構(gòu)
容器: container
頁頭：header
內(nèi)容：content/container
頁面主體：main
頁尾：footer
導(dǎo)航：nav
側(cè)欄：sidebar
欄目：column
頁面外圍控制整體?丫摯磯齲?rapper
左右中：left right center
(2)導(dǎo)航
導(dǎo)航：nav
主導(dǎo)航：mainnav
子導(dǎo)航：subnav
頂導(dǎo)航：topnav
邊導(dǎo)航：sidebar
左導(dǎo)航：leftsidebar
右導(dǎo)航：rightsidebar
菜單：menu
子菜單：submenu
標(biāo)題: title
摘要: summary
(3)功能
標(biāo)志：logo
廣告：banner
登陸：login
登錄條：loginbar
注冊：register
搜索：search
功能區(qū)：shop
標(biāo)題：title
加入：joinus
狀態(tài)：status
按鈕：btn
滾動(dòng)：scroll
標(biāo)?頁：tab
文章列表：list
提示信息：msg
當(dāng)前的: current
小技巧：tips
圖標(biāo): icon
注釋：note
指南：guild
服務(wù)：service
熱點(diǎn)：hot
新聞：news
下載：download
投票：vote
合作伙伴：partner
友情鏈接：link
版權(quán)：copyright
注意事項(xiàng)::
1.一律小寫;
2.盡量用英文;
3.不加中??和下劃線;
4.盡量不縮寫躏吊，除非一看就明白的單詞。
CSS樣式表文件命名
主要的 master.css
模塊 module.css
基本共用 base.css
布局匀借、版面 layout.css
主題 themes.css
專欄 columns.css
文字 font.css
表單 forms.css
補(bǔ)丁 mend.css
打印 print.css
第四部分：JavaScript規(guī)范
文件編碼統(tǒng)一為utf-8, 書寫過程過, 每行代碼結(jié)束必須有分號; 原則上所有功能均根據(jù)XXX項(xiàng)目需求原生開發(fā), 以避免網(wǎng)上down下來的代碼造成的代碼污染(沉冗代碼 || 與現(xiàn)有代碼沖突 || …);
庫引入: 原則上僅引入jQuery庫, 若需引入第三方庫, 須與團(tuán)隊(duì)其他人員討論決定;
變量命名: 駝峰式命名. 原生JavaScript變量要求是純英文字母, 首字母須小寫, 如iTaoLun;
另, 要求變量集中聲明, 避免全局變量.
類命名: 首字母大寫, 駝峰式命名. 如 ITaoLun;
函數(shù)命名: 首字母小寫駝峰式命名. 如iTaoLun();
命名語義化, 盡可能利用英文單詞或其縮寫;
盡量避免使用存在兼容性及消耗資源的方法或?qū)傩? 比如eval_r() & innerText;
后期優(yōu)化中, JavaScript非注釋類中文字符須轉(zhuǎn)換成unicode編碼使用, 以避免編碼錯(cuò)誤時(shí)亂碼顯示;
代碼結(jié)構(gòu)明了, 加適量注釋. 提高函數(shù)重用率;
注重與html分離, 減小reflow, 注重性能.
第五部分：圖片規(guī)范
每個(gè)模塊都會(huì)增加一個(gè)圖片文件夾颜阐，方便后期維護(hù)和處理平窘，請將同一個(gè)模塊的圖片放在同一個(gè)文件夾里面吓肋，圖片文件命名盡量跟css文件的命名相同，盡量使用小寫命名瑰艘。
圖片格式僅限于gif || png || jpg;
命名全部用小寫英文字母 || 數(shù)字 || -(統(tǒng)一用分劃線銜接) 的組合是鬼，其中不得包含漢字 || 空格 || 特殊字符；盡量用易懂的詞匯, 便于團(tuán)隊(duì)其他成員理解; 另, 命名分頭尾兩部分, 用分劃線隔開, 比如ad-left01.gif || btn-submit.gif;
在保證視覺效果的情況下選擇最小的圖片格式與圖片質(zhì)量, 以減少加載時(shí)間;
盡量避免使用半透明的png圖片(若使用, 請參考css規(guī)范相關(guān)說明);
運(yùn)用css sprite技術(shù)集中小的背景圖或圖標(biāo), 減小頁面http請求紫新。
第六部分：注釋規(guī)范
- html注釋: 注釋格式 , 只能在注釋的始末位置,不可置入注釋文字區(qū)域;
包圍均蜜，請務(wù)必要分開注釋的文字（即注釋文字中加空格）
css注釋: 注釋格式 ;/**/
JavaScript注釋, 單行注釋使用’//這兒是單行注釋’ ,多行注釋使用 ;/**/
第七部分：開發(fā)及測試工具約定（見文檔，下同）
第八部分：其他規(guī)范
第九部分：瀏覽器css hack
文檔說明
