web前端開發規範

時間  2019-11-20
標籤 web 前端 開發 規範 欄目 HTML 简体版
原文   原文鏈接

web前端開發規範
javascript



web前端開發規範


目錄


 
 
 
 
    

  
  
  
  
  • 1、規範目的
    • 

  
  
  
  
  • 2、基本準則
    • 

  
  
  
  
  • 3、文件規範
    • 

  
  
  
  
  • 4、html書寫規範
    • 

  
  
  
  
  • 5、css書寫規範
    • 

  
  
  
  
  • 6、JavaScript書寫規範
    • 

  
  
  
  
  • 7、圖片規範
    • 

  
  
  
  
  • 8、註釋規範
    • 

  
  
  
  
  • 9、開發及測試工具約定
    • 

  
  
  
  
  • 10、其餘規範
    • 

  
  
  
  
  • 11、CSS Hack
    • 

 
 
 
 


1、 規範目的


爲提升團隊協做效率, 便於後臺人員添加功能及前端後期優化維護, 輸出高質量的文檔,同是爲網站有一個更好的前端架構，網站的發展及將來打好一個基礎。本文檔若有不對或者不合適的地方請提出來。css


2、 基本準則


 
 
 
 
    

  
  
  
  
  1. 符合web標準, 語義化html.
    2. 

  
  
  
  
  2. 結構表現行爲分離, 兼容性優良.
    3. 

  
  
  
  
  3. 頁面性能方面, 代碼要求簡潔明瞭有序, 儘量的減少服務器負載, 保證最快的解析速度。
    4. 

 
 
 
 


3、文件規範


 
 
 
 
    

  
  
  
  
  1. html, css, js, images文件均歸檔至 <系統開發規範> 約定的目錄中; 
   
    2. 

  
  
  
  
  2. html文件命名:命名以中文命名，依實際模塊命名，若是同一模塊以 來組合命名, 以方便添加功能時查找對應頁面，團結裏的相互理解。
    3. 

  
  
  
  
  3. css文件命名: 英文命名, 後綴.css. 初始化樣式reset.css，其餘樣式依實際模塊頁面需求命名，共用樣式通常以模塊考慮來劃分命名,若有改版修改的css文件能夠採用，example：。
    4. 

  
  
  
  
  4. Js文件命名: 英文命名, 後綴.js. 共用common.js, 其餘依實際模塊需求命名。
    5. 

 
 
 
 


4、html書寫規範


 
 
 
 
    

  
  
  
  
  1. 文檔類型聲明及編碼: 文檔聲明統一用<!DOCTYPE HTML>，編碼統一爲 
   。
    2. 

  
  
  
  
  2. 非特殊狀況下樣式文件必須外鏈至……之間;非特殊狀況下JavaScript文件必須外鏈至頁面底部以前;
    3. 

  
  
  
  
  3. 全部編碼均遵循html5標準, 標籤 & 屬性 & 屬性命名 必須由小寫字母及下劃線數字組成, 成對的標籤必須閉合,, 單獨標籤無需閉合，,等; 屬性值必須用雙引號包括;
    4. 

  
  
  
  
  4. 充分利用無兼容性問題的html自身標籤, 好比span, em, strong, optgroup, label,等等。
    5. 

  
  
  
  
  5. 語義化html, 如 標題根據重要性用h*(同一頁面只能有一個h1), 段落標記用p, 列表用ul, 內聯元素中不可嵌套塊級元素;
    6. 

  
  
  
  
  6. 儘量減小div嵌套, 如徹底能夠用如下代碼替代: ;
    7. 

  
  
  
  
  7. 引入JS庫文件，統一使用requirejs或seajs加載JS。文件名須包含庫名稱及版本號及是否爲壓縮版, 好比jquery-1.4.1.min.js; 引 入插件, 文件名格式爲庫名稱+插件名稱, 好比jQuery.cookie.js;
    8. 

  
  
  
  
  8. 書寫連接地址時, 必須避免重定向，例如：, 即須在URL地址後面加上；
    9. 

  
  
  
  
  9. 在頁面中避免使用style屬性,即
    10. 

  
  
  
  
  10. 嚴格區分做爲內容的圖片和做爲背景的圖片。做爲背景的圖片採用Css sprite技術，放在一張大圖裏。Css sprite技術的優勢是減小了http請求數，但使圖片面向css的backround-position增長了耦合度，也增長了維護成本。若是圖片有修改，不要刪除已添加的圖片，在空白處新增修改後的圖片，減小修改風險。
    11. 

  
  
  
  
  11. 圖片必須加上alt屬性; 給重要的元素和截斷的元素加上title;
    12. 

  
  
  
  
  12. 給區塊代碼及重要功能(好比循環)加上註釋，方便閱讀和後期維護。
    13. 

  
  
  
  
  13. 特殊符號使用: 儘量使用代碼替代: 好比,,,,等等;
    14. 

  
  
  
  
  14. 書寫頁面過程當中, 請考慮向後擴展性;
    15. 

  
  
  
  
  15. 不要在 html 中加入標籤來清理浮勱，經過在浮動元素的父元素上添加  來
     清除浮動。
    16. 

  
  
  
  
  16. 字體名稱最好映射成對應的英文名，例如：黑體(SimHei) 宋體(SimSun) 微軟雅黑(Microsoft Yahei)。
     -17. 、 等能夠縮寫的屬性，儘可能使用縮寫形式
     ;
     ;
     -18. 不要直接爲 html 標籤添加 css 樣式，好比
    17. 

 
 
 
 


