前端代碼編寫規(guī)范(已修改)
2025-04-20 13:43 本頁面
【正文】 前端代碼編寫規(guī)范命名規(guī)則1. 項目名稱項目名稱駝峰式命名。例：myProject2. 目錄命名采用單數(shù)命名法。例：css img font js3. JS文件命名字母全部小寫，單詞之間用“”鏈接。例：4. CSS文件命名字母全部小寫，單詞之間用“”鏈接。例：5. HTML文件命名文件名稱駝峰式命名。例：HTML1. 語法縮進使用Tab（4個空格）。解釋：對于非HTML標簽之間的縮進,比如script或style標簽內(nèi)容縮進，與script或style標簽的縮進同級。style/* 樣式內(nèi)容的第一級縮進與所屬的 style 標簽對齊 */ul { padding: 0。}/styleul lifirst/li lisecond/li/ulscript// 腳本代碼的第一級縮進與所屬的 script 標簽對齊require([39。app39。], function (app) { ()。})。/script嵌套的節(jié)點應該縮進。在屬性上使用雙引號（字符串拼接除外）。屬性名全小寫，用“”做分隔符。自動閉合標簽處不能使用斜線。html head titlePage title/title /head body img src=images/ alt=Company h1 class=helloworldHello, world!/h1 /body/html2. HTML5 doctype頁面開頭的doctype大寫，html小寫。例：!DOCTYPE html!DOCTYPE htmlhtml .../html3. 字符編碼采用UTF8的編碼格式。例：meta charset=”UTF8”!DOCTYPE htmlhtml head meta charset=UTF8 /head .../html4. 引入CSS,JSCSS引入使用linklink rel=stylesheet href=JS 引入使用scriptscript type=text/javascript href=/script頁面不允許出現(xiàn)style標簽。5. 屬性1. 屬性名必須使用小寫字母! good table cellspacing=0.../table! bad table cellSpacing=0.../table2. 屬性值必須使用雙引號包圍不允許使用單引號。! good script src=/script! bad script src=39。39。/scriptscript src=/script6. 屬性順序classidnamedata*src,for,type,href,value,maxlength,max,min,patternplaceholder,title,altaria*,rolerequired,readonly,disabled7. 標簽標簽名必須使用小寫字母! good pHello StyleGuide!/p! bad PHello StyleGuide!/P1． 對于無需自閉合的標簽，不允許自閉合解釋：常見無需自閉合標簽有 input、br、img、hr 等。! good input type=text name=title! bad input type=text name=title /2. 標簽使用必須符合標簽嵌套規(guī)則解釋：比如div不得置于p中，tbody必須置于table中。ul 標簽包含著 li、dl 標簽包含著 dt 和 dd。3. 標簽使用必須符合標簽嵌套規(guī)則常見標簽語義：P –段落h1,h2,h3,h4,h5,h6–層級標題strong,em–強調(diào)ins–插入del–刪除abbr–縮寫code–代碼標識cite–引述來源作品的標題q–引用blockquote–一段長篇引用ul–無序列表 ol–有序列表dl,dt,dd–定義列表8. 圖片 禁止img的src取值為空。延遲加載的圖片也要增加默認的src。解釋：src取值為空，會導致部分瀏覽器重新加載一次當前頁面，參考：[建議] 避免為img添加不必要的title屬性。解釋：多余的title影響看圖體驗，并且增加了頁面尺寸。[建議] 為重要圖片添加alt屬性。解釋：可以提高圖片加載失敗時的用戶體驗。[建議] 添加width和height屬性，以避免頁面抖動。[建議] 有下載需求的圖片采用img標簽實現(xiàn)，無下載需求的圖片采用 CSS 背景圖實現(xiàn)。解釋：1. 產(chǎn)品 logo、用戶頭像、用戶產(chǎn)生的圖片等有潛在下載需求的圖片，以img形式實現(xiàn)，能方便用戶下載。2. 無下載需求的圖片，比如：icon、背景、代碼使用的圖片等，盡可能采用 CSS 背景圖實現(xiàn)。9. 表單 1．控件標題[強制] 有文本標題的控件必須使用label標簽將其與其標題相關(guān)聯(lián)。解釋：有兩種方式：1. 將控件置于label內(nèi)。2. label的for屬性指向控件的id。推薦使用第一種，減少不必要的id。如果 DOM 結(jié)構(gòu)不允許直接嵌套，則應使用第二種。示例：labelinput type=checkbox name=confirm value=on 我已確認上述條款/labellabel for=username用戶名：/label input type=textbox name=username id=username2．按鈕[強制] 使用button元素時必須指明type屬性值。解釋：button元素的默認type為submit，如果被置于form元素中，點擊后將導致表單提交。為顯示區(qū)分其作用方便理解，必須給出type屬性。示例：button type=submit提交/buttonbutton type=button取消/button[建議] 盡量不要使用按鈕類元素的name屬性。解釋：由于瀏覽器兼容性問題，使用按鈕的name屬性會帶來許多難以發(fā)現(xiàn)的問題。具體
公司管理相關(guān)推薦
鄂ICP備17016276號-1