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

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

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