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

下載本文檔

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

文檔簡介

1、web前端代碼規(guī)范規(guī)范目的為提高團(tuán)隊協(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)約定的目錄中cssimagesbackstagejs后臺投塊.csswebrootimagesfrontstagevjsweb

2、-inf前臺模塊.2. html文件命名：英文駝峰式命名，文件名.html。按實際模塊需求命名。3. jsp文件命名：英文駝峰式命名，文件名.jsp。按實呩模塊需求命名。4. css文件命名：英文駝峰式命名，文件名.css。共用base, css,首貞index, css,其他 頁而按實際模塊需求命名。5. js文件命名：英文駝峰式命名，文件名.js。共用common, js，其他依實際模塊需求命 名。html書寫規(guī)范1. 文檔類型聲明及編碼：統(tǒng)一為html5的聲明類型<!doctype html；編碼統(tǒng)一為 <meta charset=utf-8/，|5寫時利用ide實現(xiàn)s次分明

3、的縮進(jìn)。2. 非特殊情況卜* css文件必須在head./head之間引入，選擇link方式引入而非 ©import 形式。3. 非特殊情況下js文件必須在頁面底部引入。4. 引入樣式文件或javascript文件吋，須略去默認(rèn)類型聲明，寫法如下：<1 ink rel=stylesheet href=/style. </stylescript src=</script>5. 引入js庫文件，文件名須包含庫名稱及版本號及是否為壓縮版，比如： jquery-1. 4. 1. min. js；6. 引入插件，文件名格式為庫名稱+插件名稱，比如：jquery. coo

4、kie. jso7. 所宥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、label6.需要為html元素添加自定義屬性的時候，首先要考慮下有沒有默認(rèn)的已有的合適標(biāo)簽去 設(shè)置，如果沒有，須以"data-"為前綴來添加自定義屬性，避免使

5、用"data: 等其他命名方式。語義化html,如標(biāo)題根據(jù)重要性用hl-h6(同一頁面只能有一個hl)，段落標(biāo)記用p,歹ij表 用ul，內(nèi)聯(lián)元素中不可嵌蕓塊狀元素。盡可能減少div的嵌套層數(shù)。在頁而中盡量避免使用內(nèi)嵌樣式表，即在標(biāo)簽內(nèi)使用styles""。以背景形式呈現(xiàn)的圖片，盡量寫入cm樣式中；重要圖片必須加上alt屬性；特殊符號使用：盡可能使用代碼替代:比如(&lt;)、(&gt;)、空格(&nbsp;)、&(&amp;)、”(&quot;)等等；盡量避免使用過度復(fù)雜的html結(jié)構(gòu)。css書寫規(guī)范1. 編碼統(tǒng)一為

6、utf-8。2. 為丫避免一些瀏覽器兼容性問題以及增加樣式重用性，每個頁面必須引入base, css (詳見 附件一)，此文件不可隨意修改。3. class與id的使用：id是唯一的并是父級的，class是可以重復(fù)的并是子級的，所以id 僅使用在大的模塊上，class可用在重復(fù)使用率高及子級中。4. 為javascript預(yù)留鉤子的命名，請以js_起始，比如:js_hide, js_show05. class與id命名：使用英文命名，命名要語義化，簡明化，但不耍使用諸如first, last 之類的命名。使用駝峰式和下劃線分隔相結(jié)合的命名規(guī)則，即命名應(yīng)以父級加子級的命名規(guī)范, 如：父級的類為s

7、imple子級的類應(yīng)該為simple_f irst,以此類推，但是盡量避免岀現(xiàn)超過四級的 類命名。6. css屬性書寫順序，建議遵循：自身屬性一布局定位屬性一文木屬性一其他屬性。此條 可根據(jù)自身習(xí)慣書寫，但盡量保證同類屬性寫在一起。屬性列舉：自身屬性主要包括:width、height、margin、padding、border、background；布局定位屬性主要包括:display> list-style、position （相應(yīng)的 top、right、bottom、 left） 、 float、 clear、 visibility、 overflow；文木屬性主要包括：color、

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

9、利用table自身私有屬性分離結(jié)構(gòu) 與表現(xiàn)，如：thead、tr、th、td、tbody、tfoot、colgroup、scope。12. 用png圖片做圖片時，要求圖片格式為png-8格式，若png_8實在影響圖片質(zhì)量或其中有 半透明效果，請為ie6單獨定義背景：background： none； filter： progid： dximagctransform. microsoft. alphalmagcloadcr (sizingmethod=crop, src=, img/bg. png )；13. 避免兼容性屬性的使用，比如text-shadow、css3的相關(guān)屬性；14. 減少使用

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

