web前端開發規範

時間 2019-12-01

標籤 web 前端開發規範欄目 HTML 简体版

原文原文鏈接

web前端開發規範

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

web前端開發規範的意義

一、提升團隊的協做能力
二、提升代碼的複用利用率
三、能夠寫出質量更高，效率更好的代碼
四、爲後期維護提供更好的支持css

規範

一、命名規則
二、文件存放位置規範
三、css書寫規範
四、html代碼書寫規範
五、JavaScript書寫及實用規範
六、圖片規範
七、註釋規範
八、兼容性規範
九、開發測試約定及實用工具規範html

一、html 的命名規則

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

二、圖片的命名規則

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

三、腳本文件的命名規則

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

四、文件存放位置規範

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

五、css的3中基本類型

css
css指層疊樣式表
樣式一般存儲在樣式表中
把樣式添加到html4.0中，是爲了解決內容表現分離的問題
外部樣式表能夠極大的提升工做效率
外部樣式表一般存儲在css文件中
多個樣式定義可層疊爲一數組

一、從新定義html樣式
影響所有的被設定標籤樣式
用於統一網頁中某一標籤的樣式定義
二、連接狀態樣式
連接狀態樣式爲設計師對連接不一樣狀態設定特殊樣式，影響被使用樣本區域中的連接
a.nav:link(中間無空格) 、.nav a:link
第一種只能修飾全部包含有<a>標籤
第二種能夠修飾全部包含有<a>標籤的其餘標籤
三、自定義樣式
樣式爲設計師自定義的新css樣式，影響被使用本樣式的區域，用於完成網頁中局部的樣式設定。
樣式名：」.」 + 「相應樣式效果描述的單詞或縮寫」例如：」.shadow」
文字樣式名「.no」+」字號」+」行距」+」顏色縮寫」例如：」.no12 」「.no12_24 「瀏覽器

六、class與ID的使用規範

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

七、css的命名規範

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

八、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>
可選加入的標籤：
公司的版權註釋

網頁製做者信息

網站簡介

設定網頁的到期時間。網頁一旦過時，必須到服務器上從新調閱
<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的調用盡可能採起外部調用

九、字體規範

在設定字體樣式時對於文字字號樣式和行間距應必須使用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>結束標記。

十、鏈接和表格使用規範

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

十一、下載和瀏覽速度控制

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

<h1>經過鏈接下載文件</h1>
<a href="/day06/download/cors.zip">壓縮包</a>
<a href=''day06/download/1.png ''>圖片</a>
<h1>經過鏈接下載文件</h1>
<a href="/day06/ServletDownLoad?filename=cors.zip">壓縮包</a>
<a href=''day06/ServletDownLoad?filename=1.png ''>圖片</a>

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

十二、嵌套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元素

1三、嵌套Alt和Title

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

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

1四、瀏覽器緩存使用注意

什麼是緩存？
緩存就是數據交換的緩衝區（稱做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 ">//有效期

1五、瀏覽器兼容性問題

什麼是瀏覽器的兼容問題？
所謂的瀏覽器兼容性問題，是指由於不一樣的瀏覽器對同一代碼有不一樣的解析，形成頁面的顯示效果不統一的狀況。
問題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，遨遊中高度超出本身設置高度
爲題症狀：
ie六、7和遨遊裏這個標籤的高度不受控制，超出本身設置的高度。
碰到頻率：60%
解決方案：
給超出高度的標籤設置 overflow：hidden；或者設置行高line-height小於你設置的高度
備註：
這種狀況通常出如今咱們設置小圓角背景的標籤裏。出現這個問題的緣由是ie8以前的瀏覽器都會給標籤一個最小默認行高的高度。即便你的標籤是空的，這個標籤的高度仍是會達到默認的行高。
問題4：
瀏覽器兼容性問題四：
水平元素居中問題
一、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，關閉浮動。

1六、Banner和Logo

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

1七、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是不錯選擇.

1八、圖片的使用規範

存放位置
全部頁面元素類圖片均放入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使用方法：
一、將用到的背景圖片壓縮爲zip格式的壓縮包
二、用Css圖片拼合生成器將其拼合成一張圖片，而後下載該圖片
三、拼合完成後會生成相應的Css規則，該文件定位了每一個圖片的位置及圖片的寬度和高度
四、在Css樣式中定位背景圖片，例如：
例子：

ul.share li{float:left;}
ul.share li a{display:block;width:25px;height:25px;text-indent:-9999px;}
a.renren{background:url(../images/share.gif) 0 0 no-repeat;}
a.kaixin{background:url(../images/share.gif) -25px 0 no-repeat;}
a.sina{background:url(../images/share.gif) -50px 0 no-repeat;}
a.douban{background:url(../images/share.gif) -75px 0 no-repeat;}
a.googleBM{background:url(../images/share.gif) -100px 0 no-repeat;}
<ul class="share">
<li>分享到：</li>
<li><a class="renren" href="/cuiying_2007/blog/ " title="">人人網</a></li>
<li><a class="kaixin" href="/cuiying_2007/blog/ " title="">開心網</a></li>
<li><a class="sina" href="/cuiying_2007/blog/ " title="">新浪微博</a></li>
<li><a class="douban" href="/cuiying_2007/blog/ " title="">豆瓣</a></li>
<li><a class="googleBM" href="/cuiying_2007/blog/ " title="">谷歌書籤</a></li>
</ul>

1九、註釋規範

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.要勤收集素材