前端開發(fā)代碼使用規(guī)范_第1頁
前端開發(fā)代碼使用規(guī)范_第2頁
前端開發(fā)代碼使用規(guī)范_第3頁
前端開發(fā)代碼使用規(guī)范_第4頁
前端開發(fā)代碼使用規(guī)范_第5頁
已閱讀5頁，還剩5頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

1、WEB前端代碼規(guī)范規(guī)范目的為提高團(tuán)隊(duì)協(xié)作效率， 便于后臺人員添加功能及前端后期優(yōu)化維護(hù)，輸出高質(zhì)量的文檔，特制訂此文檔。本規(guī)范文檔一經(jīng)確認(rèn)，前端開發(fā)人員必須按本文檔規(guī)范進(jìn)行前臺頁面開發(fā)。本文檔如有不對或者不合適的地方請及時提出，經(jīng)討論決定后方可更改?；緶?zhǔn)則符合web標(biāo)準(zhǔn)；語義化html；結(jié)構(gòu)、表現(xiàn)、行為分離；兼容性優(yōu)良。頁面性能方面，代碼要求簡潔明了有序，盡可能的減小服務(wù)器負(fù)載，保證最快的解析速度。文件規(guī)范1. Html，css，js，images文件均歸檔至相應(yīng)約定的目錄中。2. html文件命名：英文駝峰式命名，文件名.html。按實(shí)際模塊需求命名。3. jsp文件命名：英文駝

2、峰式命名，文件名.jsp。按實(shí)際模塊需求命名。4. css文件命名：英文駝峰式命名，文件名.css。共用base.css，首頁index.css，其他頁面按實(shí)際模塊需求命名。5. js文件命名：英文駝峰式命名，文件名.js。共用common.js，其他依實(shí)際模塊需求命名。html書寫規(guī)范1. 文檔類型聲明及編碼： 統(tǒng)一為html5的聲明類型<!DOCTYPE html>；編碼統(tǒng)一為<meta charset="utf-8"/>，書寫時利用IDE實(shí)現(xiàn)層次分明的縮進(jìn)。2. 非特殊情況下css文件必須在<head>

3、.</head>之間引入，選擇link方式引入而非import形式。3. 非特殊情況下js文件必須在頁面底部引入。4. 引入樣式文件或JavaScript文件時，須略去默認(rèn)類型聲明，寫法如下：<link rel="stylesheet" href="."/><style>.</style><script src="."></script>5. 引入JS庫文件，文件名須包含庫名稱及版本號及是否為壓縮版，比如：；6. 引入插件，文件名格式

4、為庫名稱+插件名稱，比如：。7. 所有HTML標(biāo)簽嵌套必須是正確的，禁止出現(xiàn)多出或者少出閉合標(biāo)簽的情況。8. 所有編碼均遵循xhtml標(biāo)準(zhǔn)，標(biāo)簽、屬性、屬性命名必須由小寫字母及下劃線數(shù)字組成，且所有標(biāo)簽必須閉合，包括br(<br />)，hr(<hr />)等；屬性值必須用雙引號包括。9. 充分利用無兼容性問題的html自身標(biāo)簽，比如span、em、strong、optgroup、label10. 需要為html元素添加自定義屬性的時候，首先要考慮下有沒有默認(rèn)的已有的合適標(biāo)簽去設(shè)置，如果沒有，須以"data-"為前綴來添加自定義屬

5、性，避免使用"data："等其他命名方式。11. 語義化html，如標(biāo)題根據(jù)重要性用h1-h6(同一頁面只能有一個h1)，段落標(biāo)記用p，列表用ul，內(nèi)聯(lián)元素中不可嵌套塊狀元素。12. 盡可能減少div的嵌套層數(shù)。13. 在頁面中盡量避免使用內(nèi)嵌樣式表，即在標(biāo)簽內(nèi)使用style=""。14. 以背景形式呈現(xiàn)的圖片，盡量寫入css樣式中；重要圖片必須加上alt屬性；15. 特殊符號使用：盡可能使用代碼替代：比如<(&lt;)、>(&gt;)、空格(&nbsp;)、&(&amp;)、”（&quot;）

6、等等；16. 盡量避免使用過度復(fù)雜的HTML結(jié)構(gòu)。css書寫規(guī)范1. 編碼統(tǒng)一為utf-8。2. 為了避免一些瀏覽器兼容性問題以及增加樣式重用性，每個頁面必須引入base.css（詳見附件一），此文件不可隨意修改。3. class與id的使用：id是唯一的并是父級的，class是可以重復(fù)的并是子級的，所以id僅使用在大的模塊上，class可用在重復(fù)使用率高及子級中。4. 為JavaScript預(yù)留鉤子的命名，請以js_起始，比如：js_hide，js_show。5. class與id命名：使用英文命名，命名要語義化，簡明化，但不要使用諸如first，last之類的命名。使用駝峰式和下劃線分隔相

