彙總Web前端開發工程師需要注意的一些開發規範！

對於正在從事Web前端開工作的人來說，瞭解Web前端開發規範是很重要的 .因為只有這樣才能保證高效快速的完成工作，今天小千就來和大家分享一下Web前端開發工程師需要注意的Web前端開發規範有哪些！希望對小夥伴們有所幫助。

 

一、CSS書寫規範

1. 編碼統一為utf-8；

2. 協作開發及分工：i會根據各個模組，同時根據頁面相似程式，事先寫好大體框架檔案，分配給前端人員實現內部結構&表現&行為；共用css檔案base.css由i書寫，協作開發過程中，每個頁面請務必都要引入，此檔案包含reset及頭部底部樣式，此檔案不可隨意修改；

3. class與id的使用：id是唯一的並是父級的，class是可以重複的並是子級的，所以id僅使用在大的模組上，class可用在重複使用率高及子級中；id原則上都是由我分發框架檔案時命名的，為JavaScript預留鉤子的除外；

4. 為JavaScript預留鉤子的命名，請以 js_ 起始，比如：js_hide，js_show；

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

6. 規避class與id命名(此條重要，若有不明白請及時與i溝通):

a) 透過從屬寫法規避；

b)取父級元素id/class命名部分命名；

c)重複使用率高的命名，請以自己代號加下劃線起始，比如i_clear；

d)a,b兩條，適用於在2中已建好框架的頁面，如，要在2中已建好框架的頁面程式碼中加入新的div元素。

7. css屬性書寫順序，建議遵循：佈局定位屬性–>自身屬性–>文字屬性–>其他屬性. 此條可根據自身習慣書寫，但儘量保證同類屬性寫在一起；

8. 書寫程式碼前，考慮並提高樣式重複使用率；

9. 充分利用html自身屬性及樣式繼承原理減少程式碼量；

10. 樣式表中中文字型名，請務必轉碼成unicode碼，以避免編碼錯誤時亂碼；

11. 背景圖片請儘可能使用sprite技術，減小http請求，考慮到多人協作開發，sprite按模組製作；

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；} table th，table td{padding:0；}，base.css檔案中我會初始化表格樣式)；

13. 如果可以請少使用相容；

14. 用png圖片做圖片時，要求圖片格式為png-8格式,若png-8實在影響圖片質量或其中有半透明效果，請為ie6單獨定義背景；

15. 避免相容性屬性的使用，比如text-shadow || css3的相關屬性；

16. 減少使用影響效能的屬性，比如position:absolute || float ；

17. 必須為大區塊樣式新增註釋，小區塊適量註釋；

18. 程式碼縮排與格式：建議單行書寫，可根據自身習慣，後期最佳化會統一處理；

二、JavaScript書寫規範

1. 檔案編碼統一為utf-8，書寫過程，每行程式碼結束必須有分號； 原則上所有功能均根據XXX專案需求原生開發，以避免網上down下來的程式碼造成的程式碼汙染(沉冗程式碼||與現有程式碼衝突|| …)；

2. 庫引入：原則上僅引入jQuery庫，若需引入第三方庫，須與團隊其他人員討論決定；

3. 變數命名：駝峰式命名. 原生JavaScript變數要求是純英文字母，首字母須小寫；

4. 類命名：首字母大寫，駝峰式命名. 如 ITaoLun；

5. 函式命名：首字母小寫駝峰式命名. 如iTaoLun()；

6. 命名語義化，儘可能利用英文單詞或其縮寫；

7. 儘量避免使用存在相容性及消耗資源的方法或屬性；

8. 後期最佳化中，JavaScript非註釋類中文字元須轉換成unicode編碼使用，以避免編碼錯誤時亂碼顯示；

9. 程式碼結構明瞭，加適量註釋. 提高函式重用率；

10. 注重與html分離，減小reflow，注重效能.

以上就是小千今天為大家分享的關於Web前端工程師應該知道的一些開發規範，希望本篇文章能夠對正在從事Web前端工作的小夥伴們有所幫助。

本文來自千鋒教育，轉載請註明出處。