前端開發規範文件

y0umer發表於2013-05-02
前端

Web Front-end Development Document Specification(www.weyoo.cn)

1、檔案管理規範

1) 資原始檔目錄

背景圖片目錄 圖示目錄 圖片目錄 臨時圖片目錄 樣式檔案目錄 指令碼檔案目錄 flash檔案目錄 上傳檔案目錄 靜態檔案目錄
images/bg images/ico images/pic images/temp style js flash upload static

2) 資料夾及檔案命名

用簡短有意義的英文或者拼音（不能出現中文命名）來命名。
①資料夾命名規則: 全部小寫。例如(emotions, download, mail)。
②html,js,css檔案命名規則: 第一個單詞首字母小寫,之後每個單詞首字母大寫,html檔案字尾名統一為.htm。例如(index.htm, customizeCity.htm, register.js, dateSelect.js, base.css, mapApply.css)。 
③圖片命名規則: 第一個單詞首字母小寫,之後每個單詞首字母大寫,或者全部小寫,單詞間用下劃線連線。例如(btn_sign.gif, bgTipBox.png)。

2、XHTML書寫規範

  • 1) 文件型別宣告統一為XHTML 1.0 Transitional;
  • 2) 編碼統一為utf-8;
  • 3) 確保有Title,Description,Keywords等完整的meta標籤。
  • 4) 引入JS庫檔案,檔名須包含庫名稱及版本號及是否為壓縮版,比如jquery-1.7.1.min.js;引入外掛,檔名格式為庫名稱 + 外掛名稱,比如jQuery.cookie.js;
  • 5) 非特殊情況下樣式和指令碼程式碼必須獨立於xhtml程式碼於外部檔案中，樣式檔案必須外鏈至<head>…</head>之間，渲染執行指令碼必須外鏈至頁面底部;
  • 6) 引入外部樣式檔案及指令碼檔案採用時間戳字尾，防止由於快取問題導致頁面不能及時更新;
  • 7) 書寫時採用製表符縮排(大小為4);
  • 8) 編碼必須遵循w3c標準,標籤、屬性及屬性命名必須由小寫字母及下劃線數字組成,且所有標籤必須閉合;屬性值必須用雙引號包括;
  • 9) 充分利用無相容性問題的html自身標籤,比如span,em,strong,label,等等;需要為html元素新增自定義屬性的時候,首先要考慮下有沒有預設的已有的合適標籤去設定,如果沒有,可以使用須以”data-”為字首來新增自定義屬性，避免使用”data:”等其他命名方式;
  • 10) 語義化html,如標題根據重要性用h1~h6(同一頁面只能有一個h1),段落標記用p,列表用ul,內聯元素中不可巢狀塊級元素;
  • 11) 儘可能減少div巢狀;
  • 12) 必須為含有描述性表單元素(input,textarea)新增label;
  • 13) 能以背景形式呈現的圖片,儘量寫入css樣式中;
  • 14) 圖片必須加上alt屬性;給重要的元素和截斷的元素加上title;
  • 15) 不是標籤一部分的特殊符號都用編碼表示:比如<(<)&>(>)&空格()&»(»)等等;
  • 16) 給區塊程式碼及重要功能(比如迴圈)加上合理的註釋,方便後臺新增功能:註釋格式,‘–-’只能在註釋的始末位置,不能出現2個或2個以上的”–“;