5、css書寫規範


 
 
 
 
    

  
  
  
  
  1. 編碼統一爲utf-8;都用小寫
    2. 

  
  
  
  
  2. class與id的使用: 通常都使用class，特殊除外，因id的優先級比class的高。
    3. 

  
  
  
  
  3. 樣式命名推薦使用英文避免使用漢語拼音, 儘可能使用簡易的單詞組合; 命名方式參照《WEB前端開 發CSS命名參考》，格式統一採起,的方式，經過分割
    4. 

  
  
  
  
  4. css屬性書寫順序, 建議遵循 佈局定位屬性–>自身屬性–>文本屬性–>其餘屬性. 此條可根據 自身習慣書寫, 但儘可能保證同類屬性寫在一塊兒。
    5. 

 
 
 
 


 
 
 
 


  
  
  
  
1) 定位屬性（好比：display, position, float, clear, visibility, table-layout等）html


 
 
 
 


 
 
 
 


  
  
  
  
2) 自身屬性（好比：width, height, margin, padding, border等）前端


 
 
 
 


 
 
 
 


  
  
  
  
3) 文本屬性（好比：font, color, line-height, text-align, text-indent, vertical-align等）html5


 
 
 
 


 
 
 
 


  
  
  
  
4) 其餘屬性（好比：background, opacity, cursor,content, list-style, quotes等）java


 
 
 
 


 
 
 
 
    

  
  
  
  
  1. 避免濫用自選擇器。和選擇儘可能後者。提高性能的同時方便維護。
    2. 

  
  
  
  
  2. 樣式表中中文字體名, 請務必轉碼成unicode碼, 以免編碼錯誤時亂碼;
    3. 

  
  
  
  
  3. 使用table標籤時, 請不要用/ //等屬性直接定義 表現, 應儘量的利用table自身私有屬性分離結構與表現, 如 ,,,,,,,; (及的css控制方法: , , base.css文件中我會初始化表格樣式)
    4. 

  
  
  
  
  4. 儘可能不使用 和相似代碼的寫法。
    5. 

  
  
  
  
  5. 用png圖片作圖片時, 要求圖片格式爲png-24格式。
    6. 

  
  
  
  
  6. 兼容性屬性的使用, 好比（文字陰影）、css3的相關屬性在保證目前主流瀏覽器使 用正常的狀況下可使用來對頁面進行錦上添花式的設計。
    7. 

  
  
  
  
  7. 減小使用影響性能的屬性, 好比 || ，只是減小使用。
    8. 

  
  
  
  
  8. 必須爲大區塊樣式添加註釋, 小區塊適量註釋。
    9. 

  
  
  
  
  9. 代碼縮進與格式:單行書寫, 統一使用tab進行縮進。
    10. 

  
  
  
  
  10. 避免 class 跟 id 重名。
    11. 

 
 
 
 