11、字母小寫。如：itaolunoo5. 構(gòu)造函數(shù)命名：全部大寫。6. 命名語義化，盡可能利用英文單詞或其縮寫。7. 盡量避免使用存在兼容性及消耗資源的方法或?qū)傩?，比如evalo、innertexto8. 后期優(yōu)化中，javascript非注釋類屮文字符須轉(zhuǎn)換成unicode編碼使用，以避免編碼錯誤 時亂碼顯示。9. 代碼結(jié)構(gòu)明了，加適量注釋。提高函數(shù)重用率。10. 注重與html分離，減小reflow，注重性能。11. 減少dom訪m次數(shù)。方法是將得到的元素用變量存儲起來。12. 減少dom事件綁定。13. 將自己寫的js用匿名函數(shù)乜起來，避免變量沖突。(function()()片規(guī)范1. 所有

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

13、ss注釋：注釋格式/*注釋*/;3. javascript注釋，單行注釋使用/單行注釋，多行注釋使用/*多行注釋*/。語言組織類1. 新增，而非“添加，增加”之類的同語2. 編輯，而非“修改，更新”之類的詞語3. 保存，而非“提交”之類的詞語4. 所有操作除了保存表單外，保存用戶操作統(tǒng)一使用“確定”詞語開發(fā)及測試工具約定建議使用myeclipse、eclipse、aptana,亦卩1根據(jù)自己喜好選擇，但須遵循如下原則：1. 不可利用ide的視圖模式“畫”代碼。2. 不可利用ide生成相關(guān)功能代碼，比如dw內(nèi)置的一些功能js;3. 編碼必須格式化，比如縮進(jìn)；4. 測試工具:前期開發(fā)僅測試fire

14、fox、ie6、ie7、ie8、ie9,后期優(yōu)化時加入opera、 chrome、 safari；5. 建議測試順序：firefox>ie9>ie8>ie7>ie6>0pera>chrome>safari,必須 安裝firebug插件。base, css/*css reset*/ body, div，dl，dt，dd, ul，ol，li，hl, h2, h3, h4, h5, h6,pre, form, f ieldset, input, textarea, p,blockquote, th, tdmargin: 0padding: 0tablebor

15、der-collapse:collapse;border-spacing: 0fieldset, imgborder: 0address, caption, cite, code, dfn, cm, strong, th, var font-style:/7o77/7<?7;font-weight:norm alol, ul1iststye:none; caption, thtext-al ign: left.，hl, h2, h3, h4, h5, h6 font-size: 100% font-weight:似人q:before, q:aftercontent: ”；abbr，acr

16、onm border: 0a text-decorat ion: none.，cursor: pointer;a: hover, a: focus textdccoration: underline; body，button, input,select, textarea, a/氺 for ie*/font: 12px/l. 5tahoma，arial，5b8b4f53, sansserif.，button, input, select, textareafont-size:100%/*文字排版*/.f12font-size:12px.f13font-size:13px.f 14font-si

17、ze: 14px.f16font-size:16px.f20font-size:/?%;.fb font-wei ght: bold.，.fn font-weight:normal.t2text-indent: 2em.lhl50 line-height: 150%;.lhl80line-height:iso%;.lh200line-height:«.uni text-decoration:underline;.no_unltext-decoration:none/*定位*/.tl text-al ign: left.，.tctext-align:center;.tr text-al

18、ign:r/a(; bemargin-left:automargin-right:auto.f 1 float:display: inline.，.fr float:di splay: ini inc .cb clear: cl clear: left.，.cr clear:門誠廣;.clear clear:di splay:overflowvisibilitywidth: height:.clearfix: after content: zz; display: block; height: 6; clear:visibility:.clearfixdisplay:inline-blockh

19、tml . clcarfix height: 1%. clearfix display:.vmvcr t i ca1-a1i gn: middlc;.pr position:relative;.paposi tion:.abs-rightposition:absojute;right: 0.zoomzoom:1.hidden visibility:力 jwe".none display: 776)/?;a長度高度嶺.wlo width: 10px.w20 wi dth: 20px.w30 width:<5y?/z¥.w40width: 40px.w50width: 5

20、0px.w60width: 60px.w70width: 70px.w80 width .w90 width: 90px.wloowidth: loopx.，.w200 width: 200px.w250 width:.w300width: 300px.w400width: 400px.w500width: 500px;.w600width:600px.w700 width: 700px.w800 width: 800px.wwidth.h50height: 50px.h80height: 80px.hlooheight:100px.h200 he i ght: 200px.hheight:

21、100%.、/ *邊距*/.mlo margin: 10px.ml5margin:15px.m3omargin:30px.mt5margin-top: 5px.mtlomargi ntop:10px.mtl5margi ntop:15px.mt20margin-top:7/zy;.mt30margin-top: 30px.mt50margin-top: 50px.mt 100margin-top:100px.mb10margin-bottom:10px.mbl5margin-bottom:i5px.mb20 margi n-bottom:.mb30margi n-bottom:30px.mb5

22、0margin-bottom: 50px.mbloomargin-bottom:100px .ml5margin-left:5px.ml10margin-left:10px.ml 15margi nleft:15px.ml20margin-left: 20px.ml30 margin-left: 30px.ml50margin-left: 50px.ml100margin-left: 100px.mr5margin-right: 5px.mr10margin-right:10px.mrl5margin-right:15px.mr20 margin-right:/?;.mr30 margin-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

提交評論