9.09日(rì)音(yīn)訊,網頁制(zhì)作(zuò≤≈)前端開(kāi)發規範文(wén)檔綜述

歡迎訪問(wèn)XXX,您的(de)用(yòng)戶名是(shì)用(yòng)戶名

　　9.書(shū)寫鏈接地(dì)址時(shí),必須避免重定向，例如(rú)：href="http://hdscwl.com/",即須在URL地(dì)址後面加上(shàng)“/”；

　　10.在頁面中盡量避免使用(yòng)style屬性,即style="…";

　　11.必須為(wèi)含有(yǒu)描述性表單元素(input,textarea)添加label,如(rú)

姓名:

姓名:

　　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)格()&»(»)等等;

　　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會(huì)根據各個(gè)模塊,同時(shí)根據頁面相(xiàng)似程序,事(shì)先寫好(hǎo)大(dà)體(tǐ)框架文(wén)件(jiàn),分(fēn)配給前端人(rén)員(yuán)實現(xiàn)內(nèi)部結構&表現(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/wrapper/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)頁面代碼

　　按a命名法則:...

　　樣式寫法:#mainnav.firstnav{.......}

　　按b命名法則:...

　　樣式寫法:.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&position（相(xiàng)應的(de)top,right,bottom,left）＆float&clear＆visibility＆overflow；自(zì)身(shēn)屬性主要(yào)包括:width&height&margin&padding&border&background;文(wén)本屬性主要(yào)包括：color&font&text-decoration&text-align&vertical-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ì)身(shēn)屬性及樣式繼承原理(lǐ)減少(shǎo)代碼量,比如(rú):

　　定義

　　ul.listli{position:relative}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/cellpadding等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,tfoot,colgroup,scope;(cellspaing及cellpadding的(de)css控制(zhì)方法:table{border:0;margin:0;border-collapse:collapse;}tableth,tabletd{padding:0;},base.css文(wén)件(jiàn)中我會(huì)初始化(huà)表格樣式)

　　13.杜絕使用(yòng)兼容ie8;

　　14.用(yòng)png圖片做(zuò)圖片時(shí),要(yào)求圖片格式為(wèi)png-8格式,若png-8實在影(yǐng)響圖片質量或其中有(yǒu)半透明(míng)效果,請(qǐng)為(wèi)ie6單獨定義背景:

　　_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src=’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)JavaScript變量要(yào)求是(shì)純英文(wén)字母,首字母須小(xiǎo)寫,如(rú)iTaoLun;

　　jQuery變量要(yào)求首字符為(wèi)'_',其他(tā)與原生(shēng)JavaScript規則相(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à)中,JavaScript非注釋類中文(wén)字符須轉換成unicode編碼使用(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.gif||btn_submit.gif;

　　4.在保證視(shì)覺效果的(de)情況下(xià)選擇最小(xiǎo)的(de)圖片格式與圖片質量,以減少(shǎo)加載時(shí)間(jiān);

　　5.盡量避免使用(yòng)半透明(míng)的(de)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注釋:注釋格式,'--'隻能(néng)在注釋的(de)始末位置,不(bù)可(kě)置入注釋文(wén)字區(qū)域;

　　2.css注釋:注釋格式;

　　3.JavaScript注釋,單行(xíng)注釋使用(yòng)'//這(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)發僅測試FireFox&IE6&IE7&IE8,後期優化(huà)時(shí)加入Opera&Chrome&Safari;

　　建議(yì)測試順序:FireFox-->IE7-->IE8-->IE6-->Opera-->Chrome-->Safari,建議(yì)安裝firebug及IETabPlus插件(jiàn).

　　其他(tā)規範

　　1.開(kāi)發過程中嚴格按分(fēn)工(gōng)完成頁面,以提高(gāo)css複用(yòng)率,避免重複開(kāi)發;

　　2.減小(xiǎo)沉冗代碼,書(shū)寫所有(yǒu)人(rén)都(dōu)可(kě)以看(kàn)的(de)懂(dǒng)的(de)代碼.簡潔易懂(dǒng)是(shì)一(yī)種美(měi)德.為(wèi)用(yòng)戶著(zhe)想,為(wèi)服務器(qì)著(zhe)想.