9.09日音訊,網(wǎng)頁制作前端開發(fā)規(guī)范文檔綜述。以下內(nèi)容都是行業(yè)的各種好的標準規(guī)范，能夠使大家有一個更好的代碼規(guī)則和提高我們的書寫和制作效率。
為提高團隊協(xié)作效率,便于后臺人員添加功能及前端后期優(yōu)化維護,輸出高質(zhì)量的文檔,特制訂此文檔.本規(guī)范文檔一經(jīng)確認,前端開發(fā)人員必須按本文檔規(guī)范進行前臺頁面開發(fā).本文檔如有不對或者不合適的地方請及時提出,經(jīng)討論決定后方可更改.
基本準則
符合web標準,語義化html,結構表現(xiàn)行為分離,兼容性優(yōu)良.頁面性能方面,代碼要求簡潔明了有序,盡可能的減小服務器負載,保證最快的解析速度.
文件規(guī)范
1.html,css,js,images文件均歸檔至<系統(tǒng)開發(fā)規(guī)范>約定的目錄中;
2.html文件命名:英文命名,后綴.htm.同時將對應界面稿放于同目錄中,若界面稿命名為中文,請重命名與html文件同名,以方便后端添加功能時查找對應頁面;
3.css文件命名:英文命名,后綴.css.共用base.css,首頁index.css,其他頁面依實際模塊需求命名;
4.Js文件命名:英文命名,后綴.js.共用common.js,其他依實際模塊需求命名.
html書寫規(guī)范
1.文檔類型聲明及編碼:統(tǒng)一為html5聲明類型<!DOCTYPEhtml>;編碼統(tǒng)一為<metacharset="gbk"/>,書寫時利用IDE實現(xiàn)層次分明的縮進;
2.非特殊情況下樣式文件必須外鏈至<head>...</head>之間;非特殊情況下JavaScript文件必須外鏈至頁面底部;
3.引入樣式文件或JavaScript文件時,須略去默認類型聲明,寫法如下:
<linkrel="stylesheet"href="..."/>
<style>...</style>
<scriptsrc="..."></script>
4.引入JS庫文件,文件名須包含庫名稱及版本號及是否為壓縮版,比如jquery-1.4.1.min.js;引入插件,文件名格式為庫名稱+插件名稱,比如jQuery.cookie.js;
5.所有編碼均遵循xhtml標準,標簽&屬性&屬性命名必須由小寫字母及下劃線數(shù)字組成,且所有標簽必須閉合,包括br(<br/>),hr(<hr/>)等;屬性值必須用雙引號包括;
6.充分利用無兼容性問題的html自身標簽,比如span,em,strong,optgroup,label,等等;需要為html元素添加自定義屬性的時候,首先要考慮下有沒有默認的已有的合適標簽去設置,如果沒有,可以使用須以"data-"為前綴來添加自定義屬性，避免使用"data:"等其他命名方式;
7.語義化html,如標題根據(jù)重要性用h*(同一頁面只能有一個h1),段落標記用p,列表用ul,內(nèi)聯(lián)元素中不可嵌套塊級元素;
8.盡可能減少div嵌套,如<divclass="box"><divclass="welcome">歡迎訪問XXX,您的用戶名是<divclass="name">用戶名</div></div></div>完全可以用以下代碼替代:<divclass="box"><p>歡迎訪問XXX,您的用戶名是<span>用戶名</span></p></div>;
9.書寫鏈接地址時,必須避免重定向，例如：href="http://hdscwl.com/",即須在URL地址后面加上“/”；
10.在頁面中盡量避免使用style屬性,即style="…";
11.必須為含有描述性表單元素(input,textarea)添加label,如<p>姓名:<inputtype="text"id="name"name="name"/></p>須寫成:<p><labelfor="name">姓名:</label><inputtype="text"id="name"/></p>
12.能以背景形式呈現(xiàn)的圖片,盡量寫入css樣式中;
13.重要圖片必須加上alt屬性;給重要的元素和截斷的元素加上title;
14.給區(qū)塊代碼及重要功能(比如循環(huán))加上注釋,方便后臺添加功能;
15.特殊符號使用:盡可能使用代碼替代:比如<(<)&>(>)&空格()&»(»)等等;
16.書寫頁面過程中,請考慮向后擴展性;
17.class&id參見css書寫規(guī)范.
css書寫規(guī)范
1.編碼統(tǒng)一為utf-8;
2.協(xié)作開發(fā)及分工:i會根據(jù)各個模塊,同時根據(jù)頁面相似程序,事先寫好大體框架文件,分配給前端人員實現(xiàn)內(nèi)部結構&表現(xiàn)&行為;共用css文件base.css由i書寫,協(xié)作開發(fā)過程中,每個頁面請務必都要引入,此文件包含reset及頭部底部樣式,此文件不可隨意修改;
3.class與id的使用:id是唯一的并是父級的,class是可以重復的并是子級的,所以id僅使用在大的模塊上,class可用在重復使用率高及子級中;id原則上都是由我分發(fā)框架文件時命名的,為JavaScript預留鉤子的除外;
4.為JavaScript預留鉤子的命名,請以js_起始,比如:js_hide,js_show;
5.class與id命名:大的框架命名比如header/footer/wrapper/left/right之類的在2中由i統(tǒng)一命名.其他樣式名稱由小寫英文&數(shù)字&_來組合命名,如i_comment,fontred,width200;避免使用中文拼音,盡量使用簡易的單詞組合;總之,命名要語義化,簡明化.
6.規(guī)避class與id命名(此條重要,若有不明白請及時與i溝通):
a）通過從屬寫法規(guī)避,示例見d;
b）取父級元素id/class命名部分命名,示例見d;
c）重復使用率高的命名,請以自己代號加下劃線起始,比如i_clear;
d）a,b兩條,適用于在2中已建好框架的頁面,如,要在2中已建好框架的頁面代碼<divid="mainnav"></div>中加入新的div元素,
按a命名法則:<divid="mainnav"><divclass="firstnav">...</div></div>,
樣式寫法:#mainnav.firstnav{.......}
按b命名法則:<divid="mainnav"><divclass="main_firstnav">...</div></div>,
樣式寫法:.main_firstnav{.......}
7.css屬性書寫順序,建議遵循:布局定位屬性-->自身屬性-->文本屬性-->其他屬性.此條可根據(jù)自身習慣書寫,但盡量保證同類屬性寫在一起.屬性列舉:布局定位屬性主要包括:display&list-style&position（相應的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;我所列出的這些屬性只是最常用到的,并不代表全部;
8.書寫代碼前,考慮并提高樣式重復使用率;
9.充分利用html自身屬性及樣式繼承原理減少代碼量,比如:
<ulclass="list"><li>這兒是標題列表<span>2010-09-15</span></ul>
定義
ul.listli{position:relative}ul.listlispan{position:absolute;right:0}
即可實現(xiàn)日期居右顯示
10.樣式表中中文字體名,請務必轉碼成unicode碼,以避免編碼錯誤時亂碼;
11.背景圖片請盡可能使用sprite技術,減小http請求,考慮到多人協(xié)作開發(fā),sprite按模塊制作;
12.使用table標簽時(盡量避免使用table標簽),請不要用width/height/cellspacing/cellpadding等table屬性直接定義表現(xiàn),應盡可能的利用table自身私有屬性分離結構與表現(xiàn),如thead,tr,th,td,tbody,tfoot,colgroup,scope;(cellspaing及cellpadding的css控制方法:table{border:0;margin:0;border-collapse:collapse;}tableth,tabletd{padding:0;},base.css文件中我會初始化表格樣式)
13.杜絕使用<metahttp-equiv="X-UA-Compatible"content="IE=7"/>兼容ie8;
14.用png圖片做圖片時,要求圖片格式為png-8格式,若png-8實在影響圖片質(zhì)量或其中有半透明效果,請為ie6單獨定義背景:
_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src=’img/bg.png’);
15.避免兼容性屬性的使用,比如text-shadow||css3的相關屬性;
16.減少使用影響性能的屬性,比如position:absolute||float;
17.必須為大區(qū)塊樣式添加注釋,小區(qū)塊適量注釋;
18.代碼縮進與格式:建議單行書寫,可根據(jù)自身習慣,后期優(yōu)化i會統(tǒng)一處理;
JavaScript書寫規(guī)范
1.文件編碼統(tǒng)一為utf-8,書寫過程過,每行代碼結束必須有分號;原則上所有功能均根據(jù)XXX項目需求原生開發(fā),以避免網(wǎng)上down下來的代碼造成的代碼污染(沉冗代碼||與現(xiàn)有代碼沖突||...);
2.庫引入:原則上僅引入jQuery庫,若需引入第三方庫,須與團隊其他人員討論決定;
3.變量命名:駝峰式命名.原生JavaScript變量要求是純英文字母,首字母須小寫,如iTaoLun;
jQuery變量要求首字符為'_',其他與原生JavaScript規(guī)則相同,如:_iTaoLun;
另,要求變量集中聲明,避免全局變量.
4.類命名:首字母大寫,駝峰式命名.如ITaoLun;
5.函數(shù)命名:首字母小寫駝峰式命名.如iTaoLun();
6.命名語義化,盡可能利用英文單詞或其縮寫;
7.盡量避免使用存在兼容性及消耗資源的方法或?qū)傩?比如eval_r()&innerText;
8.后期優(yōu)化中,JavaScript非注釋類中文字符須轉換成unicode編碼使用,以避免編碼錯誤時亂碼顯示;
9.代碼結構明了,加適量注釋.提高函數(shù)重用率;
10.注重與html分離,減小reflow,注重性能.
圖片規(guī)范
1.所有頁面元素類圖片均放入img文件夾,測試用圖片放于img/demoimg文件夾;
2.圖片格式僅限于gif||png||jpg;
3.命名全部用小寫英文字母||數(shù)字||_的組合，其中不得包含漢字||空格||特殊字符；盡量用易懂的詞匯,便于團隊其他成員理解;另,命名分頭尾兩部分,用下劃線隔開,比如ad_left01.gif||btn_submit.gif;
4.在保證視覺效果的情況下選擇最小的圖片格式與圖片質(zhì)量,以減少加載時間;
5.盡量避免使用半透明的png圖片(若使用,請參考css規(guī)范相關說明);
6.運用csssprite技術集中小的背景圖或圖標,減小頁面http請求,但注意,請務必在對應的spritepsd源圖中劃參考線,并保存至img目錄下.
注釋規(guī)范
1.html注釋:注釋格式<!--這兒是注釋-->,'--'只能在注釋的始末位置,不可置入注釋文字區(qū)域;
2.css注釋:注釋格式;
3.JavaScript注釋,單行注釋使用'//這兒是單行注釋',多行注釋使用;
開發(fā)及測試工具約定
建議使用Aptana||Dw||Vim,亦可根據(jù)自己喜好選擇,但須遵循如下原則:
1.不可利用IDE的視圖模式'畫'代碼;
2.不可利用IDE生成相關功能代碼,比如Dw內(nèi)置的一些功能js;
3.編碼必須格式化,比如縮進;
測試工具:前期開發(fā)僅測試FireFox&IE6&IE7&IE8,后期優(yōu)化時加入Opera&Chrome&Safari;
建議測試順序:FireFox-->IE7-->IE8-->IE6-->Opera-->Chrome-->Safari,建議安裝firebug及IETabPlus插件.
其他規(guī)范
1.開發(fā)過程中嚴格按分工完成頁面,以提高css復用率,避免重復開發(fā);
2.減小沉冗代碼,書寫所有人都可以看的懂的代碼.簡潔易懂是一種美德.為用戶著想,為服務器著想.
