本文格式為Word版，下載可任意編輯——前端開發(fā)代碼規(guī)檔5篇前端開發(fā)代碼規(guī)范文檔第一篇

解釋是你自己與你的小伙伴們了解代碼寫法和目的的唯一途徑。特別是在寫一些看似瑣碎的無關(guān)緊要的代碼時，由于記憶點不深刻，解釋就變得尤為重要了。

編寫自解釋代碼只是一個傳聞，沒有任何代碼是可以完全自解釋的。而代碼解釋，則是永遠也不嫌多。

當(dāng)你寫解釋時一定要注意：不要寫你的代碼都干了些什么，而要寫你的代碼為什么要這么寫，背后的考量是什么。當(dāng)然也可以參與所思考問題或是解決方案的鏈接地址。

不推薦

一些解釋工具可以幫助你寫出更好的解釋。JSDoc或YUIDoc就是用來寫JavaScript解釋用的。你甚至可以使用工具來為這些解釋生成文檔，這也是鼓舞開發(fā)者們寫解釋的一個好方法，由于一旦有了這樣便利的生成文檔的工具，他們尋常會開始花更多時間在解釋細節(jié)上。

前端開發(fā)代碼規(guī)范文檔其次篇

在web項目中，所有的文件名應(yīng)當(dāng)都遵循同一命名約定。以可讀性而言，減號（-）是用來分隔文件名的不二之選。同時它也是常見的URL分隔符（.or），所以理所當(dāng)然的，減號應(yīng)當(dāng)也是用來分隔資源名稱的好選擇。

請確保文件命名總是以字母開頭而不是數(shù)字。而以特別字符開頭命名的文件，一般都有特別的含義與用處。

資源的字母名稱必需全為小寫，這是由于在某些對大小寫字母敏感的操作系統(tǒng)中，當(dāng)文件通過工具壓縮混淆后，或者人為修改過后，大小寫不同而導(dǎo)致引用文件不同的錯誤，很難被發(fā)現(xiàn)。

還有一些狀況下，需要對文件增加前后綴或特定的擴展名（譬如.,.），抑或一串前綴（譬如）。這種狀況下，建議使用點分隔符來區(qū)分這些在文件名中帶有明了意義的元數(shù)據(jù)。

不推薦

前端開發(fā)代碼規(guī)范文檔第三篇

使用ES6風(fēng)格編碼

1、定義變量使用let，定義常量使用const

2、靜態(tài)字符串一律使用單引號或反引號，動態(tài)字符串使用反引號

3、解構(gòu)賦值

4、拷貝數(shù)組

使用擴展運算符（...）拷貝數(shù)組

5、箭頭函數(shù)

需要使用函數(shù)表達式的場合，盡量用箭頭函數(shù)代替。由于這樣更簡單，而且綁定了this

6、模塊

假使模塊只有一個輸出值，就使用exportdefault，假使模塊有多個輸出值，就不使用exportdefault，exportdefault與普通的export不要同時使用

前端開發(fā)代碼規(guī)范文檔第四篇

官方文檔推薦及使用遵循規(guī)則：

PascalCase(單詞首字母大寫命名)是最通用的聲明約定

kebab-case(短橫線分隔命名)是最通用的使用約定

組件名應(yīng)當(dāng)始終是多個單詞的，根組件App除外

有意義的名詞、簡短、具有可讀性

命名遵循PascalCase約定

公用組件以Abcd(公司名縮寫簡稱)開頭，如（AbcdDatePicker,AbcdTable）

頁面內(nèi)部組件以組件模塊名簡寫為開頭，Item為結(jié)尾，如（StaffBenchToChargeItem，StaffBenchAppNotArrItem）

使用遵循kebab-case約定

在頁面中使用組件需要前后閉合，并以短線分隔，如（，）

導(dǎo)入及注冊組件時，遵循PascalCase約定

同時還需要注意：必需符合自定義元素規(guī)范:切勿使用保存字。

