完整版WEB前端開發代碼使用要求規范_第1頁
完整版WEB前端開發代碼使用要求規范_第2頁
完整版WEB前端開發代碼使用要求規范_第3頁
完整版WEB前端開發代碼使用要求規范_第4頁
完整版WEB前端開發代碼使用要求規范_第5頁
免費預覽已結束，剩余4頁可下載查看

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

1、實用文檔WE前端代碼規范規范目的為提高團隊協作效率，便于后臺人員添加功能及前端后期優化維護，輸出高質量的文檔，特制訂此文檔。本規范文檔一經確認，前端開發人員必須按本文檔規范進行前臺頁面開發。本文檔如有不對或者不合適的地方請及時提出，經討論決定后方可更改。基本準則符合web標準；語義化html；結構、表現、行為分離；兼容性優良。頁面性能方面，代碼要求簡潔明了有序，盡可能的減小服務器負載，保證最快的解析速度。文件規范1.Html,css,js,images文件均歸檔至相應約定的目錄中frontstage全局公共模塊WEB-INFbackStage02.html文件命名：英文駝峰式命名，文件名.ht

2、ml按實際模塊需求命名。文案大全實用文檔3. jsp文件命名：英文駝峰式命名，文件名.jsp。按實際模塊需求命名。4. css文件命名：英文駝峰式命名，文件名.css。共用base.css,首頁index.css,其他頁面按實際模塊需求命名。5. js文件命名：英文駝峰式命名，文件名.jso共用common.js,其他依實際模塊需求命名。html書寫規范1 .文檔類型聲明及編碼：統一為html5的聲明類型<!DOCTYPEhtml>編碼統一為<metacharset="utf-8"/>,書寫時利用IDE實現層次分明的縮進。2 .非特殊情況下css文件

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

4、js;6 .引入插件，文件名格式為庫名稱+插件名稱，比如：jQuery.cookie.js。7 .所有HTM標簽嵌套必須是正確的，禁止出現多出或者少出閉合標簽的情況。8 .所有編碼均遵循xhtml標準，標簽、屬性、屬性命名必須由小寫字母及下劃線數字組成，且所有標簽必須閉合，包括br(<br/>),hr(<hr/>)等；屬性值必須用雙引號包括。9 .充分利用無兼容性問題的html自身標簽，比如span、emstrong、optgroup、label10 .需要為html元素添加自定義屬性的時候，首先要考慮下有沒有默認的已有的合適標簽去設置，如果沒有，須以"dat

5、a-"為前綴來添加自定義屬性，避免使用"data:"等其他命名方式。文案大全實用文檔11 .語義化html,如標題根據重要性用h1-h6(同一頁面只能有一個hi),段落標記用p,列表用ul,內聯元素中不可嵌套塊狀元素。12 .盡可能減少div的嵌套層數。13 .在頁面中盡量避免使用內嵌樣式表，即在標簽內使用style=""。14 .以背景形式呈現的圖片，盡量寫入css樣式中；重要圖片必須加上alt屬性；15 .特殊符號使用：盡可能使用代碼替代：比如<(&lt;)、>(&gt;)、空格(&nbsp;)、&

6、;(&amp;)、”(&quot;)等等;16 .盡量避免使用過度復雜的HTM磔構。css書寫規范1 .編碼統一為utf-8。2 .為了避免一些瀏覽器兼容性問題以及增加樣式重用性，每個頁面必須引入base.css(詳見附件一)，此文件不可隨意修改。3 .class與id的使用：id是唯一的并是父級的，class是可以重復的并是子級的，所以id僅使用在大的模塊上，class可用在重復使用率高及子級中。4 .為JavaScript預留鉤子的命名，請以js_起始，比如：js_hide,js_show。5 .class與id命名：使用英文命名，命名要語義化，簡明化，但不要使用諸如fir

7、st,last之類的命名。使用駝峰式和下劃線分隔相結合的命名規則，即命名應以父級加子級的命名規范，如：父級的類為simple子級的類應該為simple_first,以此類推，但是盡量避免出現超過四級的類命名。6 .css屬性書寫順序，建議遵循：自身屬性->布局定位屬性->文本屬性->其他屬性。此條可根據自身習慣書寫，但盡量保證同類屬性寫在一起。屬性列舉：自身屬性主要包括：width、height>margin>padding>border>background;布局定位屬性主要包括:display、list-style、position（相應的top、

8、right、bottom>left）、float、clear、visibility、overflow；文本屬性主要包括：color、font、text-decoration、text-align、vertical-align、white-space文案大全實用文檔其他：content;7 .書寫代碼前，考慮并提高樣式重復使用率。8,充分利用html自身屬性及樣式繼承原理減少代碼量。9 .樣式表中中文字體名，請務必轉碼成unicode碼，以避免編碼錯誤時亂碼。10 .背景圖片請盡可能使用sprite技術，減小http請求，考慮到多人協作開發，sprite按模塊制作。11,使用table標簽

