web前端開(kāi)發(fā)規(guī)范總結(jié)

時(shí)間：2023-08-29 13:48:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-08-29 13:48:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

web前端開(kāi)發(fā)規(guī)范總結(jié)：Web前端作為開(kāi)發(fā)團(tuán)隊(duì)中不可或缺的一部分，需要按照相關(guān)規(guī)定進(jìn)行合理編寫(xiě)（一部分不良習(xí)慣可能給自己和他人造成不必要的麻煩）。不同公司不同團(tuán)隊(duì)具有不同的規(guī)范和文檔。下面是根據(jù)不同企業(yè)和團(tuán)隊(duì)的要求進(jìn)行全面詳細(xì)的整理結(jié)果。備注：實(shí)際開(kāi)發(fā)請(qǐng)以本公司的規(guī)范為標(biāo)準(zhǔn)。

A.基本原則

符合web標(biāo)準(zhǔn)（UTF-8，HTML5），語(yǔ)義化html（HTML5新增要求，減少div和span等無(wú)特定語(yǔ)義的標(biāo)簽使用），結(jié)構(gòu)表現(xiàn)行為分離（HTML-CSS-JS代碼分離，不同行為代碼高內(nèi)聚低耦合），兼容性優(yōu)良（早期版本瀏覽器兼容，移動(dòng)端和PC端設(shè)備兼容）.頁(yè)面性能方面（減少請(qǐng)求次數(shù)，例如使用精靈圖和sass語(yǔ)法），代碼要求簡(jiǎn)潔明了有序，盡可能的減小服務(wù)器負(fù)載，保證最快的解析速度（減小repaint和reflow）.

B.文件命名規(guī)范

1、html，css，js，lib，images文件均存放至項(xiàng)目的目錄中。如果使用相關(guān)前端框架，根據(jù)框架的文件格式進(jìn)行合理布局。

2、所有文件夾及文件使用英文命名（避免使用中文路徑）。

3、html文件：入口文件使用index.html。如果有對(duì)應(yīng)的設(shè)計(jì)組設(shè)計(jì)原稿，需要將對(duì)應(yīng)的設(shè)計(jì)稿和html文件命名一致并合理存放。

4、css文件命名：后綴.css。通用initial.css，初始化base.css，首頁(yè)index.css，其他頁(yè)面按照對(duì)應(yīng)的html命名。

5、Js文件命名：英文命名，后綴.js.通用common.js，初始化base.js。 其他頁(yè)面按照對(duì)應(yīng)的html命名。

C.HTML規(guī)范

1、文檔類型聲明及編碼：統(tǒng)一為html5聲明類型。書(shū)寫(xiě)時(shí)利用IDE實(shí)現(xiàn)層次分明的縮進(jìn)（默認(rèn)縮進(jìn)4空格）。

2、非特殊情況下CSS文件放在body部分標(biāo)簽后。非特殊情況下大部分JS文件放在標(biāo)簽尾部（如果需要界面未加載前執(zhí)行的代碼可以放在head標(biāo)簽后）避免行內(nèi)JS和CSS代碼。

3、所有編碼需要遵循h(huán)tml（XML）標(biāo)準(zhǔn)，標(biāo)簽&屬性&屬性命名必須由小寫(xiě)字母及下劃線數(shù)字組成，且所有標(biāo)簽必須閉合，包括br()，hr()等。屬性值用雙引號(hào)。

4、引入JS庫(kù)文件，文件名須包含庫(kù)名稱及版本號(hào)及是否為壓縮版，比如jquery-1.4.1.min.js。引入插件，文件名格式為庫(kù)名稱+插件名稱，比如jQuery.bootstrap.js。

5、書(shū)寫(xiě)頁(yè)面過(guò)程中，請(qǐng)考慮向后擴(kuò)展性。class&id參見(jiàn)css書(shū)寫(xiě)規(guī)范.

6、需要為html元素添加自定義屬性的時(shí)候，首先要考慮下有沒(méi)有默認(rèn)的已有的合適標(biāo)簽去設(shè)置，如果沒(méi)有，可以使用須以"data-"為前綴來(lái)添加自定義屬性，避免使用"data："等其他命名方式。

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

8、盡可能減少div多層級(jí)嵌套。

9、書(shū)寫(xiě)鏈接地址時(shí)，必須避免重定向，例如：href=“http：//http://myVue.com/”，即須在URL地址后面加上“/”；

10、在頁(yè)面中盡量避免使用style屬性，即style="…"。

