前端代碼規(guī)范_第1頁(yè)
前端代碼規(guī)范_第2頁(yè)
前端代碼規(guī)范_第3頁(yè)
前端代碼規(guī)范_第4頁(yè)
前端代碼規(guī)范_第5頁(yè)
已閱讀5頁(yè)，還剩6頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、前端開(kāi)發(fā)規(guī)范1、 基本準(zhǔn)則符合web標(biāo)準(zhǔn), 語(yǔ)義化html, 結(jié)構(gòu)表現(xiàn)行為分離, 兼容性優(yōu)良. 頁(yè)面性能方面, 代碼要求簡(jiǎn)潔明了有序, 盡可能的減小服務(wù)器負(fù)載, 保證最快的解析速度.二、文件規(guī)范1. html, css, js, images文件均歸檔至約定的目錄中;2. html文件命名: 英文命名, 后綴.html. 同時(shí)將對(duì)應(yīng)界面稿放于同目錄中, 若界面稿命名為中文, 請(qǐng)重命名與html文件同名, 以方便后端添加功能時(shí)查找對(duì)應(yīng)頁(yè)面;3. css文件命名: 英文命名, 后綴.css. 共用global.css, 首頁(yè)index.css, 其他頁(yè)面依實(shí)際模塊需求命名.;4. Js文件命名:

2、英文命名, 后綴.js. 共用global.js, 其他依實(shí)際模塊需求命名.3、 書(shū)寫(xiě)規(guī)范HTML基本架構(gòu)請(qǐng)參照template.html,移動(dòng)端參照template-mobile.html1. 文檔類型聲明及編碼: 統(tǒng)一為html5聲明類型<!DOCTYPE HTML> 編碼統(tǒng)一為<meta charset="utf-8" />, 書(shū)寫(xiě)時(shí)利用IDE實(shí)現(xiàn)層次分明的縮進(jìn);2. 非特殊情況下樣式文件必須外鏈至<head></head>之間;非特殊情況下JavaScript文件必須外鏈至頁(yè)面底部;3. 引入樣式文件或JavaScri

3、pt文件時(shí), 須略去默認(rèn)類型聲明.CSS:<link rel=”stylesheet” href=”css/global.css” />JS:<script src="js/jquery.js"></script>4. 引入JS庫(kù)文件, 文件名須包含庫(kù)名稱及版本號(hào)及是否為壓縮版, 比如jquery-1.7.1.min.js; 引入插件, 文件名格式為庫(kù)名稱+插件名稱, 比如jQuery.cookie.js;5. 所有編碼均遵循xhtml標(biāo)準(zhǔn), 標(biāo)簽 & 屬性 & 屬性命名 必須由小寫(xiě)字母及中、下劃線數(shù)字組成, 且所有標(biāo)簽必

4、須閉合; 屬性值必須用雙引號(hào)包括;6. 充分利用無(wú)兼容性問(wèn)題的html自身標(biāo)簽, 比如span, em, strong, optgroup, label,等等; 需要為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嵌套9. 書(shū)寫(xiě)鏈接地址時(shí), 必須避免重定向，例如：href=”, 即須在URL地址后面加上“

5、/”；10. 在頁(yè)面中盡量避免使用style屬性,即style=”;11. 能以背景形式呈現(xiàn)的圖片, 盡量寫(xiě)入css樣式中;12. 重要圖片必須加上alt屬性; 給重要的元素和截?cái)嗟脑丶由蟭itle;13. 給區(qū)塊代碼及重要功能(比如循環(huán))加上注釋, 方便后臺(tái)添加功能;14. 特殊符號(hào)使用: 盡可能使用代碼替代: 比如 <(<) & >(>) & 空格( ) & »(») 等等;15. 書(shū)寫(xiě)頁(yè)面過(guò)程中, 請(qǐng)考慮向后擴(kuò)展性; CSS重置樣式引用reset.css1. 編碼統(tǒng)一為utf-8;2. class與id的使用

6、: id是唯一的, class是可以重復(fù)的, 所以id盡量使用在大的模塊上, class可用在重復(fù)使用率高及子級(jí)中; 常用命名：容 器：container/box頭 部：header主 導(dǎo) 航：nav子 導(dǎo) 航：nav-sub頂 導(dǎo) 航：nav-top網(wǎng)站標(biāo)志：logo大 廣 告：banner頁(yè)面中部：main底 部：footer菜 單：menu菜單內(nèi)容：menu-content子 菜 單：menu-sub搜 索：search搜索關(guān)鍵字：keyword搜索范圍：range標(biāo)簽文字：tag-title標(biāo)簽內(nèi)容：tag-content當(dāng)前標(biāo)簽：tag-active標(biāo) 題：title內(nèi) 容：cont

7、ent列 表：list當(dāng)前位置：nav-dir側(cè) 邊 欄：side圖 標(biāo)：icon注 釋：note登 錄：login注 冊(cè)：register3. 為JavaScript預(yù)留鉤子的命名, 請(qǐng)以 js_ 起始, 比如: js_hide, js_show;4.class與id命名:大的框架命名比如header/footer/wrapper/left/right.其他樣式名稱由 小寫(xiě)英文 & 數(shù)字 & - 來(lái)組合命名, 如top-comment, fontred, width200; 避免使用中文拼音, 盡量使用簡(jiǎn)易的單詞組合; 總之, 命名要語(yǔ)義化, 簡(jiǎn)明化.5. css屬性書(shū)寫(xiě)順序

