web前端開發規范

麥子學院何虎老師的開發web前端開發規范課程筆記

web前端開發規范的意義

1、提高團隊的協作能力 
2、提高代碼的復用利用率 
3、可以寫出質量更高，效率更好的代碼 
4、為后期維護提供更好的支持

規范

1、命名規則 
2、文件存放位置規范 
3、css書寫規范 
4、html代碼書寫規范 
5、JavaScript書寫及實用規范 
6、圖片規范 
7、注釋規范 
8、兼容性規范 
9、開發測試約定及實用工具規范

1、html 的命名規則

1、文件名稱命名規則 
統一用小寫英文字母、數字、和下划線組合，不得包含漢字（轉義問題）空格（）和特殊字符（）。 
原則： 
方便理解 
方便查找 
2、索引文件命名原則 
3、各子頁面命名原則 
統一用翻譯的英文名稱 
統一用拼音命名 
注意：不要用英語拼音混用

2、圖片 的命名規則

常規命名： 
放置在頁面頂部的廣告、裝飾圖案等長方形的圖片取名：banner 
標志性的圖片取名為：logo 
在頁面上位置不固定並且帶有連接的小圖片我們取名為button 
在頁面上一個位置連續出現，性質相同的連接欄目的圖片我們取名為：menu 
裝飾用的照片我們取名;pic  
不帶連接表示標題的圖片我們取名：title

3、腳本文件 的命名規則

一般使用腳本功能的英文小寫縮寫命名： 
實際模塊： 
例如： 
廣告條的JavaScript文件名為ad.js 
彈出窗口的JavaScript文件名為pop.js 
共用模塊： 
js文件名;英文命名，后綴js，共用common,js 
外部資源： 
jQuery.min.js 
jquery.date.js 
動態語言文件命名原則：見名知意 
以性質描述，描述可以有多個單詞，用“”隔開，性質一般是該頁面的概要 
register_form.aspx 
register_post.aspx 
topic_lock.aspx

4、文件存放位置規范

文件夾說明： 
flash存放flash文件 
images存放圖片文件‘ 
Inc存放include文件 
library存放DW庫文件 
media存放多媒體文件 
script存放JavaScript腳本 
css存放css文件

5、css的3中基本類型

css 
css指層疊樣式表 
樣式通常存儲在樣式表中 
把樣式添加到html4.0中，是為了解決內容表現分離的問題 
外部樣式表可以極大的提高工作效率 
外部樣式表通常存儲在css文件中 
多個樣式定義可層疊為一

1、重新定義html樣式 
影響全部的被設定標簽樣式 
用於統一網頁中某一標簽的樣式定義 
2、鏈接狀態樣式 
鏈接狀態樣式為設計師對鏈接不同狀態設定特殊樣式，影響被使用樣本區域中的鏈接 
a.nav:link(中間無空格) 、.nav a:link  
第一種只能修飾所有包含有<a>標簽  
第二種可以修飾所有包含有<a>標簽的其他標簽 
3、自定義樣式 
樣式為設計師自定義的新css樣式，影響被使用本樣式的區域，用於完成網頁中局部的樣式設定。 
樣式名：”.” + “相應樣式效果描述的單詞或縮寫”例如：”.shadow” 
文字樣式名 “.no”+”字號”+”行距”+”顏色縮寫” 例如：”.no12 ” “.no12_24 “

6、class與ID的使用規范

