web前端開發規範

本文原創，這裏首先聲明，轉載註明本文出處，翻版必究！

web前端開發規範的現實意義

一、提升團隊的協做能力

二、提升代碼的重複利用率

三、能夠寫出質量更高，效率更好的代碼

四、爲後期維護提供更好的支持

五、可讀性高

1、命名規則

一、html命名規則：

　　a、文件名稱命名規則：統一使用小寫英文字母、數字、下劃線的組合，不得包含漢字空格和特殊字符

二、命名原則：方便理解、方便查找

　　b、索引文件命名原則：index.html、index.htm、index.asp、index.aspx、index.jsp、index.php

　　c、各子頁命名的原則：統一用翻譯的英文命名、統一用拼音命名，注意：不要英語拼音混用eg:關於咱們:aboutus.html  新聞列表:newslist.html 產品詳細：prodetail.html

三、圖片命名規則：

　　a、圖片名稱分爲頭尾兩部分，用下劃線隔開，頭部分表示此圖片的大類性質，例如：廣告、標誌、菜單、按鈕等banner_1.jpg、banner_2.jpg、menu_bg.jpg、　　logo.png

　　b、常規命名規則：

　　　　標誌性的圖片取名：logo

　　　　裝飾性圖片：pic

　　　　不帶連接表示標題的圖片：title

　　　　放置在頁面頂部的廣告、裝飾圖案等長方形的圖片取名：banner

　　　　在頁面上位置不固定而且帶有連接的小圖片咱們取名爲button

　　　　在頁面上某一個位置連續出現，性質相同的連接欄目的圖片爲menu

四、腳本文件和動態文件命名規則：

　　a、通常使用腳本功能的英文小寫縮寫命名：

　　　　實際模塊：eg：廣告條的javascript文件名爲ad.js 彈出窗口的javascript文件名爲:pop.js

　　　　共用模塊：eg：js文件命名：英文命名，後綴.js  共用common.js

　　　　外部資源：eg：jquery.min.js、jquery.date.js

　　b、動態語言文件命名規則：以性質_描述，描述能夠有多個單詞，用"_"隔開，性質通常是該頁面的概要

　　　　如：register_form.php、register_post.php、register_lock.php　　

2、文件存放位置規範

　　文件夾說明：flash存放flash文件、images存放圖片文件、css存放css文件、script存放腳本文件、js存放自定義腳本文件、media存放媒體文件

　　網站頁面位置存放：客戶端：web（或者網站根目錄）、服務器端：admin

3、CSS書寫規範

一、CSS基礎類型

　　CSS：CSS指層疊樣式表。

　　　　樣式定義如何顯示HTML元素　　　　　　

　　　　樣式一般存儲在樣式表中

　　　　把樣式添加到HTML4.0中，是爲了解決內容與表現分離的問題

　　　　外部樣式表能夠極大的提升工做效率

　　　　外部樣式表一般存儲在CSS文件中

　　　　多個樣式定義可層疊爲一

　　商業開發：