為代碼統(tǒng)一美觀組件全部用kebab-case

如：car-item、product-list-item、product-detail

前端開發(fā)代碼規(guī)范文檔第五篇

符合web標(biāo)準,語義化html,結(jié)構(gòu)表現(xiàn)行為分開,兼容性優(yōu)良.頁面性能方面,代碼要求簡單明白有序,盡可能的減小服務(wù)器負載,保證最快的解析速度.

文件規(guī)范

1、html,css,js,images文件均歸檔至系統(tǒng)開發(fā)規(guī)范約定的目錄中;

2、html文件命名:英文命名,后綴.htm.同時將對應(yīng)界面稿放于同目錄中,若界面稿命名為中文,請重命名與html文件同名,以便利后端添加功能時查找對應(yīng)頁面;

3、css文件命名:英文命名,后綴.css.共用,首頁,其他頁面依實際模塊需求命名.;

4、Js文件命名:英文命名,后綴.js.共用,其他依實際模塊需求命名.

一位好的Web前端開發(fā)工程師在知識體系上既要有廣度，又要有深度，所以好多大公司即使出高薪也很難聘請到理想的前端開發(fā)工程師。那么如何系統(tǒng)的學(xué)**企業(yè)實用的web前端技術(shù)呢，為此建立了一個web前端的直播上課學(xué)**扣扣裙，前面數(shù)字是五一四，中間的數(shù)字是一六七，最終是六七八，將數(shù)字連接起來就是了。真正想要學(xué)**的可以進入，打醬油的就不要浪費大家的時間了?，F(xiàn)在說的重點不在于講解技術(shù)，而是更側(cè)重于對技巧的講解。技術(shù)非黑即白，只有對和錯，而技巧則見仁見智。

html書寫規(guī)范

1、文檔類型聲明及編碼:統(tǒng)一為html5聲明類型;編碼統(tǒng)一為,書寫時利用IDE實現(xiàn)層次明顯的縮進;

2、非特別狀況下樣式文件必需外鏈至...之間;非特別狀況下JavaScript文件必需外鏈至頁面底部;

3、引入樣式文件或JavaScript文件時,須略去默認類型聲明,

4、引入JS庫文件,文件名須包含庫名稱及版本號及是否為壓縮版,譬如;引入插件,文件名格式為庫名稱+插件名稱,譬如;5、所有編碼均遵循xhtml標(biāo)準,標(biāo)簽屬性屬性命名必需由小寫字母及下劃線數(shù)字組成,且所有標(biāo)簽必需閉合,包括br(),hr()等;屬性值必需用雙引號包括;6、充分利用無兼容性問題的html自身標(biāo)簽,譬如span,em,strong,optgroup,label,等等;需要為html元素添加自定義屬性的時候,首先要考慮下有沒有默認的已有的適合標(biāo)簽去設(shè)置,假使沒有,可以使用須以"data-"為前綴來添加自定義屬性，避免使用"data:"等其他命名方式;

7、語義化html,如標(biāo)題根據(jù)重要性用h*(同一頁面只能有一個h1),段落標(biāo)記用p,列表用ul,內(nèi)聯(lián)元素中不可嵌套塊級元素;

8、盡可能減少div嵌套,如歡迎訪問XXX,您的用戶名是用戶名完全可以用以下代碼替代:歡迎訪問XXX,您的用戶名是用戶名;

9、書寫鏈接地址時,必需避免重定向，例如：href="",即須在URL地址后面加上“/〞；

10、在頁面中盡量避免使用style屬性,即style="…";

11、必需為含有描述性表單元素(input,textarea)添加label,如姓名:須寫成:姓名:

12、能以背景形式浮現(xiàn)的圖片,盡量寫入css樣式中;

13、重要圖片必需加上alt屬性;給重要的元素和截斷的元素加上title;

14、給區(qū)塊代碼及重要功能(譬如循環(huán))加上解釋,便利后臺添加功能;

