web前端開發規範總結

智雲程式設計發表於2019-01-24

Web前端作為開發團隊中不可或缺的一部分,需要按照相關規定進行合理編寫(一部分不良習慣可能給自己和他人造成不必要的麻煩)。不同公司不同團隊具有不同的規範和文件。下面是根據不同企業和團隊的要求進行全面詳細的整理結果。備註:實際開發請以本公司的規範為標準。

A.基本原則

符合web標準(UTF-8,HTML5),語義化html(HTML5新增要求,減少div和span等無特定語義的標籤使用),結構表現行為分離(HTML-CSS-JS程式碼分離,不同行為程式碼高內聚低耦合),相容性優良(早期版本瀏覽器相容,移動端和PC端裝置相容).頁面效能方面(減少請求次數,例如使用精靈圖和sass語法),程式碼要求簡潔明瞭有序,儘可能的減小伺服器負載,保證最快的解析速度(減小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部分標籤後。非特殊情況下大部分JS檔案放在標籤尾部(如果需要介面未載入前執行的程式碼可以放在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自身屬性及樣式繼承原理減少程式碼量,例如:

即可實現日期居右顯示

ul.list li {

position:relative

}

ul .list li span {

position:absolute;right:0

}

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變數要求是純英文字母,首字母須小寫,如myVue。jQuery變數要求首字元為'_',其他與原生JS規則相同,如:_myVue。另,要求變數集中宣告,避免全域性變數.

4、類命名:首字母大寫,駝峰式命名.如MyVue。

5、函式命名:首字母小寫駝峰式命名.如myVue()。

6、命名語義化,儘可能利用英文單詞或其縮寫。

7、儘量避免使用存在相容性及消耗資源的方法或屬性,比如eval_r()&innerText。

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

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

10、注重與html分離,減小reflow,注重瀏覽器效能.

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目錄下

G.測試規範

開發及測試工具約定建議使用Aptana-Sublime-Vim-WebStrom,亦可根據自己喜好選擇,但須遵循如下原則:

1、不可利用IDE的檢視模式'畫'程式碼。

2、不可利用IDE生成相關功能程式碼。

3、編碼必須格式化,比如縮排。測試工具:前期開發僅測試FireFox&IE6&IE7&IE8,後期最佳化時加入Opera&Chrome&Safari。建議測試順序:FireFox-->IE-->Opera-->Chrome-->Safari。

如果你依然在程式設計的世界裡迷茫,不知道自己的未來規劃,可以加入web前端學習交流群:731771211 裡面可以與大神一起交流並走出迷茫。小白可進群免費領取學習資料,看看前輩們是如何在程式設計的世界裡傲然前行!群裡不停更新最新的教程和學習方法(進群送web前端系統學習路線,詳細的前端專案實戰教學影片),有想學習web前端的,或是轉行,或是大學生,還有工作中想提升自己能力的,正在學習的小夥伴歡迎加入學習。


點選:

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

相關文章