　　　　從新定義樣式：爲設計師從新定義已有的HTML標籤樣式，影響所有的被設定標籤樣式，用於統一網頁中某一標籤的樣式定義。如：hr{border:1px dotted #333;}

　　　　連接狀態樣式：連接狀態樣式爲設計師對連接不一樣狀態設定特殊樣式，影響被使用本樣式區域中的連接。a.nav:link(中間無空格)只能修飾類名爲nav的<a>標籤。.nav a:link能夠修飾類爲nav 下的全部的<a>標籤。

　　　　自定義樣式：樣式爲設計師自定義的新CSS樣式，影響被使用本樣式的區域，用於完成網頁中局部的樣式設定。如：.border{border:1px solid #333;} .red{color:red;}

二、Class與ID的使用規範：

　　區別：ID在頁面中只有一個，因此使用ID表示的CSS樣式只能表示一個元素的樣式

　　　　   class在一個頁面中能夠有多個，也就是說定義一個CSS樣式後，能夠有多個元素引用這個class

　　書寫方式：ID書寫樣式：#title{font-size:18px;}

　　　　　　　class書寫樣式：.title{font-size:18px;}

　　命名注意：大的框架命名：如：header/footer/wrapper/left/right之類的由設計框架之人統一命名。其餘樣式由小寫英文&數字&_來組合命名，避免使用中文拼音，儘可能使用簡易的單詞組合；總之命名要有語義化，簡明化。

　　　　　　　避免命名重複：注意1：經過從屬寫法規避<div  id="mainnav"><div class="firstnav"></div></div>;樣式寫法：#mainnav .firstnav{...};

　　　　　　　　　　　　　　注意2：規避class與id重名，不建議使用Id選擇器

　　　　　　　　　　　　　　注意3：重複使用率高的命名，可加代號加下劃線起始，如：title_news

　　　　　　　　　　　　　　注意4：取父級元素id/class命名部分命名，如：<div id="mainnav"><div class="main_frist"></div></div>

三、CSS命名規範：

意義：有助於提高團隊開發效率、有助於後期產品的維護、有助於後期二次開發。

頁面結構
容器：container/wrap	總體寬度：wrapper
頁頭：header	內容：content
頁面主體：main	頁尾：footer
側欄：sliderbar	欄目：column
中間內容：center
導航
導航：nav	主導航：mainnav/gobalnav
子導航：subnav	頂導航：topnav
邊導航：sidebar	左導航：leftbar
右導航：rightbar	邊導航圖標：sidebarIcon
標題：title
功能
標誌：logo	登錄：login
登錄條：loginbar	註冊：register
產品：products	產品價格：products_prices
產品評價：products_review	編輯評價：editor_review
最新評價：news_release	廣告/標語：banner
摘要：summary	生產商：publisher
縮略圖：screenshot	常見問題：fags
關鍵詞：keyword	博客：blog
論壇：forum	搜索：search
搜索輸入框：search_input	搜索輸出：search_output
搜索結果：search_results	加入咱們:joinus
狀態：status	按鈕：btn
滾動：scroll	版權全部：copy_right
電話：tel	在線訂購：on_line_order
行內動態：trends	新聞動態：news_trends
行內新聞：trade_news	下載中心：download
熱點：hot	圖標：icon
在線調查：online_inquiry	註釋：note
購物車：shop/cart	投票：vote
友情連接：friendlink	版權：copyright

4、HTML代碼規範

一、head區域代碼規範

 　　必須加入的標籤：

　　　　keywords：<meta name="keywords" content="xxxxxxx">

　　　　字符集：<meta charset="UTF-8">

　　　　網站標題：<title>Title</title>

　　　　css：<link rel="stylesheet" href="../css/reset.css">

　　可選加入的標籤：

　　　　公司版權註釋：<!--The site  is  designed by xiaojunjun  06/2017-->

　　　　網頁製做者信息：<meta name="author" content="22@qq.com">

　　　　網站簡介：<meta  name="description"  content="該網站是xxxxxx">

　　　　設定網頁的到期時間，一旦網頁過時，必須到服務器上從新訂閱。以下：

　　　　<meta http-equiv="expires" content="wed 26 Feb 2019 08:21:52 GMT">

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

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

　　　　用來防止別人在框架裏調用你的頁面以下：

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

　　　　網頁搜索機器人嚮導，用來告訴搜索機器人哪些頁面須要索引，哪些頁面不須要索引以下：

　　　　<meta name="robots" content="none">

　　　　自動跳轉：<meta http-equiv="Refresh" content="5;url=http://baidu.com">

　　　　收藏夾圖標：<link rel="Shortcut Icon"  href="favicon.ico">

　　　　全部的javascript的調用盡可能採用外部調用。

二、字體規範

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

　　字體大小：在網頁中中文應首選宋體，英文和數字首選使用verdana和arial兩種字體，通常使用中文宋體的9pt或12px和14.7px這是通過優化的字號，黑體字或者宋體字加粗時，通常選用11pt和14.7px的字號比較合適

　　爲了最大程度的發揮瀏覽器自動排版的功能，在一段完整的文字中請儘可能不要使用<br>來人工干預分段

　　不一樣語種的文字之間應該有一個半角空格，但避頭的符號以前和避尾的符號以後除外，漢字之間的標點要用全角標點，英文字母和數字周圍的括號應該使用半角括號。

　　請不要在網頁中連續出現多於一個的也儘可能少用全角空格（英文字符集下，全角空格會變成亂碼），空白應該儘可能使用text-indent、padding、margin、hspace、vspace以及透明的gif圖片來實現。

　　行距建議用百分比來定義，經常使用的兩個行距的值是line-height:120%/150%;

　　排版中咱們常常會遇到須要進行首行縮進的處理，不要使用或者全角空格來達到效果，規範的作法是在樣式表中定義p{text-indent:2em;}

三、連接和表格使用規範

　　連接：

　　　網站中的連接路徑所有采用相對路徑

　　　通常連接到某一目錄下的缺省文件的連接路徑沒必要寫全名：如<a href="aboutus/index.html">應該寫成<a href="aboutus/">

　　　在瀏覽器裏，當咱們點擊空連接時，它會自動將當前頁面重置到首端，從而影響用戶正常的閱讀內容。所以咱們使用<a href="javascript:void(0);">代替原來的"#"標記

　　表格：

　　儘可能避免表格嵌套過多：若是過多會對瀏覽器加載延長時間，帶來不友好的用戶體驗。

　　在寫<tabel>互相嵌套時，嚴格按照的規範，對於單獨的一個<table>來講，<table><tr>對齊，<td>縮進兩個半角空格,<td>中若是還有嵌套的表格，<table>也縮進兩個半角空格，結束標記應該與<td>處於同一行，不要換行。

應使用：<td><img src="../images/logo.png"></td>

四、下載和瀏覽器速度控制

　　文件下載能夠經過a標籤href指向路徑直接實現（<a href="message.pdf" ></a><a href="message.zip" ></a>）

　　圖片下載則直接在網頁中展現（<a href="day/logo.png"></a>）如何解決。（經過對圖片壓縮）或經過ASP.NET輸出文件流的形式能夠直接下載，後臺實現；或者PHP/JAVA

　　注意：首頁flash網頁大小應限定在200k如下，儘量的使用矢量圖形和Action來減小動畫大小

　　　　　非首頁靜態頁面含圖片大小應限定在70K左右，儘量的使用背景顏色替換大塊同塊色圖片。（一、可以用背景色替換的儘可能使用背景色。二、儘可能切小圖片進行平鋪）

五、include/iframe嵌套

　　頁面嵌套在另外一個頁面中。若是多個頁面都須要這個模塊，能夠纔有嵌套的方式，方便後期的維護也就是維護一個頁面，就能夠同時改變多個頁面的效果

　　include對於jsp  <%@include file="../inc/index_top.jsp"%>

　　　　　對於asp/asp.net  <!--#include file="inc/index_top.asp"-->

　　　　　對於htm <!--#include file="b.htm"-->

　　iframe：在html中想達到嵌套的效果，可使用iframe標籤

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

　　　　　　HTML與XHTML之間的差別在HTML4.1StrictDTD和XHTML1.0StrictDTD中，不支持iframe元素

　　　　　　<iframe src="i/eg_landscape.jpg"></iframe><p>一些老的瀏覽器不支持iframe</p><p>若是得不到支持，iframe是不可見的</p>

六、title與alt

　　相同點：都是顯示性語言標籤

　　不一樣點：alt通常是對圖片進行展現描述（當圖片不顯示時，顯示該提示文字）

　　　　　　title通常是對文字標籤進行提示（當鼠標懸停在圖片或文字上時，顯示該提示文字）

　　　　如：<a href="index.html"  title="跳轉到首頁">首頁</a>

　　　　　　<img src="../images/logo.png"  alt="logo圖" title="logo圖">

七、緩存的注意事項

緩存是數據交換的緩衝區（稱做Cache），當某一硬件要讀取數據時，會首先從緩存中查找須要的數據，若是找到了則直接執行，找不到的話則從內存中找，因爲緩存的運行速度比內存快的多，因此緩存的做用就是幫助硬件更快的運行。

緩存能夠提升瀏覽器瀏覽頁面的效率

緩存的原理：瀏覽器第一次請求頁面時-》沒有緩存-》向web服務器請求-》請求響應，緩存協商-》呈現

　　　　　　當瀏覽器第二次請求頁面時-》此時有緩存-》是否過時-》若是過時（判斷Etag?是，則向web服務器請求帶if-None-Match）（否、進行last-Modified判斷？是則向web服務器請求帶if-Modified-Since，否的話，就向web服務器請求，請求響應，緩存協商-》呈現）服務器決策200or304若是200直接進行響應，緩存協商-》呈現、304的話從緩存中讀取-》呈現，若是不過時直接從緩存中讀取數據而後呈現。

緩存可能帶來的哪些後果？對於一些涉及用戶重要信息的頁面，若是頁面被緩存則很危險。佔用大量的硬盤資源

設置頁面不被緩存：<meta http-equiv="pragma" content="no-cache"><meta http-equiv="Cache-Control"  content="no-cache, must-revalidate"><meta http-equiv="expires"  content="0">

 

<!--或者js中加入相似下面的代碼，讓每次的連接都不同-->

 八、banner和logo注意規範

banner：橫幅廣告（網絡廣告的主要形式，通常使用GIF格式的圖像文件，可使用靜態圖形，也可使用多幀圖像拼接爲動畫圖像）

　　　　尺寸：100*100、120*60、120*240、120*600、160*160、180*80、960*120（經常使用）等

　　　　推薦網站：http://www.zhaoxi.net/

logo：爲了便於internet上信息的傳播，一個統一的國際標準是須要的。實際上已經有了這樣的一整套標準

 其中關於網站的LOGO，目前有三種規格：88*31這是互聯網上最廣泛的LOGO規格，120*60這種規格用於通常大小的LOGO，120*90這種用於大型的LOGO

5、javaScript書寫及使用規範

一、書寫

　　書寫過程當中，每行代碼結束必須有分號；

　　原則上全部功能均根據XXX項目需求原生開發

　　以免網上down下來的代碼形成代碼污染（沉冗代碼與現有代碼的衝突...）

二、變量命名格式

　　變量命名：駝峯式命名。

　　原生JavaScript變量要求是純英文字母，首字母必須小寫，如：iTaoLun

　　jQuery變量要求首字符爲「_ 」其餘與原生JavaScript規則相同，如： _iTaoLun

　　要求變量集中聲明，避免全局變量。

三、函數命名

　　首字母小寫、駝峯式命名。如：checkUsername()

四、其餘

　　代碼結構明瞭，加適量註釋，提升函數重用率；

　　注重與html分離，減少reflow，注重性能；

五、JavaScript文件

　　javaScript程序應獨立保存在後綴名爲：.js的文件夾中。應儘可能減小在HTML中，由於存在於HTML中的Javascript代碼會明顯增長文件大小，且不能對其進行filename.js

　　JavaScript的代碼應儘可能放到body後面。這樣能夠減小由於載入腳本而形成其餘頁面內容載入也被延遲的問題。　

六、縮進

　　縮進單位爲四個空格，避免使用Tab鍵來縮進，由於始終沒有統一的Tab長短標準。雖然使用空格會增長文件的大小，但在局域網中幾乎能夠忽略，且在最小化過程當中也可被消除掉。

七、每行長度

　　避免每行長度超過80個字符。當一條語句一行寫不下時，請考慮折行。

　　在運算符號，最好是逗號後換行。在運算符後換行能夠減小由於複製粘貼產生的錯誤被分號掩蓋的概率。　　

八、變量聲明

　　全部的變量必須在使用前經過var進行聲明。JavaScript並不強制必須這麼作，但這麼作可讓程序易於閱讀，且也容易發現那些沒聲明的變量（它們會被編譯成全局變量）。將var語句放在函數的首部。最好把每一個變量的聲明語句單獨放一行，並加上註釋說明。　儘可能減小全局變量的使用。不要讓局部變量覆蓋全局變量

　　var  currentPage；//當前頁碼

　　var  pageSize；//每頁顯示條數

九、函數聲明

　　全部函數在使用前進行聲明。內函數的聲明跟在var語句的後面，這樣能夠幫助判斷哪些變量是在函數範圍內的。

十、{}和[]

　　使用{}代替 new Object（），使用[]代替  new Array()。這樣便於書寫且能提升一點執行效率。當成員是一組有序的數字時，使用數組來保存數據。當成員是無規律的字符串或者其餘時使用對象來保存數據。

十一、event.srcElement問題

　　說明：IE下，event對象有srcElement屬性，但沒有target屬性；Firefox下，event對象有target屬性，可是沒有srcElement屬性。

　　解決方法：使用var  obj  = event.target || window.event.srcElement

十二、parentElement問題

　　說明：firefox與IE父元素（parentElement）的區別

　　IE：obj.parentElement

　　firefox：obj.parentNode

　　解決方法：由於firefox和IE都支持DOM，所以使用obj.parentNode是不錯的選擇　

6、圖片規範

一、存放位置

　　全部頁面元素類圖片均放入images文件夾，測試用圖片放於image/demoimg文件夾

二、格式

　　圖片格式僅限於gif、jpg、png

三、命名規則

　　命名所有用小寫英文字母或數字或下劃線的組合，其中不得包含漢字、空格、特殊字符：儘可能用易懂的詞彙，便於團隊其餘成員理解；另命名分頭尾兩部分，用下劃線隔開，好比：ad_left01.gif、btn_submit.gif；

四、性能

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

　　運用Css Sprite技術集中小的背景圖或圖標，減小頁面http請求，但注意，請務必在對應的spritepsd源圖中劃參考線，並保存至img目錄下。

　　Css Sprite（CSS精靈圖）使用方法：

　　　　a、將用到的背景圖片壓縮爲zip格式的壓縮包。

　　　　b、用CSS圖片拼合生成器將其拼合成一張圖片，而後下載該圖片。

　　　　c、拼合完成後會生成相應的CSS規則，該文件定位了每一個圖片的位置及圖片的寬度和高度

　　　　d、在CSS樣式中定位背景圖片eg：a{background:url('../images/share.gif') 0 0 no-repeat;}

7、註釋規範

一、html註釋

　　註釋格式：<!--這是註釋-->

二、css註釋

　　註釋格式：/*這是註釋*/；

三、JavaScript註釋

　　單行：單行註釋使用//這是單行註釋；

　　多行註釋使用/*這是多行註釋*/

8、兼容性規範

什麼是瀏覽器兼容問題？

是指由於不一樣的瀏覽器對同一段代碼有不一樣的解析，形成頁面顯示效果不統一的狀況。

問題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六、IE7和遨遊裏的這個標籤高度不受控制

　　碰到概率：60%

　　解決方案：給超出高度的標籤設置overflow:hidden；或者設置行高line-height小於你設置的高度或font-size：1px；。

　　備註：這種狀況通常出如今咱們設置小圓角背景的標籤裏。出現這個問題的緣由是IE8以前的瀏覽器都會給標籤一個最小的默認的行高的高度。即便你的標籤是空的，這個標籤的高度仍是會達到默認的行高。

問題4：元素水平居中問題：

　　火狐中使用（針對塊狀元素）margin:0 auto，IE中父級元素設置（只對文本進行水平居中）：text-align:center

問題5：const問題：

　　　const  char  var說明var這個變量如今變成「只讀變量」，任何對var修改的語句都被編譯器視爲錯誤。

　　　說明：火狐瀏覽器下，可使用const關鍵字或var關鍵字來定義常量；IE下，只能使用var關鍵字來定義常量；

　　　解決辦法：統一使用var關鍵字來定義常量

問題6：模態和非模態窗口的問題

　　症狀：IE下，能夠經過window.showModalDialog和window.showModelessDialog打開模態和非模態窗口；

　　解決辦法：直接使用window.open(pageurl,name,parameters)（但儘可能少用，安全級別低）方式打開新窗口。若是須要將子窗口中的參數傳遞迴父窗口，能夠在子窗口中使用window.opener來訪問。如：var parWin = window.opener;parWin.document.getElementById("aing").value = "aing"

問題7：float延續性

　　在IE瀏覽器中，若是使用float設置元素浮動對齊，若是不關閉浮動，將會對後面的元素標籤延續浮動。

　　解決辦法：在設置float元素後面加上clear:both，清除浮動。

9、瀏覽器兼容性CSS hack

一、css hack

hack的目的就是使你的css代碼兼容不一樣的瀏覽器，固然咱們也能夠反過來利用hack爲不一樣版本的瀏覽器定製編寫不一樣的css效果。

例如：div{background:green;/*火狐*/ *background:red;/*IE6&&IE7*/}咱們在IE6中看到的是紅色，在火狐中看到的是綠色。

二、上面的css在火狐中，它是認識不了後面的那個帶星號的東西是什麼的，因而將它過濾掉，不予理睬，解析獲得的結果是：div{background:green;}

在IE6中呢，它兩個background都能識別出來。它解析獲得的結果是：div{background:green;*background:red;}因而根據優先級別，處在後面的red的優先級高，因而div的背景色就是紅色的了

三、區別不一樣瀏覽器，CSS hack寫法：

　　區別IE6與FF：background:orange；*background:blue;

　　區別IE6與IE7：background:green!important;background:blue;（IE6是blue、IE7下是green）

　　區別IE7與FF：background:orange;*background:green;（IE7下顯示green、FF下顯示orange）

　　區別FF,IE7,IE6：background:orange;*background:green;_background:blue;*background:green!important;（IE6顯示green;IE7顯示green；FF下顯示orange）

注：IE都能識別*、標準瀏覽器（如FF）不能識別*；

IE6能識別*、不能識別!important

IE7能識別*、也能識別!important

FF不能識別*、但能識別!important

瀏覽器優先級別：FF<IE7<IE6，CSS hack書寫順序通常是：FF  IE7  IE6

四、IE9下的css hack

div{

　　background:red\0;/*IE8和IE9都支持*/

　　background:blue\9\0;/*IE9*/

　　*background:green;/*IE7*/

　　 _background:gray;/*IE6*/

}

注意：書寫CSShack的順序，其中：

　　a、background-color:red\0；IE8和IF9都支持；

　　b、background-color:blue\9\0；僅IE9支持；

區別FF（IE8）與IE6與IE7

　　background:orange;FF和IE8背景色將爲橘黃色

　　*background-color:red;IE6和IE7背景色將爲紅色

區別FF（IE8）與IE6與IE7

　　background:orange;FF和IE8背景色將爲橘黃色

　　*background:red!important;IE7背景色將爲紅色

　　*background:blue;IE6背景色將爲藍色

總結：CSS Hack書寫順序：先寫FF等非IE瀏覽器樣式，其次寫IE8/9所需樣式，接着是IE7的，最後寫IE6的

　　　實際開發項目中，我感受比較少用!important，只要記住*和_就足夠區別FF（IE8）與IE7與IE6的了。

10、開發測試約定及使用工具規範

1、開發環境：

軟件版本的選擇：一、應選擇熱門的開發軟件二、選擇成熟的開發工具和技術

開發文檔的約束

2、其餘

一、開發過程當中嚴格分工完成頁面，以提升css重用率，避免重複開發

二、減少沉冗代碼、書寫全部人均可以重的懂的代碼，簡潔易懂是一種美德，爲用戶着想，爲服務器着想

如何成爲前端高手

一、要多寫多練