前端開發規範文檔

來源:互聯網
上載者:User

標籤:判斷   不可   解析   表示   載入   底線   速度   click   必須   

 

目的

提高團隊協作效率,方便前後端功能添加和後期最佳化及維護。

一,通用規範

1、Tab鍵用4個空格代替(windows下Tab鍵占4個空格);

2、統一文檔編碼為”UTF-8”,統一文件類型為<!DOCTYPE html>,統一收藏夾表徵圖,統一字型;

3、禁止在js/json中使用關鍵字命名;

4、if、while、when、switch語句的執行體用”{}”括起來,禁止省略花括弧;

5、禁止在return關鍵字及要返回的運算式之間換行;

6、必須為大區塊樣式或功能模組添加註釋,小區塊適量注釋;

7、特殊符號使用逸出字元表示;

8、Html、css、js、images檔案均歸檔到<系統開發規範>約定的目錄中去;

9、Css屬性或者javascript代碼以“;”結尾,也方便壓縮公用程式斷句;

10、引入JS庫檔案,檔案名稱須包含庫名稱及版本及是否為壓縮版,比如jquery-1.4.1.min.js;引入外掛程式,檔案名稱格式為庫名稱+外掛程式名稱,比如jQuery.cookie.js;

11、以varstrict 模式聲明變數,切勿在一段js代碼中同時使用var、let、const聲明變數;

12、符合web標準,語義化html,使結構、表現和行為的有效分離,代碼要求簡潔明了有序,儘可能較少伺服器負載,保證最快的解析速度;

一、檔案/資源命名

1、確保檔案命名以英文字母而不是數字開頭,以特殊字元開頭的檔案一般有特殊的含義和用處,如register-form.html;

2、資源的字母名稱須全為小寫,這是因為在某些對大小寫字母敏感的作業系統中,當檔案通過工具壓縮混淆後,或認為修改過後,大小寫不同導致引用檔案不同的錯誤,很難被發現;

3、需要對檔案增加前尾碼或特定的副檔名(如.min.js,.min.css),或一串首碼(如123.main.min.css)情況下,建議使用點分隔字元來區分這些在檔案名稱中帶有清晰意義的中繼資料;

4、檔案存放位置的規範,如css存放.css樣式檔案,javascript存放.js檔案;

 

二、協議

1、引用圖片,樣式和指令碼時,不要指定引入資源所帶的具體協議;

三、CSS書寫規範

1、不要在標籤上直接寫樣式;

2、不要將CSS樣式寫成單行;

3、不要在CSS樣式中使用expression運算式;

4、不要在CSS樣式中使用@import;

5、每個樣式屬性後加”;”;

6、樣式相容模式加首碼:-webkit、-o-、-moz-;

7、Margin、padding、border使用合并方式書寫;

四、HTML書寫規範

1、非特殊情況下,CSS樣式檔案外鏈到<head>之間,JavaScript檔案外鏈到頁面底部;

2、標籤、屬性由英文小寫組成,所有標籤除(br、img、hr、input、link等個別外)必須閉合;

3、屬性值由””雙引號;

4、儘可能減少<div>等標籤的嵌套,減少代碼量及提高代碼可讀性;

5、語義化html,如段落標記使用<p>,列表用<ul>等,內嵌元素中不可嵌套區塊層級元素;

五、JavaScript書寫規範

(1)命名規範

1、常量名:全部大寫,單詞間用”_”底線分隔,如:CSS_BTN_NUM;

2、對象的屬性和方法名:小駝峰式,如:bindEvent = “click”;

3、類名(構造器):小駝峰式首字母大寫,如:Current,DefaultConfig;

4、函數名:小駝峰式,如:current(),defaultConfig();

5、變數名:小駝峰式,如:current,defaultConfig;

(2)代碼格式

1、”()”括弧前後需要空格;

2、”=”等號前後需要空格;

3、”,”逗號前後需要空格;

4、if、while、when、switch語句的執行體用”{}”括起來;

5、數組,對象內避免額外的”逗號”,如:var arr = [“sex”,”year”,”name”,];

6、使用嚴格條件判斷,用”===”代替”==”;

六、注釋

1、Javascript、css檔案注釋需要標註建立/修改時間,重大版本修改記錄,功能描述,函數描述;

七、圖片規範

1、命名以小寫英文、數字、”_”組合,便於團隊其他成員理解,如header_btn.png;

2、重要圖片加上alt屬性,重要的元素加上title;

3、保證圖片品質的前提下,使用sprite技術集中小的背景圖和表徵圖,減少頁面http請求和載入時間;

 

八、代碼檢查

1、對於JavaScript,建議使用JSLint或JSHint;

6、Css、JS、Html等線上格式化工具;

 

前端開發規範文檔

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.