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

千鋒武漢發表於2021-12-02

對於正在從事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前端工作的小夥伴們有所幫助。

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

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/31548651/viewspace-2845303/,如需轉載,請註明出處,否則將追究法律責任。

相關文章