6、JavaScript書寫規範


 
 
 
 
    

  
  
  
  
  1. 文件編碼統一爲utf-8, 書寫過程過, 每行代碼結束必須有分號; 要檢查網上down下來的代碼造 成的代碼污染(沉冗衝突，代碼注入„)等，有的能夠firefox的一些擴展插件分析;
    2. 

  
  
  
  
  2. 庫引入: 原則上僅引入jQuery庫, 若需引入第三方庫, 須與團隊其餘人員討論決定。
    3. 

  
  
  
  
  3. 命名語義化, 儘量利用英文單詞或其縮寫，函數命名首字母小寫，採用駝峯命名法。
    4. 

  
  
  
  
  4. 代碼結構明瞭, 加適量註釋. 提升函數重用率;
    5. 

  
  
  
  
  5. JS代碼應該與HTML完全分離, 減少reflow, 注重性能。
    6. 

  
  
  
  
  6. 避免全局變量。
    7. 

  
  
  
  
  7. 命名語義化, 儘量利用英文單詞或其縮寫。
    8. 

 
 
 
 


7、圖片規範


 
 
 
 
    

  
  
  
  
  1. 全部頁面元素類圖片均放入imges文件夾。
    2. 

  
  
  
  
  2. 圖片格式僅限於gif || png || jpg。
    3. 

  
  
  
  
  3. 命名所有用 ,, 的組合，其中不得包含,,；盡 量用易懂的詞彙, 便於團隊其餘成員理解; 另, 命名分頭尾兩部分, 用下劃線隔開, 好比 || ;
    4. 

  
  
  
  
  4. 在保證視覺效果的狀況下選擇最小的圖片格式與圖片質量, 以減小加載時間;
    5. 

  
  
  
  
  5. 運用css sprite技術集中小的背景圖或圖標, 減少頁面http請求。
    6. 

 
 
 
 


8、註釋規範


 
 
 
 
    

  
  
  
  
  1. html註釋: 註釋格式 , 只能在註釋的始末位置,不可置入註釋文字區域;
    2. 

  
  
  
  
  2. css註釋: 註釋格式 ;
    3. 

  
  
  
  
  3. JavaScript註釋, 單行註釋使用 ,多行註釋使用;
    4. 

 
 
 
 


9、開發工具及測試工具約定


 
 
 
 
    

  
  
  
  
  1. 編碼必須格式化, 好比縮進;
    2. 

  
  
  
  
  2. 測試工具: 前期開發僅測試Chrome & IE8 , 後期優化時加入IE其餘瀏覽器 & FireFox;
    3. 

  
  
  
  
  3. 統一使用  編輯、查看、使用、校驗接口數據
    4. 

 
 
 
 


10、其餘規範


 
 
 
 
    

  
  
  
  
  1. 開發過程當中嚴格按分工完成頁面, 以提升css複用率, 避免重複開發;
    2. 

  
  
  
  
  2. 減少沉冗代碼, 書寫全部人均可以看的懂的代碼. 簡潔易懂是一種美德。 爲用戶着想, 爲服務 器着想。
    3. 

 
 
 
 


11、CSS Hack


即使是完美的CSS 也未必能在目前衆多的終端瀏覽器中呈現一致的效果，因此，CSS Hack 在不少狀況下都是必要的，建議先以對CSS 標準支持得比較好的瀏覽器（好比「Firefox」或者「Chrome」）爲主編輯CSS ，最後再處理IE 的兼容性——單獨爲IE創建一個CSS 文件（好比 for-ie.css, fuck-ie.css, ie-hack.css等），最後在 HTML 文件中，經過IE的條件註釋按需引用。

jquery
_title__時間日期new_blog_1212.css<div>something</div><p>something</p>input type='text' name='demo'><br><div class="box"><div class="welcome">歡迎訪問XXX, 您的用戶名是<div class="name">用戶名</div></div></div><div class="box"><p>歡迎訪問XXX, 您的用戶名是<span>用戶名</span></p>< /div>href="http://www.baidu.com/"/style="some style"轉義字符<&>``空格».clearfix.clearfix:after{content:"."; display:block;height:0;visibility:hidden;clear:both;} .clearfix{zoom:1}backgroundfontbackground: color image repeat attachment positionfont: style weight size/lineHeight familydiv{width: 100px;｝head-navdrop-menu-#test span{}#test .span{}widthheightcellspacingcellpaddingtabletheadtrthtdtbodytfootcolgroupscopecellspaingcellpaddingtable{border:0;margin:0;border-collapse:collapse;}table th, table td{padding:0;}<meta http-equiv="X-UA-Compatible" content="IE=7" />*htmltext-shadowposition:absolutefloatdemoFunction小寫英文字母數字_漢字空格特殊字符ad_left01.gifbtn_submit.gif<!--這兒是註釋-->-/*這兒是註釋*///這兒是單行註釋/* 這兒有多行註釋 */RAP
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程