關注公眾號： 微信搜索 前端工具人 ; 收貨更多的干貨
團隊之間一致的開發習慣;統一的代碼風格;對團隊合作、工作效率以及后期的維護有着很大的提高；
為什么需要 “前端開發規范”
規范不是強制性的，對代碼的編寫和程序的運行不會有致命的問題，但是沒有規范會有一系列的問題，比如：
- 缺乏規范，第一個問題就是團隊編碼風格不一，增加了成員之間代碼的閱讀成本，加大了團隊協作成本和維護成本；
- 隨着團隊人員的變化（多人開發一個應用，或者應用更換開發人員），如果缺乏規范，項目可能會變得一團糟，甚至失控；
- 即便是個人開發，規范也是需要的，當把項目轉給其他人的時候，如果有規范的話，會大大降低閱讀成本。
...
所以，建立一套適合團隊的開發規范是很受用的。
A.基本原則
- 符合
web標准（UTF-8，HTML5） - 語義化
html（HTML5新增要求，減少div和span等無特定語義的標簽使用） - 結構表現行為分離（
HTML-CSS-JS代碼分離，不同行為代碼高內聚低耦合） - 兼容性優良（早期版本瀏覽器兼容，移動端和
PC端設備兼容） - 頁面性能方面（減少請求次數，例如使用精靈圖和
sass\less語法） - 代碼要求簡潔明了有序，盡可能的減小服務器負載，保證最快的解析速度（減小
repaint和reflow）.
B.文件命名規范
1、html，css，js，lib，images文件均存放至項目的目錄中。如果使用相關前端框架，根據框架的文件格式進行合理布局。
2、所有文件夾及文件使用英文命名（避免使用中文路徑）。
3、html文件：入口文件使用index.html。如果有對應的設計組設計原稿，需要將對應的設計稿和html文件命名一致並合理存放。
4、css文件命名：后綴.css。通用initial.css，初始化base.css，首頁index.css，其他頁面按照對應的html命名。
5、Js文件命名：英文命名，后綴.js.通用common.js，初始化base.js。 其他頁面按照對應的html命名。
C.HTML規范
1、文檔類型聲明及編碼：統一為html5聲明類型。書寫時利用IDE實現層次分明的縮進（默認縮進4空格）。
2、非特殊情況下CSS文件放在body部分<meta>標簽后。非特殊情況下大部分JS文件放在 <body> 標簽尾部（如果需要界面未加載前執行的代碼可以放在head標簽后）避免行內JS和CSS代碼。
3、所有編碼需要遵循html（XML）標准，標簽&屬性&屬性命名必須由小寫字母及下划線數字組成，且所有標簽必須閉合，包括br()，hr()等。屬性值用雙引號。
4、引入JS庫文件，文件名須包含庫名稱及版本號及是否為壓縮版，比如jquery-1.4.1.min.js。引入插件，文件名格式為庫名稱+插件名稱，比如jQuery.bootstrap.js。
5、書寫頁面過程中，請考慮向后擴展性。class&id參見css書寫規范.
6、需要為html元素添加自定義屬性的時候，首先要考慮下有沒有默認的已有的合適標簽去設置，如果沒有，可以使用須以"data-"為前綴來添加自定義屬性，避免使用"data："等其他命名方式。
7、語義化html，如標題根據重要性用h*(同一頁面只能有一個h1)，段落標記用p，列表用ul，內聯元素中不可嵌套塊級元素。
8、盡可能減少div多層級嵌套。
9、書寫鏈接地址時，必須避免重定向，例如：href="http：//myVue.com/"，即須在URL地址后面加上“/”；
10、在頁面中盡量避免使用style屬性，即style="…"。
11、必須為含有描述性表單元素(input，textarea)添加label，如姓名：須寫成：姓名：
12、能以背景形式呈現的圖片，盡量寫入css樣式中。
13、重要圖片必須加上alt屬性。給重要的元素和截斷的元素加上title。
14、給區塊代碼及重要功能(比如循環)加上注釋，方便后台添加功能。
15、特殊符號使用：盡可能使用代碼替代：比如<(<)&>(>)&空格()&»(»)等等。
D.CSS規范
1、編碼規范為utf-8。
2、協作開發及分工：i會根據各個模塊，同時根據頁面相似程序，事先寫**體框架文件，分配給前端人員實現內部結構&表現&行為。共用css文件base.css由i書寫，協作開發過程中，每個頁面請務必都要引入，此文件包含reset及頭部底部樣式，此文件不可隨意修改。
3、class與id的使用：id是唯一的並是父級的，class是可以重復的並是子級的，所以id僅使用在大的模塊上，class可用在重復使用率高及子級中。id原則上都是由我分發框架文件時命名的，為JS預留鈎子的除外。
4、為JS預留鈎子的命名，請以js_起始，比如：js_hide，js_show。
5、class與id命名：大的框架命名比如header/footer/wrapper/left/right之類的在2中由i統一命名.其他樣式名稱由小寫英文&數字&來組合命名，如i_comment，fontred，width200。避免使用中文拼音，盡量使用簡易的單詞組合。總之，命名要語義化，簡明化
6、規避class與id命名(此條重要，若有不明白請及時與i溝通)：a）通過從屬寫法規避，示例見d。b）取父級元素id/class命名部分命名，示例見d。c）重復使用率高的命名，請以自己代號加下划線起始，比如i_clear。d）a，b兩條，適用於在2中已建好框架的頁面，如，要在2中已建好框架的頁面代碼中加入新的div元素，按a命名法則：...，樣式寫法：#mainnav.firstnav{.......}按b命名法則：...，樣式寫法：.main_firstnav{.......}
7、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。
8、書寫代碼前，提高樣式重復使用率。
9、充分利用html自身屬性及樣式繼承原理減少代碼量。
10、樣式表中中文字體名，請務必轉碼成unicode碼，以避免編碼錯誤時亂碼。
11、背景圖片請盡可能使用精靈圖技術，減小http請求，考慮到多人協作開發，精靈圖按模塊制作。
12、使用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文件中我會初始化表格樣式)
13、杜絕使用兼容ie8。
14、用png圖片做圖片時，要求圖片格式為png-8格式，若png-8實在影響圖片質量或其中有半透明效果，請為ie6單獨定義背景：_background：none。_filter：progid：DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop，src=’img/bg.png’)。
15、避免兼容性屬性的使用，比如text-shadow||css3的相關屬性。
16、減少使用影響性能的屬性，比如position：absolute||float。
17、必須為大區塊樣式添加注釋，小區塊適量注釋。
18、代碼縮進與格式：建議單行書寫，可根據自身習慣，后期優化會統一處理。
E. JS書寫規范
1、文件編碼統一為utf-8，書寫過程過，每行代碼結束必須有分號。原則上所有功能均根據XXX項目需求原生開發，以避免網上down下來的代碼造成的代碼污染(沉冗代碼||與現有代碼沖突||)。
2、庫引入：原則上僅引入jQuery庫，若需引入第三方庫，須與團隊其他人員討論決定。
3、變量命名：駝峰式命名.原生JS變量要求是純英文字母，首字母須小寫;要求變量集中聲明，避免全局變量;私有屬性、變量和方法以下划線 _ 開頭;常量, 使用全部字母大寫，單詞間下划線分隔的命名方式;枚舉的屬性， 使用全部字母大寫，單詞間下划線分隔的命名方式
4、類命名：首字母大寫，駝峰式命名.如MyVue。
5、函數命名：首字母小寫駝峰式命名.如myVue()。
6、命名語義化，盡可能利用英文單詞或其縮寫。
7、盡量避免使用存在兼容性及消耗資源的方法或屬性，比如eval_r()&innerText。
8、后期優化中，JS非注釋類中文字符須轉換成unicode編碼使用，以避免編碼錯誤時亂碼顯示。
9、代碼結構明了，加適量注釋.提高函數重用率。
10、注重與html分離，減小reflow，注重瀏覽器性能。
11、注釋 （盡量提高代碼本身的清晰性、可讀性，合理的注釋、空行排版等，可以讓代碼更易閱讀、更具美感）
12、利用緩存存放數據、資源壓縮、避免高頻刷新頁面、靜態資源上傳cdn
13、設置響應頭cache-control和last-modified（如果兩次請求間隔小於5秒，直接返回304，不需要服務器進行處理）
14、Web服務器的負載均衡、請求分發（七層負載均衡的實現）、上傳文件使用異步模式
15、將活動頁面上的所有可以靜態的元素全部靜態化，並盡量減少動態元素。通過CDN來抗峰值
16、用戶提交之后按鈕置灰，禁止重復提交
17、在某一時間段內只允許用戶提交一次請求，比如可以采取IP限流
18、圖片在一個頁面上屬於數據量比較大的東西，盡量避免動態數據和圖片的順序渲染，使用圖片服務器分離數據和圖片（建立獨立圖片服務器）
19、使用nginx等負載均衡中間件，將請求分布到不同的機器上，避免單個應用持續的處理引起血崩
單行注釋
必須獨占一行。// 后跟一個空格，縮進與下一行被注釋說明的代碼一致。
多行注釋
避免使用 /.../ 這樣的多行注釋。有多行注釋內容時，使用多個單行注釋。
函數/方法注釋
函數/方法注釋必須包含函數說明，有參數和返回值時必須使用注釋標識。；
參數和返回值注釋必須包含類型信息和說明；
當函數是內部函數，外部不可訪問時，可以使用 @inner 標識；
/**
* 函數描述
*
* @param {string} p1 參數1的說明
* @param {string} p2 參數2的說明，比較長
* 那就換行了.
* @param {number=} p3 參數3的說明（可選）
* @return {Object} 返回值描述
*/
function foo(p1, p2, p3) {
var p3 = p3 || 10;
return {
p1: p1,
p2: p2,
p3: p3
};
}
文件注釋
文件注釋用於告訴不熟悉這段代碼的讀者這個文件中包含哪些東西。 應該提供文件的大體內容, 它的作者, 依賴關系和兼容性信息。如下:
/**
* @fileoverview Description of file, its uses and information
* about its dependencies.
* @author user@meizu.com (Firstname Lastname)
* Copyright 2009 Meizu Inc. All Rights Reserved.
*/
F.圖片規范
1、所有頁面元素類圖片均放入img文件夾，測試用圖片放於demo文件夾。
2、圖片格式gif/png/jpg。提倡使用webp文件格式，使用軟件進行圖片壓縮。
3、命名全部用小寫英文字母||數字||_的組合，其中不得包含漢字||空格||特殊字符；盡量用易懂的詞匯，便於團隊其他成員理解。另，命名分頭尾兩部分，用下划線隔開，比如ad_left01.gif||btn_submit.gif。
4、在保證視覺效果的情況下選擇最小的圖片格式與圖片質量，以減少加載時間。5、盡量避免使用半透明的png圖片(若使用，請參考css規范相關說明)。
6、運用css精靈圖技術集中小的背景圖或圖標，減小頁面http請求，但注意，請務必在對應的精靈圖psd源圖中划參考線，並保存至img目錄下
結尾
文章來源： 自己博客文章 https://laijinxian.github.io/2019/03/06/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83%E5%8F%8A%E5%BC%80%E5%8F%91%E6%96%87%E6%A1%A3/
參考：https://blog.csdn.net/weixin_41697143/article/details/81049778