3、CSS書寫規範

  • 1) 編碼統一為utf-8;
  • 2) 全域性定義以及全站公共部分共用檔案common.css,開發過程中,每個頁面請務必都要引入,此檔案包含reset,常用規則(連結、字型、隱藏、清浮動等)、佈局、各種模組基本樣式及頭部底部樣式,此檔案不可隨意修改;
  • 3) 選擇符命名及其使用：
    ① 命名請儘量使用英文避免使用漢語拼音,使用駝峰式命名和劃線命名法。如(searchBox, p_i_4_l, width200);駝峰式命名法用來區別不同的單詞，劃線命名法表示從屬關係。命名要語義化,簡明化,儘量使用簡短的英文單片語合;
    ② id是唯一的並是父級的,class是可以重複的並是子級的,所以id一般使用在大的模組上,class可用在重複使用率高及子級中;
    ③ 嚴禁出現#id ul li(長度超過2以上的派生類)等類似選擇器;允許.active .classname;減少使用基於元素的類選擇器:div.classname;減少屬性選擇器：#id[title=weyoo]; ④ 嚴禁使用 “*” 選擇符;
  • 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) 書寫程式碼前,考慮並提高樣式重複使用率,歸類class分組，以便通用性;
  • 7) 背景圖片請儘可能使用sprite技術,減少http請求;
  • 8) 減少使用影響效能的屬性,比如position:absolute||float;效能比較:“預設” 優於 “定位” 優於 “浮動”;
  • 9) 儘量不要使用expression等不相容的屬性;
  • 10) 儘量不使用hack寫出相容當前主流瀏覽器(ie6~ie9,firefox,chrome,safari,opera)的程式碼。例如:float元素的父元素不能指定clear屬性,務必指定width屬性(儘量使用em而不是px做單位),儘量不指定margin和padding等屬性(可以在float元素內部巢狀一個標籤來設定margin和padding)。
  • 11) 檔案頭部註釋須標明作者及修改日期。必須為大區塊樣式新增合理註釋;
  • 12) 測試完成後壓縮合並css檔案,力求降低http請求;

4、JavaScript書寫規範

  • 1) 編碼統一為utf-8;
  • 2) 常用功能函式統一寫在公用js檔案commonToolFn.js裡;
  • 3) 書寫時採用製表符縮排(大小為4);
  • 4) 常量所有字元大寫，變數所有字元小寫;類命名:首字母大寫駝峰式命名.如CommonTool;函式命名:首字母小寫駝峰式命名.如arrEach();
  • 5) 命名語義化,儘可能利用英文單詞或其縮寫;程式碼結構明瞭,提高函式重用率;
  • 6) 檔案頭部註釋須標明作者及修改日期。函式註釋須標明函式功能，引數及返回值;
  • 7) 書寫過程過,每行程式碼結束必須有分號;
  • 8) 宣告變數必須用var ,包括迴圈 遍歷:如：for(var i=0;i<10;i+=1){},for(var value in obj){};注意減少全域性變數的宣告 避免變數混亂;
  • 9) 條件判斷後執行程式碼塊必須加花括號:if(){…};for(){…}
  • 10) 規範json書寫:必須以花括號開始和結束;
  • 11) 測試完成後壓縮合並JavaScript檔案,力求降低http請求;

5、效能優化規範

  • 1) 由於大多都是操作DOM，所以在查詢節點時務必書寫高效的選擇器(jQuery);
  • 2) 快取頻繁使用的物件、陣列及相關的屬性;
  • 3) 使指令碼儘可能少地執行或者不執行(按需載入,比如選項卡資料在頁面載入時只載入第一個選項卡的內容資料，其他選項卡非同步提交載入);
  • 4) 合理的使用圖片格式，並進行壓縮優化，保持圖片最佳視覺以及大小;
  • 5) 對於大資料，多屏頁面進行資料延遲載入處理，以及圖片預載入;

6、版本控制規範

  • 1) 程式碼提交前清理無關檔案(比如縮圖快取資料檔案thumb.db等等);
  • 2) 對於CSS以及JS約定好的程式碼註釋必須加上之後再提交到SVN，方便SVN自動更新檔案編輯資訊以及版本號;
  • 3) 變更檔案(特別是模版檔案以及重要的頁面)比較大時最好做好備份工作，方便釋出到正式線出現問題時快速撤回;
  • 4) 程式碼修改或提交前獲取下最新版本，有規律的提交程式碼；簽入程式碼前經過良好的測試;

7、開發除錯工具

  • 1) 前端常用編輯器/IDE(開發);
  • 2) IDE自帶/瀏覽器外掛(除錯);
  • 3) CSS,JS壓縮工具;
  • 4) 其他輔助工具;


相關文章