當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端开发规范文档

發(fā)布時間：2023/12/20 HTML 46 豆豆

生活随笔收集整理的這篇文章主要介紹了前端开发规范文档小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

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

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) 盡量不要使用expression等不兼容的屬性;
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) 其他輔助工具;

http://www.cnblogs.com/huangjianhuakarl/archive/2012/11/09/1771624.html

轉(zhuǎn)載于:https://www.cnblogs.com/y0umer/archive/2013/05/02/3839077.html

總結(jié)

以上是生活随笔為你收集整理的前端开发规范文档的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

文档

上一篇： python pip工具安装教程
下一篇： HTML DOM content 属性