前端開發規範標準

時間 2019-11-20

標籤前端開發規範標準简体版

原文原文鏈接

Web前端做爲開發團隊中不可或缺的一部分，須要按照相關規定進行合理編寫（一部分不良習慣可能給本身和他人形成沒必要要的麻煩）。不一樣公司不一樣團隊具備不一樣的規範和文檔。下面是根據不一樣企業和團隊的要求進行全面詳細的整理結果。備註：實際開發請以本公司的規範爲標準。css

A.基本原則html

符合web標準（UTF-8，HTML5），語義化html（HTML5新增要求，減小div和span等無特定語義的標籤使用），結構表現行爲分離（HTML-CSS-JS代碼分離，不一樣行爲代碼高內聚低耦合），兼容性優良（早期版本瀏覽器兼容，移動端和PC端設備兼容）.頁面性能方面（減小請求次數，例如使用精靈圖和sass語法），代碼要求簡潔明瞭有序，儘量的減少服務器負載，保證最快的解析速度（減少repaint和reflow）.前端

B.文件命名規範html5

一、html，css，js，lib，images文件均存放至項目的目錄中。若是使用相關前端框架，根據框架的文件格式進行合理佈局。jquery

二、全部文件夾及文件使用英文命名（避免使用中文路徑）。css3

三、html文件：入口文件使用index.html。若是有對應的設計組設計原稿，須要將對應的設計稿和html文件命名一致併合理存放。web

四、css文件命名：後綴.css。通用initial.css，初始化base.css，首頁index.css，其餘頁面按照對應的html命名。bootstrap

五、Js文件命名：英文命名，後綴.js.通用common.js，初始化base.js。其餘頁面按照對應的html命名。瀏覽器

C.HTML規範sass

一、文檔類型聲明及編碼：統一爲html5聲明類型。書寫時利用IDE實現井井有條的縮進（默認縮進4空格）。

二、非特殊狀況下CSS文件放在body部分<meta>標籤後。非特殊狀況下大部分JS文件放在<body>標籤尾部（若是須要界面未加載前執行的代碼能夠放在head標籤後）避免行內JS和CSS代碼。

三、全部編碼須要遵循html（XML）標準，標籤&屬性&屬性命名必須由小寫字母及下劃線數字組成，且全部標籤必須閉合，包括br()，hr()等。屬性值用雙引號。

四、引入JS庫文件，文件名須包含庫名稱及版本號及是否爲壓縮版，好比jquery-1.4.1.min.js。引入插件，文件名格式爲庫名稱+插件名稱，好比jQuery.bootstrap.js。

五、書寫頁面過程當中，請考慮向後擴展性。class&id參見css書寫規範.

六、須要爲html元素添加自定義屬性的時候，首先要考慮下有沒有默認的已有的合適標籤去設置，若是沒有，可使用須以"data-"爲前綴來添加自定義屬性，避免使用"data："等其餘命名方式。

七、語義化html，如標題根據重要性用h*(同一頁面只能有一個h1)，段落標記用p，列表用ul，內聯元素中不可嵌套塊級元素。

八、儘量減小div多層級嵌套。

九、書寫連接地址時，必須避免重定向，例如：href="http：//myVue.com/"，即須在URL地址後面加上「/」；

十、在頁面中儘可能避免使用style屬性，即style="…"。

十一、必須爲含有描述性表單元素(input，textarea)添加label，如姓名：須寫成：姓名：

十二、能以背景形式呈現的圖片，儘可能寫入css樣式中。

1三、重要圖片必須加上alt屬性。給重要的元素和截斷的元素加上title。

1四、給區塊代碼及重要功能(好比循環)加上註釋，方便後臺添加功能。

1五、特殊符號使用：儘量使用代碼替代：好比<(<)&>(>)&空格()&»(»)等等。

D.CSS規範

一、編碼規範爲utf-8。

二、協做開發及分工：i會根據各個模塊，同時根據頁面類似程序，事先寫**體框架文件，分配給前端人員實現內部結構&表現&行爲。共用css文件base.css由i書寫，協做開發過程當中，每一個頁面請務必都要引入，此文件包含reset及頭部底部樣式，此文件不可隨意修改。

三、class與id的使用：id是惟一的並是父級的，class是能夠重複的並是子級的，因此id僅使用在大的模塊上，class可用在重複使用率高及子級中。id原則上都是由我分發框架文件時命名的，爲JS預留鉤子的除外。

四、爲JS預留鉤子的命名，請以js_起始，好比：js_hide，js_show。

五、class與id命名：大的框架命名好比header/footer/wrapper/left/right之類的在2中由i統一命名.其餘樣式名稱由小寫英文&數字&來組合命名，如i_comment，fontred，width200。避免使用中文拼音，儘可能使用簡易的單詞組合。總之，命名要語義化，簡明化