11、必須為含有描述性表單元素(input，textarea)添加label，如姓名：須寫(xiě)成：姓名：

12、能以背景形式呈現(xiàn)的圖片，盡量寫(xiě)入css樣式中。

13、重要圖片必須加上alt屬性。給重要的元素和截?cái)嗟脑丶由蟭itle。

14、給區(qū)塊代碼及重要功能(比如循環(huán))加上注釋，方便后臺(tái)添加功能。

15、特殊符號(hào)使用：盡可能使用代碼替代：比如<(<)&>(>)&空格()&?(?)等等。
D.CSS規(guī)范

1、編碼規(guī)范為utf-8。

2、協(xié)作開(kāi)發(fā)及分工：i會(huì)根據(jù)各個(gè)模塊，同時(shí)根據(jù)頁(yè)面相似程序，事先寫(xiě)**體框架文件，分配給前端人員實(shí)現(xiàn)內(nèi)部結(jié)構(gòu)&表現(xiàn)&行為。共用css文件base.css由i書(shū)寫(xiě)，協(xié)作開(kāi)發(fā)過(guò)程中，每個(gè)頁(yè)面請(qǐng)務(wù)必都要引入，此文件包含reset及頭部底部樣式，此文件不可隨意修改。

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

4、為JS預(yù)留鉤子的命名，請(qǐng)以js_起始，比如：js_hide，js_show。

5、class與id命名：大的框架命名比如header/footer/wrapper/left/right之類的在2中由i統(tǒng)一命名.其他樣式名稱由小寫(xiě)英文&數(shù)字&來(lái)組合命名，如i_comment，fontred，width200。避免使用中文拼音，盡量使用簡(jiǎn)易的單詞組合?？傊Z(yǔ)義化，簡(jiǎn)明化

6、規(guī)避class與id命名(此條重要，若有不明白請(qǐng)及時(shí)與i溝通)：a）通過(guò)從屬寫(xiě)法規(guī)避，示例見(jiàn)d。b）取父級(jí)元素id/class命名部分命名，示例見(jiàn)d。c）重復(fù)使用率高的命名，請(qǐng)以自己代號(hào)加下劃線起始，比如i_clear。d）a，b兩條，適用于在2中已建好框架的頁(yè)面，如，要在2中已建好框架的頁(yè)面代碼中加入新的div元素，按a命名法則：…，樣式寫(xiě)法：#mainnav.firstnav{…}按b命名法則：…，樣式寫(xiě)法：.main_firstnav{…}

7、css屬性書(shū)寫(xiě)順序，建議遵循：布局定位屬性–>自身屬性–>文本屬性–>其他屬性.此條可根據(jù)自身習(xí)慣書(shū)寫(xiě)，但盡量保證同類屬性寫(xiě)在一起.屬性列舉：布局定位屬性主要包括：display&list-style&position（相應(yīng)的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、書(shū)寫(xiě)代碼前，提高樣式重復(fù)使用率。

9、充分利用html自身屬性及樣式繼承原理減少代碼量，例如：

即可實(shí)現(xiàn)日期居右顯示

ul.list li {
position：relative
}
ul .list li span {
position：absolute；right：0
}

10、樣式表中中文字體名，請(qǐng)務(wù)必轉(zhuǎn)碼成unicode碼，以避免編碼錯(cuò)誤時(shí)亂碼。

11、背景圖片請(qǐng)盡可能使用精靈圖技術(shù)，減小http請(qǐng)求，考慮到多人協(xié)作開(kāi)發(fā)，精靈圖按模塊制作。

12、使用table標(biāo)簽時(shí)(盡量避免使用table標(biāo)簽)，請(qǐng)不要用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。}，base.css文件中我會(huì)初始化表格樣式)

13、杜絕使用兼容ie8。

14、用png圖片做圖片時(shí)，要求圖片格式為png-8格式，若png-8實(shí)在影響圖片質(zhì)量或其中有半透明效果，請(qǐng)為ie6單獨(dú)定義背景：_background：none。_filter：progid：
DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop，src=’img/bg.png’)。

15、避免兼容性屬性的使用，比如text-shadow||css3的相關(guān)屬性。

16、減少使用影響性能的屬性，比如position：absolute||float。

17、必須為大區(qū)塊樣式添加注釋，小區(qū)塊適量注釋。

