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

《WEB前端開發(fā)規(guī)范文檔》由會(huì)員分享，可在線閱讀，更多相關(guān)《WEB前端開發(fā)規(guī)范文檔（6頁珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

WEB 前端開發(fā)規(guī)范文檔 目錄 WEB 前端開發(fā)規(guī)范文檔 1 規(guī)范目的 2 基本準(zhǔn)則 2 文件規(guī)范 2 html 書寫規(guī)范 2 html 其他規(guī)范 3 css 書寫規(guī)范 4 JavaScript 書寫規(guī)范 5 jQuery 部分 5 開發(fā)及測(cè)試工具約定 6 其他規(guī)范 6 規(guī)范目的 為提高團(tuán)隊(duì)協(xié)作效率 便于后臺(tái)人員添加功能及前端后期優(yōu)化維護(hù) 輸出高質(zhì)量的文檔 特制訂此文 檔 本規(guī)范文檔一經(jīng)確認(rèn) 前端開發(fā)人員必 須按本文檔規(guī)范進(jìn)行前臺(tái)頁面開發(fā) 本文檔如有不對(duì)或者不合 適的地方請(qǐng)及時(shí)提出 經(jīng)討論決定后方可更改 基本準(zhǔn)則 1 符合 web 標(biāo)準(zhǔn) 語義化 html 遵循內(nèi)容 HTML 顯示 CSS 行為 JavaScript 分離的 代碼組織 模式 2 代碼格式化 保持干凈整潔 3 換行必須縮進(jìn)一個(gè) tab 4 編寫所有前臺(tái)頁面時(shí) 請(qǐng)使用已有模板進(jìn)行復(fù)制 在模板的基礎(chǔ)上進(jìn)行開發(fā) 5 每一個(gè)頁面都必須有一個(gè)獨(dú)立的 css js 文件 6 如果不是用 HTML5 編寫的網(wǎng)站 請(qǐng)用 IE7 IE8 IE9 火狐 谷歌 webkit safari 內(nèi)核進(jìn)行測(cè)試兼容 性 7 如果是 HTML5 編寫的網(wǎng)站 請(qǐng)用 IE9 火狐 谷歌 webkit safari 內(nèi)核進(jìn)行測(cè)試兼容性 文件規(guī)范 1 html css js images 文件均歸檔至 約定的目錄中 2 html 文件命名 英文命名 后綴 htm 同時(shí)將對(duì)應(yīng)界面稿放于同目錄中 若界面稿命名為中文 請(qǐng)重命 名與 html 文件同名 以方便后端添加 功能時(shí)查找對(duì)應(yīng)頁面 3 css 文件命名 英文命名 后綴 css 共用 base css 首頁 index css 其他頁面依實(shí)際模塊需求命名 4 Js 文件命名 英文命名 后綴 js 共用 common js 其他依實(shí)際模塊需求命名 html 書寫規(guī)范 1 所有元素都必須小寫 屬性也是 如 正確 錯(cuò)誤 2 元素必須成對(duì)出現(xiàn) 如必須寫成特殊元 素除外 如 3 標(biāo)簽中不允許出現(xiàn)樣式 必須用 class 來聲明樣式 如 錯(cuò)誤 正確 4 元素 id 命名必須是駝峰式命名如 正確 錯(cuò)誤 錯(cuò)誤 5 元素 class 命名規(guī)范是 元素簡寫 功能名 如 正確 錯(cuò)誤 錯(cuò)誤 6 元素 name 命名必須遵循駝峰式命名法 正確 錯(cuò)誤 錯(cuò)誤 7 元素屬性必須有值 正確 8 元素屬性必須用雙引號(hào) 不允許使用單引號(hào) 正確 錯(cuò)誤 9 如果元素需要自定義屬性 請(qǐng)用 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 庫文件 文件名須包含庫名稱及版本號(hào)及是否為壓縮版 比如 jquery 1 4 1 min js 引入插件 文件名格式為庫名稱 插件名稱 比 如 jQuery cookie js 5 所有編碼均遵循 xhtml 標(biāo)準(zhǔn) 標(biāo)簽 屬性值必須用雙引號(hào)包括 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)元 素中不可嵌套塊級(jí)元素 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)嗟脑丶由?title 14 給區(qū)塊代碼及重要功能 比如循環(huán) 加上注釋 方便后臺(tái)添加功能 15 特殊符號(hào)使用 盡可能使用代碼替代 比如 16 書寫頁面過程中 請(qǐng)考慮向后擴(kuò)展性 css 書寫規(guī)范 1 元素盡量使用 class 選擇器匹配 對(duì)于特殊功能可以考慮使用 ID 選擇器 2 明確各選擇器的優(yōu)先級(jí) 作用范圍 3 CSS 寫完之后必須使用 號(hào)結(jié)尾 雖然瀏覽器支持不用分 號(hào)結(jié)尾 但是不建議這么做 4 除非編寫 HTML5 頁面 否則不允許使用 CSS3 偽類 如 nth child 1 等偽類 禁止使用 5 編寫 CSS 樣式時(shí) 不允許換行 樣式必須一行寫完 自動(dòng)換行 除外 6 對(duì)于子元素樣式采用鏈選擇器進(jìn)行選擇 如 btn save div 7 元素選擇器只能在定義全局 CSS 和子元素匹配時(shí)使用 盡量少 用 其他地方禁止使用 8 請(qǐng)記住 IE 瀏覽器的 hack 方式 如下 IE6 width 100px IE7 width 100px IE8 width 100px 9 IE8 9 width 100px 0 IE9 width 100px 9 0 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 li position relative ul list li span position absolute right 0 即可實(shí)現(xiàn)日期居右顯示 13 樣式表中中文字體名 請(qǐng)務(wù)必轉(zhuǎn)碼成 unicode 碼 以避免編碼錯(cuò)誤時(shí)亂碼 14 使用 table 標(biāo)簽時(shí) 盡量避免使用 table 標(biāo)簽 請(qǐng)不要用 width height cellspacing cellpadding 等 table 屬性直接定義表現(xiàn) 應(yīng)盡可能的利用 table 自身私有屬性分離結(jié)構(gòu)與表現(xiàn) 如 Example Source Code www 52css com thead tr th td tbody tfoot colgroup scope cellspaing 及 cellpadding 的 css 控制方法 table border 0 margin 0 border collapse collapse table th table td padding 0 base css 文件中我會(huì)初始化表格樣式 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 變量命名請(qǐng)使用駝峰式命名法 4 JS 變量嚴(yán)禁使用不明覺厲的命名方法 如 var a var b 5 每一個(gè)函數(shù)與事件監(jiān)聽都必須有注釋 聲明其作用 如果代碼 過長 那么請(qǐng)對(duì)一個(gè)功能模塊進(jìn)行 注釋 6 JS 函數(shù)命名必須使用駝峰式命名 7 JS 函數(shù)嚴(yán)禁使用不明覺厲的命名方法 如 function a 8 JS 代碼換行時(shí) 必須使用縮進(jìn) jQuery 部分 1 使用 jQuery 選擇器如果是唯一的 請(qǐng)使用 ID 選擇器 2 使用 class 選擇器時(shí) 在 class 前加上標(biāo)簽名 如 div class 正確 class 錯(cuò)誤 3 盡量使用 ID 選擇器代替 class 選擇器 4 如果一個(gè)變量存放的是 jQuery 對(duì)象的話 那么請(qǐng)用 符號(hào) 開頭 聲明這是一個(gè) jQuery 對(duì)象 5 避免使用 live 函數(shù)綁定事件 可以使用 bind 和 on 代替 6 把頁面上可能會(huì)影響頁面加載速度的代碼綁定到 window load 事件中 如動(dòng)畫 視覺特效等代碼 圖片規(guī)范 1 所有頁面元素類圖片均放入 img 文件夾 測(cè)試用圖片放于 img demoimg 文件夾 2 圖片格式僅限于 gif png jpg 3 命名全部用小寫英文字母 數(shù)字 的組合 其中不得包含漢字 空格 特殊字符 盡量 用易懂的詞匯 便于團(tuán)隊(duì)其他成員理 解 另 命名分頭尾兩部分 用下劃線隔開 比如 ad left01 gif btn submit gif 4 在保證視覺效果的情況下選擇最小的圖片格式與圖片質(zhì)量 以減少加載時(shí)間 5 盡量避免使用半透明的 png 圖片 若使用 請(qǐng)參考 css 規(guī)范相關(guān)說明 注釋規(guī)范 1 html 注釋 注釋格式 只能在注釋的始末位置 不可置入注釋文字區(qū)域 2 css 注釋 注釋格式 這兒是注釋 3 JavaScript 注釋 單行注釋使用 這兒是單行注釋 多行注釋使用 這兒有多行注釋 開發(fā)及測(cè)試工具約定 建議使用 Aptana Dw Vim 亦可根據(jù)自己喜好選擇 但須遵循如下原則 1 不可利用 IDE 的視圖模式 畫 代碼 2 不可利用 IDE 生成相關(guān)功能代碼 比如 Dw 內(nèi)置的一些功能 js 3 編碼必須格式化 比如縮進(jìn) 建議測(cè)試順序 FireFox IE7 IE8 IE6 Opera Chrome Safari 建議安裝 firebug 及 測(cè)試工具 前期開發(fā)僅測(cè)試 FireFox IE Tab Plus 插件 其他規(guī)范 1 開發(fā)過程中嚴(yán)格按分工完成頁面 以提高 css 復(fù)用率 避免重復(fù)開發(fā) 2 減小沉冗代碼 書寫所有人都可以看的懂的代碼 簡潔易懂是一種美德 為用戶著想 為服務(wù)器著 想