9、時(盡量避免使用table標簽)，請不要用width、height>cellspacingcellpadding等table屬性直接定義表現，應盡可能的利用table自身私有屬性分離結構與表現，如：thead、tr、th、td、tbody、tfoot、colgroup、scope。12 .用png圖片做圖片時，要求圖片格式為png-8格式，若png-8實在影響圖片質量或其中有半透明效果，請為ie6單獨定義背景：_background:none；_filter:progid:DXImageTransform.Microsoft.AlphalmageLoader(sizingMethod=c

10、rop,src='img/bg.png')；13 .避免兼容性屬性的使用，比如text-shadow、css3的相關屬性；14 .減少使用影響性能的屬性，比如position:absolute、float；15 .代碼縮進與格式：開發階段單行書寫，系統交付時可再將所有css進行壓縮；使用Tab鍵進行縮進，每層縮進一個Tab鍵16 .背景重復，確保使用的圖片在與迭代方向相同的長度要大于1像素而小于10像素。簡單點說，就是x軸迭代，寬度要在1和10之間，y軸迭代，長度要在1和10之間。JavaScript書寫規范1.文件編碼統一為utf-8,書寫過程過，每條語句必須以分號結束。2,

11、變量命名：駝峰式命名。首字母須小寫，如：iTaoLun。3.類命名：駝峰式命名。首字母大寫，如：ITaoLun。4,函數命名：駝峰式命名。首字母小寫。如：iTaoLun()。5,構造函數命名：全部大寫。文案大全實用文檔6 .命名語義化，盡可能利用英文單詞或其縮寫。7 .盡量避免使用存在兼容性及消耗資源的方法或屬性，比如eval()、innerText。8 .后期優化中，JavaScript非注釋類中文字符須轉換成unicode編碼使用，以避免編碼錯誤時亂碼顯示。9 .代碼結構明了，加適量注釋。提高函數重用率。10 .注重與html分離，減小reflow,注重性能。11 .減少DO時問次數。方法

12、是將得到的元素用變量存儲起來。12 .減少DO郵件綁定。13 .將自己寫的JS用匿名函數包起來，避免變量沖突。(function()()圖片規范1 .所有頁面元素類圖片均放入images文件夾，測試用圖片放于images/demo文件夾；2 .圖片格式僅限于gif、png、jpg；3 .命名全部用小寫英文字母、數字、_的組合，其中不得包含漢字、空格、特殊字符；盡量用易懂的詞匯。4 .在保證視覺效果的情況下選擇最小的圖片格式與圖片質量，以減少加載時間。5 .盡量避免使用半透明的png圖片。6 .運用csssprite技術集中小的背景圖或圖標，減小頁面http請求，但注意，請務必在對應的psd源圖

13、中劃參考線，并保存至images目錄下。注釋規范1. html注釋：注釋格式<!-注釋->,'-'只能在注釋的始末位置，不可置入注釋文字區域;文案大全實用文檔2. css注釋：注釋格式/*注釋*/;3. JavaScript注釋，單行注釋使用,/單行注釋，多行注釋使用/*多行注釋*/語言組織類1 .新增，而非“添加，增加”之類的詞語2 .編輯，而非“修改，更新”之類的詞語3 .保存，而非“提交”之類的詞語4 .所有操作除了保存表單外，保存用戶操作統一使用“確定”詞語開發及測試工具約定建議使用Myeclipse、eclipse、Aptana,亦可根據自己喜好選擇，但須

14、遵循如下原則：1 .不可利用IDE的視圖模式“畫”代碼。2 .不可利用IDE生成相關功能代碼，比如Dw內置的一些功能js;3 .編碼必須格式化，比如縮進；4 .測試工具：前期開發僅測試FireFox、IE6、IE7、IE8、IE9,后期優化時加入Opera、ChromeSafari；5 .建議測試順序：FireFox->IE9->IE8->IE7->IE6->Opera->Chrome->Safari,必須安裝firebug插件。文案大全實用文檔base.css/*CSSreset*/body,div,dl,dt,dd,ul,ol,li,h1,h2,h

15、3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,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

16、-size:100%font-weight:normal;q:before,q:aftercontent:''abbr,acronymborder:0;atext-decoration:none;cursor:pointer;a:hover,a:focustext-decoration:underline;body,button,input,select,textarea,a/*forie*/font:12px/1.5tahoma,arial,5b8b4f53,sans-serif;button,input,select,textareafont-size:100%/*文字排版

17、*/f12font-sizef13font-size：12px;：13px;f14font-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

18、-align:left；.tctext-align:center；.trtext-align: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:&q

19、uot;."display:block;height:0;clear:both;visibility:hidden;.clearfixdisplay:inline-block*html.clearfixheight:14.clearfixdisplay:block;.vmvertical-align:middle;.prposition:relative;.paposition:absolute;.abs-rightposition:absolute;right:0;.zoomzoom1;.hiddenvisibility:hidden;.nonedisplay:none;/*長度高

20、度*/.w10width:10px;.w20width:20px;.w30width: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;.

21、wwidth:100%.h50height:50px;.h80height:80px;.h100height: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;.mb10ma

22、rgin-bottom:10px;.mb15margin-bottom:15px;.mb20margin-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-rig

溫馨提示

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

評論

0/150

提交評論