18、代碼縮進(jìn)與格式：建議單行書(shū)寫(xiě)，可根據(jù)自身習(xí)慣，后期優(yōu)化會(huì)統(tǒng)一處理。
E. JS書(shū)寫(xiě)規(guī)范

1、文件編碼統(tǒng)一為utf-8，書(shū)寫(xiě)過(guò)程過(guò)，每行代碼結(jié)束必須有分號(hào)。原則上所有功能均根據(jù)XXX項(xiàng)目需求原生開(kāi)發(fā)，以避免網(wǎng)上down下來(lái)的代碼造成的代碼污染(沉冗代碼||與現(xiàn)有代碼沖突||…)。

2、庫(kù)引入：原則上僅引入jQuery庫(kù)，若需引入第三方庫(kù)，須與團(tuán)隊(duì)其他人員討論決定。

3、變量命名：駝峰式命名.原生JS變量要求是純英文字母，首字母須小寫(xiě)，如myVue。
jQuery變量要求首字符為’_’，其他與原生JS規(guī)則相同，如：_myVue。另，要求變量集中聲明，避免全局變量.

4、類命名：首字母大寫(xiě)，駝峰式命名.如MyVue。

5、函數(shù)命名：首字母小寫(xiě)駝峰式命名.如myVue()。

6、命名語(yǔ)義化，盡可能利用英文單詞或其縮寫(xiě)。

7、盡量避免使用存在兼容性及消耗資源的方法或?qū)傩裕热鏴val_r()&innerText。

8、后期優(yōu)化中，JS非注釋類中文字符須轉(zhuǎn)換成unicode編碼使用，以避免編碼錯(cuò)誤時(shí)亂碼顯示。

9、代碼結(jié)構(gòu)明了，加適量注釋.提高函數(shù)重用率。

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

F.圖片規(guī)范

1、所有頁(yè)面元素類圖片均放入img文件夾，測(cè)試用圖片放于demo文件夾。

2、圖片格式gif/png/jpg。提倡使用webp文件格式，使用軟件進(jìn)行圖片壓縮。

3、命名全部用小寫(xiě)英文字母||數(shù)字||_的組合，其中不得包含漢字||空格||特殊字符；盡量用易懂的詞匯，便于團(tuán)隊(duì)其他成員理解。另，命名分頭尾兩部分，用下劃線隔開(kāi)，比如ad_left01.gif||btn_submit.gif。

4、在保證視覺(jué)效果的情況下選擇最小的圖片格式與圖片質(zhì)量，以減少加載時(shí)間。

5、盡量避免使用半透明的png圖片(若使用，請(qǐng)參考css規(guī)范相關(guān)說(shuō)明)。

6、運(yùn)用css精靈圖技術(shù)集中小的背景圖或圖標(biāo)，減小頁(yè)面http請(qǐng)求，但注意，請(qǐng)務(wù)必在對(duì)應(yīng)的精靈圖psd源圖中劃參考線，并保存至img目錄下

G.測(cè)試規(guī)范

開(kāi)發(fā)及測(cè)試工具約定建議使用Aptana-Sublime-Vim-WebStrom，亦可根據(jù)自己喜好選擇，但須遵循如下原則：

1、不可利用IDE的視圖模式’畫(huà)’代碼。

2、不可利用IDE生成相關(guān)功能代碼。

3、編碼必須格式化，比如縮進(jìn)。測(cè)試工具：前期開(kāi)發(fā)僅測(cè)試FireFox&IE6&IE7&IE8，后期優(yōu)化時(shí)加入Opera&Chrome&Safari。建議測(cè)試順序：FireFox–>IE–>Opera–>Chrome–>Safari。

如何學(xué)好前端開(kāi)發(fā)是關(guān)鍵：

前端技術(shù)每年都會(huì)不斷更新，自學(xué)前端容易學(xué)不到最前沿的課程，學(xué)習(xí)前端開(kāi)發(fā)建議大家還是要選擇培訓(xùn)為好，推薦愛(ài)創(chuàng)課堂，是一家專門(mén)做前端教育的學(xué)校，愛(ài)創(chuàng)課堂是一家以就業(yè)為導(dǎo)向的前端培訓(xùn)學(xué)校，所學(xué)習(xí)的就是企業(yè)所需要的，培養(yǎng)企業(yè)最需要的前端工程師為企業(yè)理念，授課以實(shí)戰(zhàn)課程為主，更多的學(xué)習(xí)大項(xiàng)目對(duì)以后工作有幫助，畢業(yè)后輕松就業(yè)！