9.09日(rì)音(yīn)訊,網頁制(zhì)作(zuò)前端開(δ±kāi)發規範文(wén)檔綜述。以下(xià)內(nè€λi)容都(dōu)是(shì)行(xíng)業(yè)的(de)各♥₹種好(hǎo)的(de)标準規範，能(néng)夠使大(®<dà)家(jiā)有(yǒu)一(yī)個(gè)更好(hǎo€★)的(de)代碼規則和(hé)提高(gāo)我們的(de)書(shū)'★Ω•寫和(hé)制(zhì)作(zuò)效率。
為(wèi)提高(gāo)團隊協作(zuò)效率,便于後台"≠♦人(rén)員(yuán)添加功能(néng)及前端後期優化(huà)≤維護,輸出高(gāo)質量的(de)文(←∏wén)檔,特制(zhì)訂此文(wén)檔÷♠♠.本規範文(wén)檔一(yī)經确認,前端開(kāi)發人(εε¥rén)員(yuán)必須按本文(wén)' φ檔規範進行(xíng)前台頁面開(kāi)發.本文(wén)檔↔β如(rú)有(yǒu)不(bù)對(duì)或者不(bù)合适的(de)地(π♥®dì)方請(qǐng)及時(shí)提出,經討(tǎo)論決定後∏δ方可(kě)更改.
基本準則
符合web标準,語義化(huà)html,結構表現(xiàn)↓™行(xíng)為(wèi)分(fēn)離(lí),兼容性優良.頁☆∏εφ面性能(néng)方面,代碼要(yào)求簡潔明(míng)了§✘(le)有(yǒu)序,盡可(kě)能(néng)的(de)λ$××減小(xiǎo)服務器(qì)負載,保證最快(kuài)的(de)解析速度.Ω ♠↓
文(wén)件(jiàn)規範
1.html,css,js,images文(wén)件(jiàn)Ω•≥ 均歸檔至<系統開(kāi)發規範>約定的(d±₽§e)目錄中;
2.html文(wén)件(jiàn)命名:英文(wén)命名,後綴↓★✘.htm.同時(shí)将對(duì)應界面稿放(f↔©àng)于同目錄中,若界面稿命名為(wèi)中文(wén),請( $®qǐng)重命名與html文(wén)件÷× ♣(jiàn)同名,以方便後端添加功能(n→☆éng)時(shí)查找對(duì)應頁面;
3.css文(wén)件(jiàn)γ≥命名:英文(wén)命名,後綴.css.共↓β用(yòng)base.css,首頁index.css,其他(<♥★tā)頁面依實際模塊需求命名;
4.Js文(wén)件(jiàn)命名:英文(wén)命名,後綴.js. &↑✘共用(yòng)common.js,其他(tā)₹∑依實際模塊需求命名.
html書(shū)寫規範
1.文(wén)檔類型聲明(míng)及編碼:統一(yī)為(wèi)hσ≥<tml5聲明(míng)類型<!DOCTYPEhtml>;編碼統一 (yī)為(wèi)<metacharset="gbk&qu≥↔∞ot;/>,書(shū)寫時(shí)利用(yòng)Iελ≠DE實現(xiàn)層次分(fēn)明(míng)的(de)♥¶✘縮進;
2.非特殊情況下(xià)樣式文(wén)件φ♦¥♥(jiàn)必須外(wài)鏈至<hα'ead>...</head>之間(jiān);非特殊 >情況下(xià)JavaScript文(wén)件(jiàn)必須外(₩>wài)鏈至頁面底部;
3.引入樣式文(wén)件(jiàn)或Jav€≈aScript文(wén)件(jiàn)時(shí),須略去(qù)默ε≠±認類型聲明(míng),寫法如(rú)下(xià):
<linkrel="stylesheet&q↓₽αuot;href="..."/> ∏∏
<style>...</stylΩ≠♣e>
<scriptsrc="...&quoγ✔¶♠t;></script>
4.引入JS庫文(wén)件(jiàn) ±,文(wén)件(jiàn)名須包含庫名稱及版本号及γ 是(shì)否為(wèi)壓縮版,比如(rú)jquery-1.$₽©↑4.1.min.js;引入插件(jiàn),文(wén)件(jiàn)名 ¶格式為(wèi)庫名稱+插件(jiàn)名稱,比如(rú♦ Ω)jQuery.cookie.js;
5.所有(yǒu)編碼均遵循xhtml标準,标簽&屬性&<δamp;屬性命名必須由小(xiǎo)寫字母及下(xià)劃線數βπ(shù)字組成,且所有(yǒu)标簽必須閉合,包括br(≤<<br/>),hr(<hΩ₩r/>)等;屬性值必須用(yòng)雙引号包括;
6.充分(fēn)利用(yòng)無兼容性問(wèn'Ω₹)題的(de)html自(zì)身(shēn)标簽,比如(rú)sp×→&an,em,strong,optgroup,label,等等♠;需要(yào)為(wèi)html元素添加自(zì)定義屬性的(de)時(sπ₽↔hí)候,首先要(yào)考慮下(xià)有($'↕yǒu)沒有(yǒu)默認的(de)已有(yǒσ•®u)的(de)合适标簽去(qù)設置,如(rú)果沒有(yǒu±≥),可(kě)以使用(yòng)須以"data-&quo↔₩£→t;為(wèi)前綴來(lái)添加自(zì)定義屬 ↓≤性，避免使用(yòng)"data:"等其他(tā)÷→命名方式;
7.語義化(huà)html,如(rú)标§÷₩∑題根據重要(yào)性用(yòng)h*(同一(∏ yī)頁面隻能(néng)有(yǒu)一(yī)個(gè)★σ≤γh1),段落标記用(yòng)p,列表用(yòng™<∞)ul,內(nèi)聯元素中不(bù)可(kě)嵌套塊級元素✔×↓;
8.盡可(kě)能(néng)減少(shǎo)div嵌套,如(rúπ✘)<divclass="box"'×₩><divclass="w® ¥elcome">歡迎訪問≠$(wèn)XXX,您的(de)用(yòng)戶名是(&®↓shì)<divclass="✔↕±name">用(yòng)戶名</div>♠☆∞</div></div>₩∞;完全可(kě)以用(yòng)以下(xià)代碼替代δ"¥:<divclass="b&φ♣ox"><p>歡迎訪問(wèn)✘∞§XXX,您的(de)用(yòng)戶名是(shì)<span>γ♦§;用(yòng)戶名</span></p>&≥₩<→lt;/div>;
9.書(shū)寫鏈接地(dì)址時(shí),必↓ 須避免重定向，例如(rú)：href="http://hd♠☆π'scwl.com/",即須在URL地(dì)址後面加上(shàng §ε)“/”；
10.在頁面中盡量避免使用(yòng)s✔"tyle屬性,即style="…";✘₽
11.必須為(wèi)含有(yǒu)描述性表單π≈元素(input,textarea)添加label,如(rú)<p>>β±;姓名:<inputtype="text"id=&q εεαuot;name"name="name"/>€γα;</p>須寫成:<p><labelfor=&q✘←§←uot;name">姓名:<δ∑;/label><inputtype="tδεext"id="name"™±φ/></p>
12.能(néng)以背景形式呈現(xiàn)的(de)圖片,盡量寫λ入css樣式中;
13.重要(yào)圖片必須加上(shàng)alt屬性₽;給重要(yào)的(de)元素和(hé)截斷的(de)元素加上(shàng÷¥•)title;
14.給區(qū)塊代碼及重要(yào)功能(néng) ££(比如(rú)循環)加上(shàng)注釋,♥✔方便後台添加功能(néng);
15.特殊符号使用(yòng):盡可(kě)能(néng)使用&£ (yòng)代碼替代:比如(rú)<(<)&>≠<(>)&空(kōng)格()&»(&r♥→∑aquo;)等等;
16.書(shū)寫頁面過程中,請(qǐng)考慮向後擴展性;
17.class&id參見(jiàn)css書(shū™•γ∑)寫規範.
css書(shū)寫規範
1.編碼統一(yī)為(wèi)utf"÷∑Ω-8;
2.協作(zuò)開(kāi)發及分(fēn)工(gōng):i會(h←™¶>uì)根據各個(gè)模塊,同時(shí) ♥根據頁面相(xiàng)似程序,事(shì)先寫好(÷∏γhǎo)大(dà)體(tǐ)框架文(wén)件(jiàn),分(fēn)配給☆¥$¶前端人(rén)員(yuán)實現(xiàn)內(nèi)部結構&a♥✔mp;表現(xiàn)&行(xíng)為(wèi);共用(®★™yòng)css文(wén)件(jiàn♣★")base.css由i書(shū)寫,協作(zuò)開(kāi)發±δ↑過程中,每個(gè)頁面請(qǐng)務必都(dōu)要(yào)引 ₽ ✔入,此文(wén)件(jiàn)包含reset及頭&∞部底部樣式,此文(wén)件(jiàn)不(bù★¶π)可(kě)随意修改;
3.class與id的(de)使用(yòng≥♥ ):id是(shì)唯一(yī)的(de)并✘₽∑≤是(shì)父級的(de),class是(£↑shì)可(kě)以重複的(de)并是(shì)子(zǐ)級的±Ω☆∑(de),所以id僅使用(yòng)在大(dà)的(de)模塊上( β✘✔shàng),class可(kě)用(yòng)在重複使用₽&(yòng)率高(gāo)及子(zǐ)級中;id原則上(shàng)都(d©¶λ ōu)是(shì)由我分(fēn)發框架文(wén)件(jiàn)λ≤時(shí)命名的(de),為(wèi)JavaScript預留鈎子(γ$zǐ)的(de)除外(wài);
4.為(wèi)JavaScript預留鈎子(zǐ)的(de)命名,↑Ω÷$請(qǐng)以js_起始,比如(rú):js_hide,js_show;∏α
5.class與id命名:大(dà)的(de$ )框架命名比如(rú)header/footer/wrap&∑↑per/left/right之類的(de)在2 φ中由i統一(yī)命名.其他(tā)樣式名稱由小(xi★'ǎo)寫英文(wén)&數(shù)字&_來(lá✘≈i)組合命名,如(rú)i_comment,fontred,©♥∞width200;避免使用(yòng)中文(wén)拼音(yī≥∏♦n),盡量使用(yòng)簡易的(de)©♠±單詞組合;總之,命名要(yào)語義化(huà)εΩε,簡明(míng)化(huà).
6.規避class與id命名(此條重要↔↕(yào),若有(yǒu)不(bù)明(mΩ∞íng)白(bái)請(qǐng)及時(shí)♦↕與i溝通(tōng)):
a）通(tōng)過從(cóng)屬寫法規避,示例見(jiàn) ☆"d;
b）取父級元素id/class命名 '部分(fēn)命名,示例見(jiàn)d;
c）重複使用(yòng)率高(gāo)的(de)命名,請(qǐ∏α≤ng)以自(zì)己代号加下(xià)劃線起始,比如(rú)i_clear®δ;
d）a,b兩條,适用(yòng)于在2中已建≠€好(hǎo)框架的(de)頁面,如(rú),要(yào)在2中已建¥λ"★好(hǎo)框架的(de)頁面代碼<divid="mainn∏♦av"></div>中π$β'加入新的(de)div元素,
按a命名法則:<divid="mainn¥φav"><divclass=βλ∑"firstnav">...&∞π♥lt;/div></div>,
樣式寫法:#mainnav.firstnav{.......}>↕₽<
按b命名法則:<divid="mainnav& &α quot;><divclasπ>$s="main_firstnav" §≠×>...</div><≠€;/div>,
樣式寫法:.main_firstnav{.......}
7.css屬性書(shū)寫順序,$₽建議(yì)遵循:布局定位屬性-->↕₹≤自(zì)身(shēn)屬性-->文(wén)本屬性--≈←>其他(tā)屬性.此條可(kě)根據自₩ε(zì)身(shēn)習(xí)慣書(shū)寫,但( ♥dàn)盡量保證同類屬性寫在一(yī)起.屬性列舉:布局定位屬性主要( $yào)包括:display&list-style&posi☆δtion（相(xiàng)應的(de)top,righ÷♥≤t,bottom,left）＆float&clear＆visibil€ £ity＆overflow；自(zì)身(shēn)屬性主要(yào)包括:w φ↑✘idth&height&mar™ ✔∑gin&padding&bφ ≥®order&background;文(wén)本屬性主要(yàoε€)包括：color&font&text-dec♥§§oration&text-align&verti↑'≥cal-align&white-¥βspace&其他(tā)&content;我所列出的(de)¥™☆這(zhè)些(xiē)屬性隻是(shì)最常用(yòng)到(dào)的(✔σδde),并不(bù)代表全部;
8.書(shū)寫代碼前,考慮并提高(gāo≤≈♦)樣式重複使用(yòng)率;
9.充分(fēn)利用(yòng)html自(zì)身(s±✔hēn)屬性及樣式繼承原理(lǐ)減少(shǎo)代碼量,✘¥≥←比如(rú):
<ulclass="∞≠;list"><li>這(zh×÷®è)兒(ér)是(shì)标題列表<span>2010-09-★♣¶15</span></ul>
定義
ul.listli{position:r ®∑elative}ul.listlispan{position∞©:absolute;right:0}
即可(kě)實現(xiàn)日(rì)期 ∏₽居右顯示
10.樣式表中中文(wén)字體(t ↑πǐ)名,請(qǐng)務必轉碼成unicode碼,以避免編碼錯(cuò<✔)誤時(shí)亂碼;
11.背景圖片請(qǐng)盡可(kě)能≠α↑(néng)使用(yòng)sprite技(jì)術(♦≠ shù),減小(xiǎo)http請(qǐng)求,考慮到&₩ (dào)多(duō)人(rén)協作(zuò)開(kāi)Ω✘發,sprite按模塊制(zhì)作(zuò);
12.使用(yòng)table标簽時(shí)(盡量避免使用(yòng✔£→•)table标簽),請(qǐng)不(bù)要(yào)用(×"≥yòng)width/height/cellspacing/cel€δσ¥lpadding等table屬性直接定義表現(xiàn),應≈∏盡可(kě)能(néng)的(de)利用(yφ→òng)table自(zì)身(shēn)私有← (yǒu)屬性分(fēn)離(lí)結構與表現(xiàn),如(rú)♦÷thead,tr,th,td,tbody,tfo←¥&ot,colgroup,scope;(cell×φspaing及cellpadding的(de)css控制σ★↔↑(zhì)方法:table{border:0;margγ→in:0;border-collapse:collapΩ >'se;}tableth,tabletd{padding:0;},base.cs♠ s文(wén)件(jiàn)中我會(huì)初始化(h © uà)表格樣式)
13.杜絕使用(yòng)<metahttp-e™quiv="X-UA-Compatibl§≠e"content="IE=7"/&g← "t;兼容ie8;
14.用(yòng)png圖片做(zuò)圖片時(shλ₹í),要(yào)求圖片格式為(wèi)png-8格式,若pn& g-8實在影(yǐng)響圖片質量或其中有(yǒu)半透明(míng)效果,→¶€請(qǐng)為(wèi)ie6單獨定義背景∏₹¶¶:
_background:none;_filter:pro∞←gid:DXImageTransform.←÷↔Microsoft.AlphaImageLoader(sizingM σethod=crop,src=&rsquoα♥↔;img/bg.png’);
15.避免兼容性屬性的(de)使用(yòng),比如(£→↓♦rú)text-shadow||css3的(de)相(xiàng)關屬性"☆ ;
16.減少(shǎo)使用(yòng)影(yǐng)響性能(néng♣≈ λ)的(de)屬性,比如(rú)position↔γγ:absolute||float;
17.必須為(wèi)大(dà)區(qū)塊樣式添加注釋,小(xi☆≈"ǎo)區(qū)塊适量注釋;
18.代碼縮進與格式:建議(yì)單行(xíng)書(shū)寫,可≠₽↕(kě)根據自(zì)身(shēn)習(xí)慣,後期優化(huà)♠♣©©i會(huì)統一(yī)處理(lǐ);
JavaScript書(shū)寫規範
1.文(wén)件(jiàn)編碼統一(yī)為(wè↑₩i)utf-8,書(shū)寫過程過,每行(xíng)代碼結束必須有(yǒ ☆λu)分(fēn)号;原則上(shàng)ε®所有(yǒu)功能(néng)均根據XXX項 "目需求原生(shēng)開(kāi)發,以避免網上(shàng)downπ∏下(xià)來(lái)的(de)代碼造成的(de)代碼污 ε染(沉冗代碼||與現(xiàn)有(yǒu)代碼沖突©∞₽≥||...);
2.庫引入:原則上(shàng)僅引入jQuery庫,若需引入第¶≤三方庫,須與團隊其他(tā)人(rén)員(yuán)討(tǎo>♣↑)論決定;
3.變量命名:駝峰式命名.原生(shēng)Ja→←™δvaScript變量要(yào)求是(s♦₹≈↓hì)純英文(wén)字母,首字母須小(↑π✔xiǎo)寫,如(rú)iTaoLun;
jQuery變量要(yào)求首字符為(wèi)'_↓ ☆',其他(tā)與原生(shēng)Java<∞↓Script規則相(xiàng)同,如(rú):_iTaoLun;
另,要(yào)求變量集中聲明(míng),避免全局變量.
4.類命名:首字母大(dà)寫,駝峰§®式命名.如(rú)ITaoLun;
5.函數(shù)命名:首字母小(xiǎo)寫駝峰式命名.•'如(rú)iTaoLun();
6.命名語義化(huà),盡可(kě)能(néng)利用(yò§α§ng)英文(wén)單詞或其縮寫;
7.盡量避免使用(yòng)存在兼容性及消耗資<↔源的(de)方法或屬性,比如(rú)eval_♠♥α↔r()&innerText;
8.後期優化(huà)中,JavaScripβ≠§t非注釋類中文(wén)字符須轉換成unico₽÷★de編碼使用(yòng),以避免編碼錯(cuò)誤時(shí)亂碼顯<↓示;
9.代碼結構明(míng)了(leβ ®),加适量注釋.提高(gāo)函數(shù)重用≤↕(yòng)率;
10.注重與html分(fēn)離(lí),減小(xiǎo→ )reflow,注重性能(néng).
圖片規範
1.所有(yǒu)頁面元素類圖片均放(fàng)入★✘↕img文(wén)件(jiàn)夾,測試用(yòng)← ∞圖片放(fàng)于img/demoimg文(wé ↑ &n)件(jiàn)夾;
2.圖片格式僅限于gif||png||jpg;
3.命名全部用(yòng)小(xiǎo)寫英文(wén)字母||數( ≠shù)字||_的(de)組合，其中不(bù)得(de)包含漢©♥>字||空(kōng)格||特殊字符；盡量用(y'♥ òng)易懂(dǒng)的(de)詞彙,便于團隊≤®ε其他(tā)成員(yuán)理(lǐ)解<™♦;另,命名分(fēn)頭尾兩部分(fēn),用(yòng)下(≤$>®xià)劃線隔開(kāi),比如(rú)ad_left01.gi§€f||btn_submit.gif;
4.在保證視(shì)覺效果的(de)情況下(xià)選擇最小(xiǎ♦₽παo)的(de)圖片格式與圖片質量,以減少(shǎo)'¶∑加載時(shí)間(jiān);
5.盡量避免使用(yòng)半透明(míng)的(d€↕✘e)png圖片(若使用(yòng),請(qǐng) ™參考css規範相(xiàng)關說(shuō)明(míng∞∏↔♦));
6.運用(yòng)csssprite技(jì)術(shù)集中小(φ✘φxiǎo)的(de)背景圖或圖标,減小(xiǎo)頁面↕♣http請(qǐng)求,但(dàn)注意,請(qǐ>φ♦ng)務必在對(duì)應的(de)spritepsd源圖中劃參考線,并保φβ存至img目錄下(xià).
注釋規範
1.html注釋:注釋格式<!--這(zhè)兒(ér)是(©→λ×shì)注釋-->,'--'隻能(néng)在注釋的(d <$€e)始末位置,不(bù)可(kě)置入注釋文(γ wén)字區(qū)域;
2.css注釋:注釋格式;
3.JavaScript注釋,單行(xíng)注釋使用(yòng) 9;//這(zhè)兒(ér)是(shì)單行↕'↓♦(xíng)注釋',多(duō)行(xíng)注釋使用(yφ↓òng);
開(kāi)發及測試工(gōng)具約π↔定
建議(yì)使用(yòng)Aptana||Dw||Vim,亦可(kěσγ)根據自(zì)己喜好(hǎo)選擇,但φ↓(dàn)須遵循如(rú)下(xià)原則:
1.不(bù)可(kě)利用(yòng)IDE的(de)視( ε≥shì)圖模式'畫(huà)'代碼;
2.不(bù)可(kě)利用(yòng)IDE生(sh♠αēng)成相(xiàng)關功能(néng)代碼,比如(rú)Dw內(n•α >èi)置的(de)一(yī)些(xiē)功能(néng)js;
3.編碼必須格式化(huà),比如(∑₩rú)縮進;
測試工(gōng)具:前期開(kāi)發僅測試FireF↑₹ox&IE6&IE7&IE8,後期優✔₩ ♦化(huà)時(shí)加入Opera&Chrome&→←;Safari;
建議(yì)測試順序:FireFox-->∏↓←IE7-->IE8-->IE6-->Opera--™≥↑>Chrome-->Safa♥∏ri,建議(yì)安裝firebug及IETabPlus插件(jiànα±).
其他(tā)規範
1.開(kāi)發過程中嚴格按分(fēn)工(gōng)完&→成頁面,以提高(gāo)css複用(yòng)率,避≠σ免重複開(kāi)發;
2.減小(xiǎo)沉冗代碼,書(s≥×hū)寫所有(yǒu)人(rén)都(dōu)可(kě)以λδ ★看(kàn)的(de)懂(dǒng)的(d≈π✘σe)代碼.簡潔易懂(dǒng)是(shì)一(yī)種美<γ (měi)德.為(wèi)用(yòng)戶著(zhe)想,為(wèi)服務器δ×∏<(qì)著(zhe)想.