15、特別符號使用:盡可能使用代碼替代:譬如()()空格()?(?)等等;

16、書寫頁面過程中,請考慮向后擴展性;

17、classid參見css書寫規(guī)范.

css書寫規(guī)范

1、編碼統(tǒng)一為utf-8;

2、協(xié)作開發(fā)及分工:i會根據(jù)各個模塊,同時根據(jù)頁面相像程序,事先寫**體框架文件,分派給前端人員實現(xiàn)內(nèi)部結(jié)構(gòu)表現(xiàn)行為;

共用css文件由i書寫,協(xié)作開發(fā)過程中,每個頁面請務(wù)必都要引入,此文件包含reset及頭部底部樣式,此文件不可隨意修改;

3、class與id的使用:id是唯一的并是父級的,class是可以重復(fù)的并是子級的,所以id僅使用在大的模塊上,class可用在重復(fù)使用率高及子級中;id原則上都是由我分發(fā)框架文件時命名的,為JavaScript預(yù)留鉤子的除外;

4、為JavaScript預(yù)留鉤子的命名,請以js_起始,譬如:js_hide,jsshow;

5、class與id命名:大的框架命名譬如header/footer/wrapper/left/right之類的在2中由i統(tǒng)一命名.其他樣式名稱由小寫英文數(shù)字

來組合命名,如i_comment,fontred,width200;避免使用中文拼音,盡量使用簡易的單詞組合;總之,命名要語義化,簡明化

.6、規(guī)避class與id命名(此條重要,若有不明白請及時與i溝通):a）通過附屬寫法規(guī)避,例如見d;b）取父級元素id/class命名部分命名,例如見d;c）重復(fù)使用率高的命名,請以自己加下劃線起始,譬如i_clear;d）a,b兩條,適用于在2中已建好框架的頁面,如,要在2中已建好框架的頁面代碼中參與新的div元素,按a命名法則:...,樣式寫法:

#mainnav

.firstnav{}按b命名法則:...,樣式寫法:

.main_firstnav{}

7、css屬性書寫順序,建議遵循:

布局定位屬性--自身屬性--文本屬性--其他屬性.此條可根據(jù)自身**慣書寫,但盡量保證同類屬性寫在一起.屬性列舉:布局定位屬性主要包括:displaylist-styleposition（相應(yīng)的top,right,bottom,left）＆floatclear＆visibility＆overflow；自身屬性主要包括:widthheightmarginpaddingborderbackground;文本屬性主要包括：colorfonttext-decorationtext-alignvertical-alignwhite-space其他content;我所列出的這些屬性只是最常用到的,并不代表全部;

8、書寫代碼前,考慮并提高樣式重復(fù)使用率;

9、充分利用html自身屬性及樣式繼承原理減少代碼量,譬如:這兒是標(biāo)題列表2023-09-15定義li{position:relative}

lispan{position:absolute;right:0}即可實現(xiàn)日期居右顯示

10、樣式表中中文字體名,請務(wù)必轉(zhuǎn)碼成unicode碼,以避免編碼錯誤時亂碼;

11、背景圖片請盡可能使用sprite技術(shù),減小http請求,考慮到多人協(xié)作開發(fā),sprite按模塊制作;

12、使用table標(biāo)簽時(盡量避免使用table標(biāo)簽),請不要用width/height/cellspacing/cellpadding等table屬性直接定義表現(xiàn),應(yīng)盡可能的利用table自身私有屬性分開結(jié)構(gòu)與表現(xiàn),如thead,tr,th,td,tbody,tfoot,colgroup,scope;(cellspaing及cellpadding的css控制方法:table{border:0;margin:0;border-collapse:collapse;}tableth,tabletd{padding:0;},文件中我會初始化表格樣式)

13、杜絕使用兼容ie8;

14、用png圖片做圖片時,要求圖片格式為png-8格式,若png-8實在影響圖片質(zhì)量或其中有半透明效果,請為ie6單獨定義背景:_background: