1、文件管理規(guī)范1) 資源文件目錄| 背景圖片目錄 | 圖標(biāo)目錄 | 圖片目錄 | 臨時圖片目錄 | 樣式文件目錄 | 腳本文件目錄 | flash文件目錄 | 上傳文件目錄 | 靜態(tài)文件目錄 | | images/bg | images/ico | images/pic | images/temp | style | js | flash | upload | static |
2) 文件夾及文件命名用簡短有意義的英文或者拼音（不能出現(xiàn)中文命名）來命名。
①文件夾命名規(guī)則: 全部小寫。例如(emotions, download, mail)。
②html,js,css文件命名規(guī)則: 第一個單詞首字母小寫,之后每個單詞首字母大寫,html文件后綴名統(tǒng)一為.htm。例如(index.htm, customizeCity.htm, register.js, dateSelect.js, base.css, mapApply.css)。
③圖片命名規(guī)則: 第一個單詞首字母小寫,之后每個單詞首字母大寫,或者全部小寫,單詞間用下劃線連接。例如(btn_sign.gif, bgTipBox.png)。
2、XHTML書寫規(guī)范- 1) 文檔類型聲明統(tǒng)一為XHTML 1.0 Transitional;
- 2) 編碼統(tǒng)一為utf-8;
- 3) 確保有Title,Description,Keywords等完整的meta標(biāo)簽。
- 4) 引入JS庫文件,文件名須包含庫名稱及版本號及是否為壓縮版,比如jquery-1.7.1.min.js;引入插件,文件名格式為庫名稱 + 插件名稱,比如jQuery.cookie.js;
- 5) 非特殊情況下樣式和腳本代碼必須獨(dú)立于xhtml代碼于外部文件中，樣式文件必須外鏈至<head>...</head>之間，渲染執(zhí)行腳本必須外鏈至頁面底部;
- 6) 引入外部樣式文件及腳本文件采用時間戳后綴，防止由于緩存問題導(dǎo)致頁面不能及時更新;
- 7) 書寫時采用制表符縮進(jìn)(大小為4);
- 8) 編碼必須遵循w3c標(biāo)準(zhǔn),標(biāo)簽、屬性及屬性命名必須由小寫字母及下劃線數(shù)字組成,且所有標(biāo)簽必須閉合;屬性值必須用雙引號包括;
- 9) 充分利用無兼容性問題的html自身標(biāo)簽,比如span,em,strong,label,等等;需要為html元素添加自定義屬性的時候,首先要考慮下有沒有默認(rèn)的已有的合適標(biāo)簽去設(shè)置,如果沒有,可以使用須以”data-”為前綴來添加自定義屬性，避免使用”data:”等其他命名方式;
- 10) 語義化html,如標(biāo)題根據(jù)重要性用h1~h6(同一頁面只能有一個h1),段落標(biāo)記用p,列表用ul,內(nèi)聯(lián)元素中不可嵌套塊級元素;
- 11) 盡可能減少div嵌套;
- 12) 必須為含有描述性表單元素(input,textarea)添加label;
- 13) 能以背景形式呈現(xiàn)的圖片,盡量寫入css樣式中;
- 14) 圖片必須加上alt屬性;給重要的元素和截斷的元素加上title;
- 15) 不是標(biāo)簽一部分的特殊符號都用編碼表示:比如<(<)&>(>)&空格()&?(?)等等;
- 16) 給區(qū)塊代碼及重要功能(比如循環(huán))加上合理的注釋,方便后臺添加功能:注釋格式,‘–-’只能在注釋的始末位置,不能出現(xiàn)2個或2個以上的"--";
3、CSS書寫規(guī)范- 1) 編碼統(tǒng)一為utf-8;
- 2) 全局定義以及全站公共部分共用文件common.css,開發(fā)過程中,每個頁面請務(wù)必都要引入,此文件包含reset,常用規(guī)則(鏈接、字體、隱藏、清浮動等)、布局、各種模塊基本樣式及頭部底部樣式,此文件不可隨意修改;
- 3) 選擇符命名及其使用：
① 命名請盡量使用英文避免使用漢語拼音,使用駝峰式命名和劃線命名法。如(searchBox, p_i_4_l, width200);駝峰式命名法用來區(qū)別不同的單詞，劃線命名法表示從屬關(guān)系。命名要語義化,簡明化,盡量使用簡短的英文單詞組合;
② id是唯一的并是父級的,class是可以重復(fù)的并是子級的,所以id一般使用在大的模塊上,class可用在重復(fù)使用率高及子級中;
③ 嚴(yán)禁出現(xiàn)#id ul li(長度超過2以上的派生類)等類似選擇器;允許.active .classname;減少使用基于元素的類選擇器:div.classname;減少屬性選擇器：#id[title=weyoo]; ④ 嚴(yán)禁使用 “*” 選擇符; - 4) CSS屬性書寫順序盡量遵循:顯示屬性->盒模型->文字屬性->排版->其他。例如:#searchBtn{display:block;position:abtolute;left:2px;top:0;width:50px;height:19px;border:1px solid #ccc;padding:5px 2px;font:Arial 12px/19px;text-align:center;vertical-align:middle;color:#666;background:#999;cursor:pointer;}
- 5) 盡量使用高級語法簡寫代碼：body{font:italic bold 12px/20px arial,sans-serif;} input{padding:2px 3px; border:1px solid #999};
- 6) 書寫代碼前,考慮并提高樣式重復(fù)使用率,歸類class分組，以便通用性;
- 7) 背景圖片請盡可能使用sprite技術(shù),減少http請求;
- 8) 減少使用影響性能的屬性,比如position:absolute||float;性能比較:“默認(rèn)” 優(yōu)于 “定位” 優(yōu)于 “浮動”;
- 9) 盡量不要使用等不兼容的屬性;
- 10) 盡量不使用hack寫出兼容當(dāng)前主流瀏覽器(ie6~ie9,firefox,chrome,safari,opera)的代碼。例如:float元素的父元素不能指定clear屬性,務(wù)必指定width屬性(盡量使用em而不是px做單位),盡量不指定margin和padding等屬性(可以在float元素內(nèi)部嵌套一個標(biāo)簽來設(shè)置margin和padding)。
- 11) 文件頭部注釋須標(biāo)明作者及修改日期。必須為大區(qū)塊樣式添加合理注釋;
- 12) 測試完成后壓縮合并css文件,力求降低http請求;
4、JavaScript書寫規(guī)范- 1) 編碼統(tǒng)一為utf-8;
- 2) 常用功能函數(shù)統(tǒng)一寫在公用js文件commonToolFn.js里;
- 3) 書寫時采用制表符縮進(jìn)(大小為4);
- 4) 常量所有字符大寫，變量所有字符小寫;類命名:首字母大寫駝峰式命名.如CommonTool;函數(shù)命名:首字母小寫駝峰式命名.如arrEach();
- 5) 命名語義化,盡可能利用英文單詞或其縮寫;代碼結(jié)構(gòu)明了,提高函數(shù)重用率;
- 6) 文件頭部注釋須標(biāo)明作者及修改日期。函數(shù)注釋須標(biāo)明函數(shù)功能，參數(shù)及返回值;
- 7) 書寫過程過,每行代碼結(jié)束必須有分號;
- 8) 聲明變量必須用var ,包括循環(huán) 遍歷:如：for(var i=0;i<10;i+=1){},for(var value in obj){};注意減少全局變量的聲明 避免變量混亂;
- 9) 條件判斷后執(zhí)行代碼塊必須加花括號:if(){...};for(){...}
- 10) 規(guī)范json書寫:必須以花括號開始和結(jié)束;
- 11) 測試完成后壓縮合并JavaScript文件,力求降低http請求;
5、性能優(yōu)化規(guī)范- 1) 由于大多都是操作DOM，所以在查找節(jié)點(diǎn)時務(wù)必書寫高效的選擇器(jQuery);
- 2) 緩存頻繁使用的對象、數(shù)組及相關(guān)的屬性;
- 3) 使腳本盡可能少地運(yùn)行或者不運(yùn)行(按需加載,比如選項(xiàng)卡數(shù)據(jù)在頁面加載時只加載第一個選項(xiàng)卡的內(nèi)容數(shù)據(jù)，其他選項(xiàng)卡異步提交加載);
- 4) 合理的使用圖片格式，并進(jìn)行壓縮優(yōu)化，保持圖片最佳視覺以及大小;
- 5) 對于大數(shù)據(jù)，多屏頁面進(jìn)行數(shù)據(jù)延遲加載處理，以及圖片預(yù)加載;
6、版本控制規(guī)范- 1) 代碼提交前清理無關(guān)文件(比如縮略圖緩存數(shù)據(jù)文件thumb.db等等);
- 2) 對于CSS以及JS約定好的代碼注釋必須加上之后再提交到SVN，方便SVN自動更新文件編輯信息以及版本號;
- 3) 變更文件(特別是模版文件以及重要的頁面)比較大時最好做好備份工作，方便發(fā)布到正式線出現(xiàn)問題時快速撤回;
- 4) 代碼修改或提交前獲取下最新版本，有規(guī)律的提交代碼；簽入代碼前經(jīng)過良好的測試;
7、開發(fā)調(diào)試工具- 1) 前端常用編輯器/IDE(開發(fā));
- 2) IDE自帶/瀏覽器插件(調(diào)試);
- 3) CSS,JS壓縮工具;
- 4) 其他輔助工具;
|