7、結(jié)合的命名規(guī)則，即命名應(yīng)以父級加子級的命名規(guī)范，如：父級的類為simple 子級的類應(yīng)該為simple_first，以此類推，但是盡量避免出現(xiàn)超過四級的類命名。6. css屬性書寫順序，建議遵循：自身屬性->布局定位屬性->文本屬性->其他屬性。此條可根據(jù)自身習(xí)慣書寫，但盡量保證同類屬性寫在一起。屬性列舉： 自身屬性主要包括：width、height、margin、padding、border、background；布局定位屬性主要包括：display、list-style、position（相應(yīng)的top、right、bottom、left）、float、clear

8、、visibility、overflow； 文本屬性主要包括：color、font、text-decoration、text-align、vertical-align、white-space其他：content；7. 書寫代碼前，考慮并提高樣式重復(fù)使用率。8. 充分利用html自身屬性及樣式繼承原理減少代碼量。9. 樣式表中中文字體名，請務(wù)必轉(zhuǎn)碼成unicode碼，以避免編碼錯誤時亂碼。10. 背景圖片請盡可能使用sprite技術(shù)，減小http請求，考慮到多人協(xié)作開發(fā)，sprite按模塊制作。11. 使用table標(biāo)簽時(盡量避免使用table標(biāo)簽)，請不要用width、height

9、、cellspacing、cellpadding等table屬性直接定義表現(xiàn)，應(yīng)盡可能的利用table自身私有屬性分離結(jié)構(gòu)與表現(xiàn)，如：thead、tr、th、td、tbody、tfoot、colgroup、scope。12. 用png圖片做圖片時，要求圖片格式為png-8格式，若png-8實(shí)在影響圖片質(zhì)量或其中有半透明效果，請為ie6單獨(dú)定義背景：_background：none；_filter：progid：DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop，src=img/bg.png)；13. 避免兼容性屬性的使用，

10、比如text-shadow、css3的相關(guān)屬性；14. 減少使用影響性能的屬性，比如position：absolute、float；15. 代碼縮進(jìn)與格式：開發(fā)階段單行書寫，系統(tǒng)交付時可再將所有css進(jìn)行壓縮；使用Tab鍵進(jìn)行縮進(jìn)，每層縮進(jìn)一個Tab鍵16. 背景重復(fù)，確保使用的圖片在與迭代方向相同的長度要大于1像素而小于10像素。簡單點(diǎn)說，就是x軸迭代，寬度要在1和10之間，y軸迭代，長度要在1和10之間。JavaScript書寫規(guī)范1. 文件編碼統(tǒng)一為utf-8，書寫過程過，每條語句必須以分號結(jié)束。2. 變量命名：駝峰式命名。首字母須小寫，如：iTaoLun。3. 類命名：駝峰式命名。首字

11、母大寫，如：ITaoLun。4. 函數(shù)命名：駝峰式命名。首字母小寫。如：iTaoLun()。5. 構(gòu)造函數(shù)命名：全部大寫。6. 命名語義化，盡可能利用英文單詞或其縮寫。7. 盡量避免使用存在兼容性及消耗資源的方法或?qū)傩裕热鏴val()、innerText。8. 后期優(yōu)化中，JavaScript非注釋類中文字符須轉(zhuǎn)換成unicode編碼使用，以避免編碼錯誤時亂碼顯示。9. 代碼結(jié)構(gòu)明了，加適量注釋。提高函數(shù)重用率。10. 注重與html分離，減小reflow，注重性能。11. 減少DOM訪問次數(shù)。方法是將得到的元素用變量存儲起來。12. 減少DOM事件綁定。13. 將自己寫的JS用匿名函數(shù)包起