區別： 
ID在頁面中有且只能有一個。所以使用ID表示的css樣式只能表示一個元素的樣式 
class在一個頁面中可以有多個，也就是說定義一個css樣式后，可以有多個元素引用這個class 
書寫方式： 
id的書寫樣式：#title{font-size:18px;color:#333;} 
class的書寫方式：.title{font-size:18px;color:#333;} 
命名注意： 
1、大的框架比如說header/footer/wrapper/left/right之類的由設計框架之人統一命名。 
其他樣式名稱由小寫英文&數字&_來命名，避免使用中文拼音，盡量使用簡易的單詞組合； 
總之，命名要語義化，簡明化。

7、css的命名規范

意義： 
規范的命名有助於提升團隊開發效率 
規范的命名有助於后期產品的維護 
規范的命名有助於后期的二次開發 

8、head區域代碼規范

必須加入的標簽： 
搜索時候使用的關鍵字：

   <meta name="keywords"（關鍵字必須這么寫） content="xxxx,xxxx,xxxx,xxxx"（里面填寫搜索關鍵字）>

css

 <link href=".../css/style.css" rel="stylesheet" type="text/css"></link>

網頁顯示字符集： 
簡體中文： 

<meta http-equiv="content" content="text/html;charset=gb2312"/> 

繁體中文： 

<meta http-equiv="content" content="text/html;charset=utf-8"> 

英語： 

<meta http-equiv="content" content="text/html;charset=utf-8"> 

網頁標題： 

<title> 河北工程大學孟佳 </title> 

可選加入的標簽： 
公司的版權注釋 

<!---the site is designed by maiziedu 09/2015 ---> 

網頁制作者信息 

網站簡介

設定網頁的到期時間。網頁一旦過期，必須到服務器上重新調閱 

<meta http-equiv="expires" content="wed,26 Fed 1997 08:21 GMT"> 

禁止瀏覽器從本地機的緩存中調閱頁面內容

<meta http-equiv="pragma" content="no-cache">

用來防止別人在框架里調用你的頁面

<meta http-equiv="window-target" content="_top">

自動跳轉 //例如注冊后跳轉

<meta http-equiv="Refresh" content="5" url=http://www.baidu.com">

網頁搜索機器人向導。用來告訴機器人哪些頁面需要索引，哪些頁面不需要索引 //搜索引擎 
收藏夾圖標 
所有的JavaScript的調用盡量采取外部調用

9、字體規范

在設定字體樣式時對於文字字號樣式和行間距應必須使用css樣式表。 
禁止在頁面中出現<font size=?>標記

字體大小： 
在網頁中應首選使用宋體。英文和數字首選使用verdana和Arial兩種字體。一般使用中文宋體的9pt和11pt或者12px和14.7px這是經過優化的字號，黑體字或者宋體字加粗時，一般選用11pt和14.7的字號比較合適。 
為了最大程度的發揮瀏覽器自動排版的功能，在一段完整的文字中請盡量不要使用
來人工干預分段 
不同語種的文字之間應該有一個半角空格，但避頭的符號之前和避尾的符號除外，漢字之間的標點要用全角標點，英文字母和數字周圍的括號應該使用半角括號。 
請不要在網頁中國連續出現多余一個的也盡量少使用全角空格（英文字符集下，全角空格會變成亂碼），空白應盡量使用text-indent，pandding,margin，hspace,vspace以及透明的GIF圖片來實現。

行距建議用百分比來定義，常用的兩個行距值時line-height：120%/150% 
排版中我們經常會遇到需要進行首行縮進的處理，不要使用或者全角空格來達到效果，規范的做法是在樣式表中定義p{text-indent:2em;}然后給每一段加上一個<p> 
標記，注意，一般情況下，請不要省略</p>結束標記。

10、連接和表格使用規范

鏈接： 
1、網站中鏈接路徑全部采用相對路徑 
2、一般鏈接到某一目錄下的缺省文件的連接路徑不必寫全名 
例如：<a href="aboutus/index.html">而應該這樣：<a href="aboutus/"> 
3、在瀏覽器里，當我們點擊空連接時，他會自動將當前頁面重置到首端，從而影響用戶正常的閱讀內容，我們用代碼 
“JavaScript：void(null)”代替原來的“#”標記 
表格： 
1、盡量避免表格嵌套過多 
后果會對瀏覽器加載延長時間，帶來不友好的用戶體驗 
2、在寫<table>互相嵌套時，嚴格按照的規范，對於單獨的一個<table>來說，<table><tr>對齊，<td>縮進兩個半角空格， 
<td>中如果還有嵌套的表格,<table>也縮進兩個半角空格。如果結束標記應該與<td>處於同一行，不要換行。

11、下載和瀏覽速度控制

意義： 
考慮下載速度，以及頁面瀏覽速度是web前端必須考慮的。頁面的瀏覽速度越快，用戶體驗效果越好。 
文件下載可以通過a標簽的href指向路徑直接實現 
圖片下載則直接在網頁中展示。如何解決？asp.net輸出文件流的形式可以直接下載，后台實現。jsp 
下載實例：

1.  
   <h1>通過連接下載文件</h1>
2.  
   <a href="/day06/download/cors.zip">壓縮包</a>
3.  
   <a href=''day06/download/1.png ''>圖片</a>
4.  
   <h1>通過連接下載文件</h1>
5.  
   <a href="/day06/ServletDownLoad?filename=cors.zip">壓縮包</a>
6.  
   <a href=''day06/ServletDownLoad?filename=1.png ''>圖片</a>

注意規范： 
1、首頁flash網頁大小應限定在200k以下，盡可能的使用矢量圖形和action來減小動畫大小。 
2、非首頁靜態頁面含圖片大小應限定在70k左右，盡可能的使用背景顏色替換大塊同色圖片。 
能夠用背景色替代圖片盡量用背景色，盡量且小圖片進行平鋪

12、嵌套include和iframe

說明： 
頁面嵌套在另一個頁面中 
意義： 
如果多個頁面都需要這個模塊，可以才有嵌套的方式，方便后期的維護也就是維護一個頁面，就可以同時改變多個頁面的效果 
include 
include是ssi（server side include） 
jsp <%@include file=”…/inc/index_top.jsp”%> 
htm <!--#include file="b.htm"> 
iframe 
在html中想達到嵌套的效果，可以使用iframe標簽

<iframe src="111" frameborder=0 border=0 width=300 height=300 src="b.htm"></iframe>

html與XHTML之間的差異在html4.1strictDTD和XHTML1.0strictDTD中，不支持iframe元素

13、嵌套Alt和Title

相同點： 
提示性語言標簽 
不同點： 
alt：一般是對圖片進行提示描述 
title：一般對文字標簽進行描述 
實例：

1.  
   <p title="給鏈接文字提示"> 文字</p>
2.  
   <a href="#" title="給鏈接文字提示">文字</a>
3.  
   <img src="圖片.gif" alt="給圖片提示">

14、瀏覽器緩存使用注意

什么是緩存？ 
緩存就是數據交換的緩沖區（稱作cache），當某一硬件要讀取數據時，首先會從緩存中查到需要的數據，如果找到了就直接執行，找不到的話就從內存中找，由於緩存的運行速度比內存快得多，故緩存的作用就是幫助硬件更快的運行。 
緩存的原理： 

緩存的意義： 
可以提高瀏覽器瀏覽頁面的效率 
緩存可能帶來哪些后果？ 
對於一些設計用戶重要信心的頁面如果被緩存則很危險 
占用大量硬盤資源 
設置網頁不被緩存

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="Cache-Control" content="no-cache,must-revalidate">

<meta http-equiv="expires" content="wed,26 Feb 1997 08:21:57 GMT ">//有效期 

15、瀏覽器兼容性問題

什么是瀏覽器的兼容問題？ 
所謂的瀏覽器兼容性問題，是指因為不同的瀏覽器對同一代碼有不同的解析，造成頁面的顯示效果不統一的情況。 
問題1 
不同瀏覽器的標簽默認的外補丁和內補丁不同 
問題症狀：隨便寫幾個標簽，不加樣式控制的情況下，各自的margin和padding差異較大（自己會有距離要加樣式控制 ）。 
碰到頻率：100% 
解決方案：css里 *{margin:0;padding:0;} 
備注：這個是最常見的也是最容易解決的一個瀏覽器的問題，幾乎所有的css文件開頭都會用通配符*來設置各個外標簽的補丁是0 
問題2： 
瀏覽器兼容性 問題二：塊屬性標簽float后，又有橫行margin情況下，在ie6顯示margin比設置的大 
問題症狀： 
常見症狀是ie6中后面的一塊被頂到下一行 
碰到頻率：90%(稍微復雜點都會碰到，float布局最常見的瀏覽器兼容性問題) 
解決方案： 
在float的標簽樣式控制中加入display：inline;將其轉化成行內屬性 
備注： 
我們最常用的就是div+css布局，而div就是一個典型的塊屬性標簽，橫向布局的時候我們通常都是用div float實現的，橫向的間距設置如果用margin實現，這就是一個必然會碰到的兼容性 問題哦 
問題3： 
瀏覽器兼容性 問題三： 
設置較小高度標簽（一般小於10px），在ie6.ie7，遨游中高度超出自己設置高度 
為題症狀： 
ie6、7和遨游里這個標簽的高度不受控制，超出自己設置的高度。 
碰到頻率：60% 
解決方案： 
給超出高度的標簽設置 overflow：hidden；或者設置行高line-height小於你設置的高度 
備注： 
這種情況一般出現在我們設置小圓角背景的標簽里。出現這個問題的原因是ie8之前的瀏覽器都會給標簽一個最小默認行高的高度。即使你的標簽是空的，這個標簽的高度還是會達到默認的行高。 
問題4： 
瀏覽器兼容性 問題四： 
水平元素居中問題 
1、FF：margin：0 auto //外間距上下為零左右自動 
IE：父級{text-align：center；} 
問題5： 
const問題 
const char 
var;//說明var這個變量現在變成只讀變量， 任何對var修改的語句都被編譯器視為錯誤，不能修改。 
說明：Firefox下可以使用const關鍵字或var關鍵字來定義常量； 
IE下，只能使用var關鍵字來定義常量。 
解決方法： 
統一使用var關鍵字來定義常量 
問題6： 
模態和非模態窗口問題 
說明：ie下可以通過showModalDialog和showModallessDialog打開模態和非模態窗口； 
解決方法： 
直接使用window.open（pageURL，name，parameters）方式打開新窗口。 
如果需要將子窗口中的參數傳遞回父窗口，可以在子窗口中使用window.openner來訪 
例如： 
var parWin = window.opner; 
parWin.document.getElementById(”Aqing’).value=”Aqing”; 
問題7： 
float的延續性 
說明：在ie瀏覽器中，如果使用float設置元素浮動對齊。如果不關閉浮動，將會對后面的元素標簽延續浮動。 
解決方法;在設置float的元素后面加上clear：both，關閉浮動。

16、Banner和Logo

banner 
橫幅廣告(網絡廣告的主要形式, 一般使用GIF格式的圖像文件,可以使用靜態圖形,也可用多幀圖像拼接為動畫圖像) 
推薦網站：http://www.zhaoxi.net/ 
logo 
為了便於INTERNET上信息的傳播，一個統一的國際標准是需要的。實際上已經有了這樣的一整套標准。 
其中關於網站的LOGO，目前有三種規格： 
88*31 這是互聯網上最普遍的LOGO規格。 
120*60 這種規格用於一般大小的LOGO。  
120*90 這種規格用於大型LOGO。

17、JavaScript規范

書寫： 
書寫過程中,每行代碼結束必須有分號; 原則上所有功能均根據XXX項目需求原生開發, 以避免網上down下來的代碼造成的代碼污染(沉冗代碼 || 與現有代碼沖突 ||…); 
變量命名格式 
變量命名: 駝峰式命名. 原生JavaScript變量要求是純英文字母, 首字母須小寫, 如iTaoLun; jQuery變量要求首字符為’_’, 其他與原生JavaScript規則相同, 如: _iTaoLun; 另,要求變量集中聲明,避免全局變量. 
函數命名: 
首字母小寫駝峰式命名. 如iTaoLun(); 
JavaScript文件 
JavaScript程序應獨立保存在后綴名為.js的文件中。應盡量減少在HTML 中的JavaScript代碼，因為存在與HTML中的JavaScript代碼會明顯增加文件大小，且不能對其進行緩存和壓縮。 
filename.js或JavaScript的代碼應盡量放到body的后面。 這樣可以減少因為載入腳本而造成其他頁面內容載入也被延遲的問題。 
縮進 
縮進的單位為四個空格。避免使用Tab鍵來縮進。 因為始終沒有個統一的Tab長短標准。雖然使用空格會增加文件的大小， 但在局域網中幾乎可以忽略，且在最小化過程中也可被消除掉。 
函數聲明 
所有的函數在使用前進行聲明。內函數的聲明跟在var語句的后面. 這樣可以幫助判斷哪些變量是在函數范圍內的。 
變量聲明 
所有的變量必須在使用前通過var進行聲明。JavaScript並不強制必須這么做， 但這么做可以讓程序易於閱讀，且也容易發現那些沒聲明的變量(它們會被編譯成全局變量)。 將var語句放在函數的首部。最好把每個變量的聲明語句單獨放到一行，並加上注釋說明。 
var　currentEntry;//當前選擇項 var　level;//縮進程度　 var size; // 表格大小 
盡量減少全局變量的使用。不要讓局部變量覆蓋全局變量。 
{} 和[] 
使用{}代替new　Object()。使用[]代替new　Array()。這樣便於書寫且能提高一點執行效率。 
當成員名是一組有 序的數字時使用數組來保存數據。當成員名是無規律的字符串或其他時使用對象來保存數據。

1. event.srcElement問題 //找到觸發事件的源對象 
問題說明：I.E.下，even對象有srcElement屬性，但是沒有target屬性； Firefox下，even對象有target屬性，但是沒有srcElement屬性。 
解決方法：使用 var obj=event.target||window.event.srcElement; 
2.parentElement問題 
firefox與I.E.的父元素(parentElement)的區別 
IE：obj.parentElement 
firefox：obj.parentNode 
解決方法: 因為firefox與I.E.都支持DOM,因此使用obj.parentNode是不錯選擇.

18、圖片的使用規范

存放位置 
所有頁面元素類圖片均放入images文件夾, 測試用圖片放於img/demoimg文件夾 
格式 
圖片格式僅限於gif || png || jpg; 
命名 
命名全部用小寫英文字母 || 數字 || _ 的組合，其中不得包含漢字 || 空格 || 特殊字符；盡量用易懂的詞匯, 便於團隊其他成員理解; 另, 命名分頭尾兩部分, 用下划線隔開, 比如ad_left01.gif || btn_submit.gif; 
性能 
運用css sprite技術集中小的背景圖或圖標, 減小頁面http請求,但注意,請務必在對應的spritepsd源圖中划參考線, 並保存至img/images目錄下.

CSSSprites 
在國內很多人叫css精靈，是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。對於當前網絡流行的速度而言，不高於200KB的單張圖片的所需載入時間基本是差不多的，所以無需顧忌這個問題。 
我們經常看到一個頁面上有很多小圖標，可是當我們用工具去打開時卻發現 
 
這些小圖標其實在一張圖片上，這是怎么實現的呢？ 
這當中用到了CSS Sprites切圖技術。 
CSS Sprites其實就是把網頁中一些圖標整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置。 
優點：減少網頁http請求，提高頁面性能，降低服務器負載；文件命名減少麻煩。 
缺點：定位繁瑣，布局固定，降低網頁彈性。 
 
Css Sprite使用方法： 
1、將用到的背景圖片壓縮為zip格式的壓縮包 
2、用Css圖片拼合生成器將其拼合成一張圖片，然后下載該圖片 
3、拼合完成后會生成相應的Css規則，該文件定位了每個圖片的位置及圖片的寬度和高度 
4、在Css樣式中定位背景圖片，例如： 
例子：

1.  
   ul.share li{float:left;}
2.  
   ul.share li a{display:block;width:25px;height:25px;text-indent:-9999px;}
3.  
   a.renren{background:url(../images/share.gif) 0 0 no-repeat;}
4.  
   a.kaixin{background:url(../images/share.gif) -25px 0 no-repeat;}
5.  
   a.sina{background:url(../images/share.gif) -50px 0 no-repeat;}
6.  
   a.douban{background:url(../images/share.gif) -75px 0 no-repeat;}
7.  
   a.googleBM{background:url(../images/share.gif) -100px 0 no-repeat;}
8.  
   <ul class="share">
9.  
   <li>分享到：</li>
10.  
    <li><a class="renren" href="/cuiying_2007/blog/ " title="">人人網</a></li>
11.  
    <li><a class="kaixin" href="/cuiying_2007/blog/ " title="">開心網</a></li>
12.  
    <li><a class="sina" href="/cuiying_2007/blog/ " title="">新浪微博</a></li>
13.  
    <li><a class="douban" href="/cuiying_2007/blog/ " title="">豆瓣</a></li>
14.  
    <li><a class="googleBM" href="/cuiying_2007/blog/ " title="">谷歌書簽</a></li>
15.  
    </ul>

19、注釋規范

html注釋: 
注釋格式 , ‘–’只能在注釋的始末位置,不可置入注釋文字區域; 
Css注釋: 
注釋格式 /這兒是注釋/; 
javascript注釋: 
單行：單行注釋使用//這兒是單行注釋 , 
多行：多行注釋使用 /* 這兒有多行注釋 */;

20、瀏覽器兼容性 CSS hack

css hack 
CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器。當然，我們也可以反過來利用CSS hack為不同版本**的瀏覽器定制編寫不同的CSS效果。 
實例：** 
div{ 
background:green;/* forfirefox */ 
background:red;/*for IE6/(bothIE6&&IE7) 
} 
效果：我在IE6中看到是紅色的，在firefox中看到是綠色的。 
上面的css在firefox中，它是認識不了后面的那個帶星號的東西是什么的， 於是將它過濾掉，不予理睬，解析得到的結果是:div{background:green}, 於是理所當然這個div的背景是綠色的。 在IE6中呢，它兩個background都能識別出來， 它解析得到的結果是:div{background:green;*background:red;} ,於是根據優先級別，處在后面的red的優先級高，於是當然這個div的背景顏色就是紅色的了。

區別不同瀏覽器，CSS hack寫法: 
區別IE6與FF：background:orange;*background:blue;  
區別IE6與IE7：background:green!important;background:blue;  
區別IE7與FF：background:orange;*background:green;  
區別FF，IE7，IE6：background:orange;*background:green;_background:blue; background:orange;*background:green!important;*background:blue;  
 
 

21 、開發中的其他開發規范總結

開發環境 
軟件版本的選擇：1.應選擇熱門的開發軟件2.選擇成熟的開發工具和技術 
開發文檔的約束 
其他： 
1.開發過程中嚴格分工完成頁面，以提高css重用率，避免重復開發 
2.減小沉冗代碼,書寫所有人都可以看的懂的代碼. 簡潔易懂是一種美德.為用戶着想,為服務器着想. 
如何才能成為前端開發高手？ 
1.要多練，不斷總結 
2.看到別人寫的好的代碼要多研究研究 
3.要勤收集素材