8、, 建議遵循: 布局定位屬性>自身屬性>文本屬性>其他屬性. 此條可根據(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 &

9、font & text-decoration & text-align & vertical-align & white- space & 其他 & content; 這些屬性只是最常用到的, 并不代表全部;6. 充分利用html自身屬性及樣式繼承原理減少代碼量7. 背景圖片請(qǐng)盡可能使用sprite技術(shù), 減小http請(qǐng)求, 考慮到多人協(xié)作開(kāi)發(fā), sprite按模塊制作;8. 使用table標(biāo)簽時(shí)(盡量避免使用table標(biāo)簽), 請(qǐng)不要用width/ height/cellspacing/cellpadding等table屬性直接定義表現(xiàn), 應(yīng)盡

10、可能的利用table自身私有屬性分離結(jié)構(gòu)與表現(xiàn) , 如thead,tr,th,td,tbody,tfoot,colgroup,scope; (cellspaing及cellpadding的css控制方法:tableborder:0;margin:0;border-collapse:collapse; table th, table tdpadding:0;)9. 用png圖片做圖片時(shí), 要求圖片格式為png-8格式,若png-8實(shí)在影響圖片質(zhì)量或其中有半透明效果, 請(qǐng)為ie6單獨(dú)定義背景:_background:none;_filter:progid:DXImageTransform.Micr

11、osoft.AlphaImageLoader (sizingMethod=crop, src=img/bg.png);10. 減少使用影響性能的屬性, 比如position:absolute | float ;11. 代碼縮進(jìn)與格式: 建議單行書(shū)寫(xiě), 可根據(jù)自身習(xí)慣; JavaScript1. 文件編碼統(tǒng)一為utf-8, 書(shū)寫(xiě)過(guò)程過(guò), 每行代碼結(jié)束必須有分號(hào);2. 變量命名: 駝峰式命名. 原生JavaScript變量要求是純英文字母, 首字母須小寫(xiě), 如flower;每個(gè)局部變量都需要有一個(gè)類型前綴，按照類型可以分為：s：表示字符串。例如：sName，sHtml；n：表示數(shù)字。例如

12、：nPage，nTotal；b：表示邏輯。例如：bChecked，bHasLogin；a：表示數(shù)組。例如：aList，aGroup；r：表示正則表達(dá)式。例如：rDomain，rEmail；f：表示函數(shù)。例如：fGetHtml，fInit；o：表示以上未涉及到的其他對(duì)象，例如：oButton，oDate；作用域不大臨時(shí)變量可以簡(jiǎn)寫(xiě)，比如：str，num，bol，obj，fun，arr,循環(huán)變量可以簡(jiǎn)寫(xiě)，比如：i，j，k等，另要求變量集中聲明, 避免全局變量.3. 類名首個(gè)字母必需大寫(xiě)，例如Image，Support等。屬性名需要是有意義的名詞，首字母小寫(xiě)，例如oImage.width。方法名需要

13、是有意義的動(dòng)詞+名詞，首字母小寫(xiě)，例如Support.getWidth.如果不希望被其他方法調(diào)用，需要在屬性或者方法名前面加“_”，例如oImage._language.如果不希望被子類調(diào)用，需要在屬性或者方法名前加“_”，例如oImage._fire()4.排版縮進(jìn) 采用統(tǒng)一的縮進(jìn)方式排版代碼?？s進(jìn)為2個(gè)ASCII空格If(condition1 | condition2) action1; else if (condition3 && condition4) action2; else if (condition5 && condition6 &&am

14、p; condition7 && condition8) action2; else default action;5.關(guān)鍵詞、條件括弧后面使用空格；運(yùn)算操作符號(hào)兩側(cè)使用空格；語(yǔ)句分割符,后面使用空格var name空格=空格value;if空格(a,空格b) 6. 左大括號(hào)""可以居行尾，也可寫(xiě)在下行首（獨(dú)自一行）；右大括號(hào)""單獨(dú)占一行，居行首if (a && b) -if (a && b) 7. 句末必須用分號(hào)結(jié)尾var fn = function () ;/這里沒(méi)有分號(hào)的話，腳本解析器會(huì)報(bào)錯(cuò)！(fu

15、nction () alert(1);)();8.單行過(guò)長(zhǎng)應(yīng)在適當(dāng)位置予以換行,增強(qiáng)可讀性if 語(yǔ)句括號(hào)中的條件若過(guò)多過(guò)長(zhǎng)，應(yīng)予以折行；折行后，|、&& 等符號(hào)應(yīng)與 “(” 后的第一個(gè)字母縱向?qū)R9. if、while、for、do語(yǔ)句的執(zhí)行體總是用""和""括起來(lái)，即使在其結(jié)構(gòu)體內(nèi)只有一條語(yǔ)句10. 語(yǔ)法意義相互獨(dú)立的代碼將用空行分隔11. 盡量避免使用存在兼容性及消耗資源的方法或?qū)傩? 比如eval_r() & innerText;12. 代碼結(jié)構(gòu)明了, 加適量注釋. 提高函數(shù)重用率;13. 注重與html分離, 減小refl

16、ow, 注重性能. 圖片1. 所有頁(yè)面元素類圖片均放入imges文件夾, 測(cè)試用圖片放于imges/demo文件夾;2. 圖片格式僅限于gif | png | jpg;3. 命名全部用小寫(xiě)英文字母 | 數(shù)字 | - | _ 的組合，其中不得包含漢字 | 空格 | 特殊字符；盡量用易懂的詞匯, 便于團(tuán)隊(duì)其他成員理解; 另, 命名分頭尾兩部分, 用下劃線隔開(kāi), 比如ad-left01.gif | btn_submit.gif;4. 在保證視覺(jué)效果的情況下選擇最小的圖片格式與圖片質(zhì)量, 以減少加載時(shí)間;5. 盡量避免使用半透明的png圖片6. 運(yùn)用css sprite技術(shù)集中小的背景圖或圖標(biāo), 減小頁(yè)面http請(qǐng)求注釋1. html注釋: 注釋格式 , 只能在注釋的始末位置,不可置入注釋文字區(qū)域;2. css注釋: 注釋格式 ;3. JavaScript注釋, 單行注釋使用/這兒是單行注釋 ,多行注釋使用 ;開(kāi)發(fā)及測(cè)試工具約定建議使用WebStorm|Aptana | Dw | Vim ,

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論