六、規避class與id命名(此條重要，如有不明白請及時與i溝通)：a）經過從屬寫法規避，示例見d。b）取父級元素id/class命名部分命名，示例見d。c）重複使用率高的命名，請以本身代號加下劃線起始，好比i_clear。d）a，b兩條，適用於在2中已建好框架的頁面，如，要在2中已建好框架的頁面代碼中加入新的div元素，按a命名法則：...，樣式寫法：#mainnav.firstnav{.......}按b命名法則：...，樣式寫法：.main_firstnav{.......}

七、css屬性書寫順序，建議遵循：佈局定位屬性-->自身屬性-->文本屬性-->其餘屬性.此條可根據自身習慣書寫，但儘可能保證同類屬性寫在一塊兒.屬性列舉：佈局定位屬性主要包括：display&list-style&position（相應的top，right，bottom，left）＆float&clear＆visibility＆overflow；

自身屬性主要包括：width&height&margin&padding&border&background。

文本屬性主要包括：color&font&text-decoration&text-align&vertical-align&white-space&

其餘&content。

八、書寫代碼前，提升樣式重複使用率。

九、充分利用html自身屬性及樣式繼承原理減小代碼量

十、樣式表中中文字體名，請務必轉碼成unicode碼，以免編碼錯誤時亂碼。

十一、背景圖片請儘量使用精靈圖技術，減少http請求，考慮到多人協做開發，精靈圖按模塊製做。

十二、使用table標籤時(儘可能避免使用table標籤)，請不要用width/height/cellspacing/cellpadding等table屬性直接定義表現，應儘量的利用table自身私有屬性分離結構與表現，如thead，tr，th，td，tbody，tfoot，colgroup，scope。(cellspaing及cellpadding的css控制方法：table{border：0。margin：0。border-collapse：collapse。}tableth，tabletd{padding：0。}，base.css文件中我會初始化表格樣式)

1三、杜絕使用兼容ie8。

1四、用png圖片作圖片時，要求圖片格式爲png-8格式，若png-8實在影響圖片質量或其中有半透明效果，請爲ie6單獨定義背景：_background：none。_filter：progid：DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop，src=’img/bg.png’)。

1五、避免兼容性屬性的使用，好比text-shadow||css3的相關屬性。

1六、減小使用影響性能的屬性，好比position：absolute||float。

1七、必須爲大區塊樣式添加註釋，小區塊適量註釋。

1八、代碼縮進與格式：建議單行書寫，可根據自身習慣，後期優化會統一處理。

E. JS書寫規範

一、文件編碼統一爲utf-8，書寫過程過，每行代碼結束必須有分號。原則上全部功能均根據XXX項目需求原生開發，以免網上down下來的代碼形成的代碼污染(沉冗代碼||與現有代碼衝突||...)。

二、庫引入：原則上僅引入jQuery庫，若需引入第三方庫，須與團隊其餘人員討論決定。

三、變量命名：駝峯式命名.原生JS變量要求是純英文字母，首字母須小寫，如myVue。jQuery變量要求首字符爲'_'，其餘與原生JS規則相同，如：_myVue。另，要求變量集中聲明，避免全局變量.

四、類命名：首字母大寫，駝峯式命名.如MyVue。

五、函數命名：首字母小寫駝峯式命名.如myVue()。

六、命名語義化，儘量利用英文單詞或其縮寫。

七、儘可能避免使用存在兼容性及消耗資源的方法或屬性，好比eval_r()&innerText。

八、後期優化中，JS非註釋類中文字符須轉換成unicode編碼使用，以免編碼錯誤時亂碼顯示。

九、代碼結構明瞭，加適量註釋.提升函數重用率。

十、注重與html分離，減少reflow，注重瀏覽器性能.

F.圖片規範

一、全部頁面元素類圖片均放入img文件夾，測試用圖片放於demo文件夾。

二、圖片格式gif/png/jpg。提倡使用webp文件格式，使用軟件進行圖片壓縮。

三、命名所有用小寫英文字母||數字||_的組合，其中不得包含漢字||空格||特殊字符；儘可能用易懂的詞彙，便於團隊其餘成員理解。另，命名分頭尾兩部分，用下劃線隔開，好比ad_left01.gif||btn_submit.gif。

四、在保證視覺效果的狀況下選擇最小的圖片格式與圖片質量，以減小加載時間。五、儘可能避免使用半透明的png圖片(若使用，請參考css規範相關說明)。

六、運用css精靈圖技術集中小的背景圖或圖標，減少頁面http請求，但注意，請務必在對應的精靈圖psd源圖中劃參考線，並保存至img目錄下

G.測試規範

開發及測試工具約定建議使用Aptana-Sublime-Vim-WebStrom，亦可根據本身喜愛選擇，但須遵循以下原則：

一、不可利用IDE的視圖模式'畫'代碼。

二、不可利用IDE生成相關功能代碼。

三、編碼必須格式化，好比縮進。測試工具：前期開發僅測試FireFox&IE6&IE7&IE8，後期優化時加入Opera&Chrome&Safari。建議測試順序：FireFox-->IE-->Opera-->Chrome-->Safari。--------------------- 做者：Michael1822852997 來源：CSDN 原文：https://blog.csdn.net/weixin_41697143/article/details/81049778

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。