WEB前端開發(fā)規(guī)范文檔.docx

WEB前端開發(fā)規(guī)范文檔目錄WEB前端開發(fā)規(guī)范文檔1規(guī)范目的2基本準(zhǔn)則2文件規(guī)范2html書寫規(guī)范2html其他規(guī)范3css書寫規(guī)范4JavaScript書寫規(guī)范5jQuery部分5開發(fā)及測試工具約定6其他規(guī)范6規(guī)范目的為提高團(tuán)隊(duì)協(xié)作效率, 便于后臺人員添加功能及前端后期優(yōu)化維護(hù), 輸出高質(zhì)量的文檔, 特制訂此文檔: 本規(guī)范文檔一經(jīng)確認(rèn), 前端開發(fā)人員必 須按本文檔規(guī)范進(jìn)行前臺頁面開發(fā): 本文檔如有不對或者不合適的地方請及時(shí)提出, 經(jīng)討論決定后方可更改:基本準(zhǔn)則1：符合web標(biāo)準(zhǔn), 語義化html,遵循內(nèi)容（HTML）、顯示（CSS）、行為（JavaScript）分離的代碼組織模式。2：代碼格式化，保持干凈整潔。3：換行必須縮進(jìn)一個(gè)tab。4：編寫所有前臺頁面時(shí)，請使用已有模板進(jìn)行復(fù)制，在模板的基礎(chǔ)上進(jìn)行開發(fā)。5：每一個(gè)頁面都必須有一個(gè)獨(dú)立的css，js文件。6：如果不是用HTML5編寫的網(wǎng)站，請用IE7，IE8，IE9，火狐，谷歌，webkit，safari內(nèi)核進(jìn)行測試兼容性。7：如果是HTML5編寫的網(wǎng)站，請用IE9，火狐，谷歌，webkit，safari內(nèi)核進(jìn)行測試兼容性。文件規(guī)范1: html, css, js, images文件均歸檔至約定的目錄中;2: html文件命名: 英文命名, 后綴:htm: 同時(shí)將對應(yīng)界面稿放于同目錄中, 若界面稿命名為中文, 請重命名與html文件同名, 以方便后端添加 功能時(shí)查找對應(yīng)頁面;3: css文件命名: 英文命名, 后綴:css: 共用base:css, 首頁index:css, 其他頁面依實(shí)際模塊需求命名:;4: Js文件命名: 英文命名, 后綴:js: 共用common:js, 其他依實(shí)際模塊需求命名:html書寫規(guī)范1：所有元素都必須小寫，屬性也是，如：正確錯(cuò)誤2： 元素必須成對出現(xiàn)，如必須寫成特殊元素除外，如：3：標(biāo)簽中不允許出現(xiàn)樣式，必須用class來聲明樣式，如：錯(cuò)誤正確4：元素id命名必須是駝峰式命名如：正確錯(cuò)誤錯(cuò)誤5：元素class命名規(guī)范是：元素簡寫+”-”+功能名，如：正確錯(cuò)誤錯(cuò)誤6：元素name命名必須遵循駝峰式命名法。正確錯(cuò)誤錯(cuò)誤7：元素屬性必須有值：正確8：元素屬性必須用雙引號，不允許使用單引號。正確錯(cuò)誤9：如果元素需要自定義屬性，請用data-xxx方式命名。10：嚴(yán)禁使用已在XHTML1:0中已移除的標(biāo)簽，如：s，i，b，font等html其他規(guī)范1: 文檔類型聲明及編碼: 統(tǒng)一為html5聲明類型; 編碼統(tǒng)一為, 書寫時(shí)利用IDE實(shí)現(xiàn)層 次分明的縮進(jìn);2: 非特殊情況下樣式文件必須外鏈至:之間;非特殊情況下JavaScript文件必須外鏈至頁面底部;3: 引入樣式文件或JavaScript文件時(shí), 須略去默認(rèn)類型聲明, 寫法如下: Example Source Code www:52css:com:4: 引入JS庫文件, 文件名須包含庫名稱及版本號及是否為壓縮版, 比如jquery-1:4:1:min:js; 引入插件, 文件名格式為庫名稱+插件名稱, 比 如jQuery:cookie:js;5: 所有編碼均遵循xhtml標(biāo)準(zhǔn), 標(biāo)簽 & 屬性 & 屬性命名 必須由小寫字母及下劃線數(shù)字組成, 且所有標(biāo)簽必須閉合, 包括 br (), hr()等; 屬性值必須用雙引號包括;6: 充分利用無兼容性問題的html自身標(biāo)簽, 比如span, em, strong, optgroup, label,等等; 需要為html元素添加自定義屬性的時(shí)候, 首先 要考慮下有沒有默認(rèn)的已有的合適標(biāo)簽去設(shè)置, 如果沒有, 可以使用須以data-為前綴來添加自定義屬性，避免使用data:等其他命名方式;7: 語義化html, 如 標(biāo)題根據(jù)重要性用h*(同一頁面只能有一個(gè)h1), 段落標(biāo)記用p, 列表用ul, 內(nèi)聯(lián)元素中不可嵌套塊級元素;8: 盡可能減少div嵌套, 如歡迎訪問XXX, 您的用 戶名是用戶名完全可以用以下代碼替代: 歡迎 訪問XXX, 您的用戶名是用戶名;9: 書寫鏈接地址時(shí), 必須避免重定向，例如：href=http:/itaolun:com/, 即須在URL地址后面加上“/”；10: 在頁面中盡量避免使用style屬性,即style=;11: 必須為含有描述性表單元素(input, textarea)添加label, 如 Example Source Code www:52css:com姓 名: 須寫成:姓 名: 12: 能以背景形式呈現(xiàn)的圖片, 盡量寫入css樣式中;13: 重要圖片必須加上alt屬性; 給重要的元素和截?cái)嗟脑丶由蟭itle;14: 給區(qū)塊代碼及重要功能(比如循環(huán))加上注釋, 方便后臺添加功能;15: 特殊符號使用: 盡可能使用代碼替代: 比如 () & 空格( ) & () 等等;16: 書寫頁面過程中, 請考慮向后擴(kuò)展性;css書寫規(guī)范1：元素盡量使用class選擇器匹配，對于特殊功能可以考慮使用ID選擇器。2：明確各選擇器的優(yōu)先級，作用范圍。3：CSS寫完之后必須使用“;”號結(jié)尾，雖然瀏覽器支持不用分號結(jié)尾，但是不建議這么做。4：除非編寫HTML5頁面，否則不允許使用CSS3偽類，如：:nth-child(1)等偽類，禁止使用。5：編寫CSS樣式時(shí)，不允許換行，樣式必須一行寫完，自動(dòng)換行除外。6：對于子元素樣式采用鏈選擇器進(jìn)行選擇，如：:btn-save div7：元素選擇器只能在定義全局CSS和子元素匹配時(shí)使用（盡量少用），其他地方禁止使用。8：請記住IE瀏覽器的hack方式，如下：IE6 = _width:100px;IE7 = *width:100px;IE8 = width:100px9;IE8/9 = width:100px0;IE9 = width:100px90;9：: 編碼統(tǒng)一為utf-8;10： css屬性書寫順序, 建議遵循: 布局定位屬性-自身屬性-文本屬性-其他屬性: 此條可根據(jù)自身習(xí)慣書寫, 但盡量保證同類屬 性寫在一起:11： 書寫代碼前, 考慮并提高樣式重復(fù)使用率;12： 充分利用html自身屬性及樣式繼承原理減少代碼量, 比如: Example Source Code www:52css:com這兒是標(biāo)題列表2010-09- 15定義ul:list liposition:relative ul:list li spanposition:absolute; right:0即可實(shí)現(xiàn)日期居右顯示13： 樣式表中中文字體名, 請務(wù)必轉(zhuǎn)碼成unicode碼, 以避免編碼錯(cuò)誤時(shí)亂碼;14： 使用table標(biāo)簽時(shí)(盡量避免使用table標(biāo)簽), 請不要用width/ height/cellspacing/cellpadding等table屬性直接定義表現(xiàn), 應(yīng)盡可能的利用table自身私有屬性分離結(jié)構(gòu)與表現(xiàn) , 如 Example Source Code www:52css:comthead,tr,th,td,tbody,tfoot,colgroup,scope; (cellspaing及cellpadding的css控制方法: tableborder:0;margin:0;border-collapse:collapse; table th, table tdpadding:0; , base:css文件中我會初始化表格樣式)15： 杜絕使用 兼容 ie8; Example Source Code www:52css:com_background:none;_filter:progid:DXImageTransform:Microsoft:AlphaImageLoader (sizingMethod=crop, src=img/bg:png);16： 避免兼容性屬性的使用, 比如text-shadow | css3的相關(guān)屬性;17：減少使用影響性能的屬性, 比如position:absolute | float ;18：必須為大區(qū)塊樣式添加注釋, 小區(qū)塊適量注釋;JavaScript書寫規(guī)范1：JS必須使用外部文件方式加載。2：JS引入代碼必須集中放置在之間，嚴(yán)禁在標(biāo)簽外引入JS，特殊情況除外。3：JS變量命名請使用駝峰式命名法。4：JS變量嚴(yán)禁使用不明覺厲的命名方法，如：var a;var b;5：每一個(gè)函數(shù)與事件監(jiān)聽都必須有注釋，聲明其作用，如果代碼過長，那么請對一個(gè)功能模塊進(jìn)行注釋。6：JS函數(shù)命名必須使用駝峰式命名。7：JS函數(shù)嚴(yán)禁使用不明覺厲的命名方法，如：function a()8：JS代碼換行時(shí)，必須使用縮進(jìn)。jQuery部分1：使用jQuery選擇器如果是唯一的，請使用ID選擇器。2：使用class選擇器時(shí)，在class前加上標(biāo)簽名，如：$(“div:class”)正確$(“:class”)錯(cuò)誤3：盡量使用ID選擇器代替class選擇器。4：如果一個(gè)變量存放的是jQuery對象的話，那么請用”$”符號開頭，聲明這是一個(gè)jQuery對象。5：避免使用live()函數(shù)綁定事件，可以使用bind()和on()代替。6：把頁面上可能會影響頁面加載速度的代碼綁定到$(window):load()事件中，如動(dòng)畫，視覺特效等代碼。圖片規(guī)范1: 所有頁面元素類圖片均放入img文件夾, 測試用圖片放于img/demoimg文件夾;2: 圖片格式僅限于gif | png | jpg;3: 命名全部用小寫英文字母 | 數(shù)字 | _ 的組合，其中不得包含漢字 | 空格 | 特殊字符；盡量用易懂的詞匯, 便于團(tuán)隊(duì)其他成員理 解; 另, 命名分頭尾兩部分, 用下劃線隔開, 比如ad_left01:gif | btn_submit:gif;4: 在保證視覺效果的情況下選擇最小的圖片格式與圖片質(zhì)量, 以減少加載時(shí)間;5: 盡量避免使用半透明的png圖片(若使用, 請參考css規(guī)范相關(guān)說明);注釋規(guī)范1: html注釋: 注釋格式 , -只能在注釋的始末位置,不可置入注釋文字區(qū)域;2: css注釋: 注釋格式 /*這兒是注釋*/;3: JavaScript注釋, 單行注釋使用/這兒是單行注釋 ,多行注釋使用 /* 這兒有多行注釋 */;開發(fā)及測試工具約定建議使用Aptana | Dw | Vim , 亦可根據(jù)自己喜好選擇, 但須遵循如下原則:1: 不可利用IDE的視圖模式畫代碼;2: 不可利用IDE生成相關(guān)功能代碼, 比如Dw內(nèi)置的一些功能js;3: 編碼必須格式化, 比如縮進(jìn);建議測試順序: FireFox