12、來，避免變量沖突。(function()()圖片規(guī)范1. 所有頁面元素類圖片均放入images文件夾，測試用圖片放于images/demo文件夾；2. 圖片格式僅限于gif、png、jpg；3. 命名全部用小寫英文字母、數(shù)字、_的組合，其中不得包含漢字、空格、特殊字符；盡量用易懂的詞匯。4. 在保證視覺效果的情況下選擇最小的圖片格式與圖片質(zhì)量，以減少加載時間。5. 盡量避免使用半透明的png圖片。6. 運(yùn)用csssprite技術(shù)集中小的背景圖或圖標(biāo)，減小頁面http請求，但注意，請務(wù)必在對應(yīng)的psd源圖中劃參考線，并保存至images目錄下。注釋規(guī)范1. html注釋：注釋格式<!-注釋

13、->，'-'只能在注釋的始末位置，不可置入注釋文字區(qū)域；2. css注釋：注釋格式/*注釋*/；3. JavaScript注釋，單行注釋使用'/單行注釋'，多行注釋使用/*多行注釋*/。語言組織類1. 新增，而非“添加，增加”之類的詞語2. 編輯，而非“修改，更新”之類的詞語3. 保存，而非“提交”之類的詞語4. 所有操作除了保存表單外，保存用戶操作統(tǒng)一使用“確定”詞語開發(fā)及測試工具約定建議使用Myeclipse、eclipse、Aptana，亦可根據(jù)自己喜好選擇，但須遵循如下原則：1. 不可利用IDE的視圖模式“畫”代碼。2. 不可利用IDE生成相關(guān)功能

14、代碼，比如Dw內(nèi)置的一些功能js；3. 編碼必須格式化，比如縮進(jìn)；4. 測試工具：前期開發(fā)僅測試FireFox、IE6、IE7、IE8、IE9，后期優(yōu)化時加入Opera、Chrome、Safari；5. 建議測試順序：FireFox->IE9->IE8->IE7->IE6->Opera->Chrome->Safari，必須安裝firebug插件。base.css/*CSS reset*/body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,bloc

15、kquote,th,tdmargin:0;padding:0;tableborder-collapse:collapse;border-spacing:0;fieldset,imgborder:0;address,caption,cite,code,dfn,em,strong,th,varfont-style:normal;font-weight:normal;ol,ullist-style:none;caption,thtext-align:left;h1,h2,h3,h4,h5,h6font-size:100%;font-weight:normal;q:before,q:aftercont

16、ent:''abbr,acronymborder:0;atext-decoration:none;cursor:pointer;a:hover,a:focustext-decoration:underline; body,button,input,select,textarea,a/* for ie */font:12px/1.5tahoma,arial,5b8b4f53,sans-serif;button,input,select,textareafont-size:100%;/*文字排版*/.f12font-size:12px;.f13font-size:13px;.f14

17、font-size:14px;.f16font-size:16px;.f20font-size:20px;.fbfont-weight:bold;.fnfont-weight:normal;.t2text-indent:2em;.lh150line-height:150%;.lh180line-height:180%;.lh200line-height:200%;.unltext-decoration:underline;.no_unltext-decoration:none;/*定位*/.tltext-align:left;.tctext-align:center;.trtext-align

18、:right;.bcmargin-left:auto;margin-right:auto;.flfloat:left;display:inline;.frfloat:right;display:inline;.cbclear:both;.clclear:left;.crclear:right;.clearclear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;.clearfix:aftercontent:"."display:block;height:0;clear:both;v

19、isibility:hidden;.clearfixdisplay:inline-block* html .clearfixheight:1%.clearfixdisplay:block;.vmvertical-align:middle;.prposition:relative;.paposition:absolute;.abs-rightposition:absolute;right:0;.zoomzoom:1;.hiddenvisibility:hidden;.nonedisplay:none;/*長度高度*/.w10width:10px;.w20width:20px;.w30width:

20、30px;.w40width:40px;.w50width:50px;.w60width:60px;.w70width:70px;.w80width:80px;.w90width:90px;.w100width:100px;.w200width:200px;.w250width:250px;.w300width:300px;.w400width:400px;.w500width:500px;.w600width:600px;.w700width:700px;.w800width:800px;.wwidth:100%;.h50height:50px;.h80height:80px;.h100he

21、ight:100px;.h200height:200px;.hheight:100%;/*邊距*/.m10margin:10px;.m15margin:15px;.m30margin:30px;.mt5margin-top:5px;.mt10margin-top:10px;.mt15margin-top:15px;.mt20margin-top:20px;.mt30margin-top:30px;.mt50margin-top:50px;.mt100margin-top:100px;.mb10margin-bottom:10px;.mb15margin-bottom:15px;.mb20mar

22、gin-bottom:20px;.mb30margin-bottom:30px;.mb50margin-bottom:50px;.mb100margin-bottom:100px;.ml5margin-left:5px;.ml10margin-left:10px;.ml15margin-left:15px;.ml20margin-left:20px;.ml30margin-left:30px;.ml50margin-left:50px;.ml100margin-left:100px;.mr5margin-right:5px;.mr10margin-right:10px;.mr15margin-right:15px;.mr20margin-right:20px;.mr30margin-right

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論