Web前端工程師須要注意的開發規範有哪些？

從事web前端開發工做咱們就須要瞭解web前端開發的規範，這樣才能保證高效快速的完成工做，本篇就和你們分享一下web前端開發工程師須要注意的web前端開發規範有哪些，但願對小夥伴們有所幫助。

web前端開發工程師須要注意的web前端開發規範有哪些？

1、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. 代碼縮進與格式: 建議單行書寫, 可根據自身習慣, 後期優化會統一處理;

2、JavaScript書寫規範

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

2. 庫引入: 原則上僅引入jQuery庫, 若需引入第三方庫, 須與團隊其餘人員討論決定;

3. 變量命名: 駝峯式命名. 原生JavaScript變量要求是純英文字母, 首字母須小寫;

4. 類命名: 首字母大寫, 駝峯式命名. 如 ITaoLun;

5. 函數命名: 首字母小寫駝峯式命名. 如iTaoLun();

6. 命名語義化, 儘量利用英文單詞或其縮寫;

7. 儘可能避免使用存在兼容性及消耗資源的方法或屬性;

8. 後期優化中, JavaScript非註釋類中文字符須轉換成unicode編碼使用, 以免編碼錯誤時亂碼顯示;

9. 代碼結構明瞭, 加適量註釋. 提升函數重用率;

10. 注重與html分離, 減少reflow, 注重性能.