重構(gòu)是在不改變程序行為的基礎(chǔ)上進(jìn)行小的改動(dòng)，是代碼逐漸改善的過(guò)程。移除長(zhǎng)期累積下來(lái)的爛碼，以得到更清晰和更容易維護(hù)，除錯(cuò)以及添加新功能的代碼，這做法不能單純只出現(xiàn)在編碼的后期，甚至是你意識(shí)到你的代碼已經(jīng)無(wú)從再下手非重寫(xiě)不可的時(shí)候，而是從開(kāi)始開(kāi)發(fā)起，逐漸積累，逐漸修改。以前因?yàn)槿粘＞幋a的隨意性，導(dǎo)致問(wèn)題日益積累，逐步擴(kuò)散，最后只能推倒重來(lái)。如果時(shí)間經(jīng)受不起推倒重來(lái)，你別無(wú)選擇，唯一實(shí)現(xiàn)的選擇就是重構(gòu)。

要達(dá)到良構(gòu)，大部分的網(wǎng)站要至少或全部做到以下幾點(diǎn)：

所有的其實(shí)標(biāo)簽都應(yīng)有一個(gè)匹配的結(jié)束標(biāo)簽

空元素應(yīng)該使用空元素的標(biāo)簽語(yǔ)法

所有的屬性都必須有一個(gè)值

所有的屬性都需要用引號(hào)括起來(lái)

所有的&好必須轉(zhuǎn)義為&amp；

所有的小于號(hào)都要轉(zhuǎn)義為&lt；

只有唯一的根元素

所有未預(yù)定義的實(shí)體應(yīng)用必須在DTD中聲明

針對(duì)往日因?yàn)閭€(gè)人編程習(xí)慣和隨意性容易犯的錯(cuò)誤，從良構(gòu)角度思考，整理一下日后構(gòu)建HTML時(shí)，有幾點(diǎn)需要特別注意。

更好實(shí)現(xiàn)良構(gòu)的幾個(gè)要點(diǎn)：

將名稱(chēng)改成小寫(xiě)。<P></P> 改寫(xiě)為 <p></p>等，因?yàn)閄HTML只使用小寫(xiě)名稱(chēng)，所有元素和屬性都要小寫(xiě)，<TABLE>和<Table>都不被接收

給屬性值加引號(hào)。<span class = speack></span>改寫(xiě)成<span class =“ speack”></span>等。一些空格的屬性有時(shí)候出現(xiàn)有做括號(hào)而沒(méi)有右括號(hào)，瀏覽器不宜定按照你的意愿解析，不同的瀏覽器有不同的解析效果，這就有可能造成跨瀏覽器問(wèn)題。

補(bǔ)足遺漏的屬性。<input type = "radio" checked>改成<input type = "radio" checked = 'checked'>等。XHTML不支持只有屬性名稱(chēng)而沒(méi)有值的語(yǔ)法。

將空標(biāo)簽替換為空元素標(biāo)簽。XML解析器要求所有的起始標(biāo)簽都有匹配的結(jié)束標(biāo)簽<p>要有對(duì)應(yīng)的</p>，<br>改寫(xiě)為</br>等

消除重疊。<strong><em>xxxx</strong></em>改寫(xiě)成<strong><em>xxxx</em></strong>等。不同的瀏覽器對(duì)包含重疊元素的文檔所構(gòu)建的DOM樹(shù)不一樣。在重疊元素面前，javascript，css以及其他需要讀取DOM的程序都變得難以創(chuàng)建，排錯(cuò)和維護(hù)。

有效性

有效性比良構(gòu)稍微嚴(yán)格，即不僅要確保文檔的語(yǔ)法正確，還要保證語(yǔ)義正確。保證元素和屬性只能按自身語(yǔ)義出現(xiàn)在恰當(dāng)?shù)牡胤健?/p>

有效性是面向未來(lái)開(kāi)發(fā)的基石。有效的網(wǎng)站與設(shè)備無(wú)關(guān)，有效的頁(yè)面為不同的讀者傳達(dá)相同的信息，就算讀者使用的是界面不相同的瀏覽器。

良構(gòu)和有效性檢查是基本的語(yǔ)法約束保證，接下來(lái)要保證語(yǔ)義是恰當(dāng)?shù)摹?/p>

具體實(shí)現(xiàn)方法：

1，加入過(guò)渡型DOCTYPE聲明

過(guò)渡式DTD讓你不必要完全語(yǔ)義標(biāo)記就能讓文檔通過(guò)驗(yàn)證，并且他允許包含i,b和center等這些不推薦使用的表現(xiàn)性元書(shū)，因此，在進(jìn)一步改善文檔的語(yǔ)義之前，你可以找出比修復(fù)更嚴(yán)重的結(jié)構(gòu)問(wèn)題。

2，刪除所有不存在的標(biāo)簽

3，用CSS替代center，i，font等不被推薦或棄用的標(biāo)簽。

4，把行內(nèi)（inline）元素，放在塊（block）元素中

要做到有效，文檔中所有元素是有效的嚴(yán)格性XHTML元素還不夠，還必須保證它們之間的正確關(guān)系，瀏覽器和其他程序處理XHTML需要依賴元素間的正確位置。

布局

1，熟悉元素語(yǔ)義

每一個(gè)元素都應(yīng)各司其職：ul是無(wú)序列表，ol是有序列表，table是表格式數(shù)據(jù)，blockquote是應(yīng)用，h1~h6是標(biāo)題等。恰當(dāng)?shù)恼Z(yǔ)義元素有助于屏幕閱讀器呈現(xiàn)更容易理解的結(jié)構(gòu)，也能保證不同平臺(tái)間正確顯示。對(duì)于初學(xué)者，很多本來(lái)語(yǔ)義良好的元書(shū)，如ul,blockquote,table等，被濫用與實(shí)現(xiàn)某種特定布局效果。這些濫用的目的是給網(wǎng)頁(yè)生成特定的外觀，然而這些外觀難以跨瀏覽器，幾乎除了設(shè)計(jì)者自己的電腦，通常很多地方都不通用的。

2，替換表格布局

基于CSS的頁(yè)面比基于表格的頁(yè)面更小更簡(jiǎn)單。

a)編寫(xiě)和編輯更容易，下載更快，

b)通過(guò)轉(zhuǎn)向CSS，可以節(jié)省帶寬。同時(shí)外聯(lián)的css文件可以緩存和重用，不必隨每次頁(yè)面的下載又重下一次。

取代濫用本用于呈現(xiàn)表格數(shù)據(jù)的table元素而使用表格布局，可以考慮頻繁使用的分欄式布局：

1）兩欄，左側(cè)固定寬度的側(cè)欄，右邊是彈性寬度的內(nèi)容欄

2）三欄，左右各固定寬度的側(cè)欄，中間是內(nèi)容。

當(dāng)然我們的頁(yè)面也需要漂亮的外觀，以幫助我們?cè)诟?jìng)爭(zhēng)中脫穎而出。這可以通過(guò)在獨(dú)立的CSS樣式中放置有關(guān)表現(xiàn)的信息來(lái)實(shí)現(xiàn)。CSS用來(lái)描述網(wǎng)頁(yè)的外觀，而瀏覽器可以自由選擇不同的樣式表或是修改過(guò)的樣式表。實(shí)際上，你可以為不同的瀏覽器隨意發(fā)送不同的樣式表，也可以為它們獨(dú)特的能力量身定制。這是響應(yīng)式設(shè)計(jì)的基本實(shí)現(xiàn)方法。

“響應(yīng)式網(wǎng)頁(yè)不僅僅是響應(yīng)不同類(lèi)型的設(shè)備，而且需要響應(yīng)不同的用戶需求。響應(yīng)式的初衷是為了讓信息更好的傳遞交流，讓所有人無(wú)障礙的獲取信息，同時(shí)這也是 Web 的初衷。”

出于方便或者是自身的編碼習(xí)慣，在修改某種被更改的需求的樣式代碼時(shí)候，我們很容易在html代碼中直接鑲嵌樣式代碼。這樣的做法除了更快的完成你暫時(shí)的任務(wù)之外沒(méi)有任何好處。

4，使用CSS定位替代框架

網(wǎng)站使用框架的理由實(shí)際上就兩種：

（1）為所有頁(yè)面引入相同的靜態(tài)內(nèi)容，而不用單獨(dú)編輯每個(gè)頁(yè)面。例如導(dǎo)航，網(wǎng)頁(yè)頭部尾部。也就是說(shuō)，單獨(dú)的非框架頁(yè)面可能比相應(yīng)的框架頁(yè)面更耗帶寬，因?yàn)榭蚣軆?nèi)容每次都要給客戶端重新發(fā)送內(nèi)容。

（2）顯示多欄外觀。例如Java API，包含包和類(lèi)的列表，主體內(nèi)容

然而，過(guò)多使用框架將降低可用性：

（1）難以標(biāo)記數(shù)千或返回指定頁(yè)面

（2）難以保存和打印頁(yè)面

（3）過(guò)多的滾動(dòng)條占據(jù)屏幕的寶貴空間

在每一個(gè)頁(yè)面上都有導(dǎo)航和其他相同或幾乎相同的內(nèi)容，對(duì)網(wǎng)站來(lái)說(shuō)是非常普遍的，使用CSS取代框架，關(guān)鍵在于設(shè)立對(duì)應(yīng)每個(gè)框架的div，每個(gè)div內(nèi)容是對(duì)應(yīng)框架里的文檔內(nèi)容。然而，這樣做的問(wèn)題在于，它違反了DRY原則（Don't Repeat Youself,別重復(fù)你自己），對(duì)于相同的內(nèi)同，雖然有時(shí)候只是很小的變化，但還是需要不斷在這一頁(yè)那一頁(yè)重復(fù)出現(xiàn)。重復(fù)內(nèi)容通常也是代碼的壞味道。框架在靜態(tài)頁(yè)面上避免惡劣不必要的重復(fù)，我提倡清晰，可維護(hù)的代碼，在不損害用戶界面的前提下，我更愿意選擇難看的代碼而不是難看的用戶界面。日常中原始的HTML是重復(fù)的，但不是我們必須編輯的，很多時(shí)候我們可以通過(guò)后臺(tái)自動(dòng)生成重復(fù)內(nèi)容。

5，正確標(biāo)記列表

正確標(biāo)記列表能夠提升可訪問(wèn)性，通常我們?cè)诹斜碇袑?shí)現(xiàn)跳轉(zhuǎn)和導(dǎo)航。

6，為圖片添加width和height屬性

width和height屬性能讓瀏覽器更快地樣式化頁(yè)面并展現(xiàn)給用戶。但注意，這樣做，對(duì)頁(yè)面的顯示速度有提升，但對(duì)下載速度并沒(méi)有幫助。

出于一般項(xiàng)目開(kāi)發(fā)觸覺(jué)，改變圖片的尺寸意味著要修改HTML，否則圖片會(huì)奇怪地變大變小。如果需要經(jīng)常改變圖片，比如設(shè)計(jì)頁(yè)面是，最好是在最后的階段插入確定的寬度和高度。

本文題目：重構(gòu)HTML改善Web應(yīng)用設(shè)計(jì)
網(wǎng)頁(yè)地址：http://aaarwkj.com/news49/113999.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、全網(wǎng)營(yíng)銷(xiāo)推廣、網(wǎng)站設(shè)計(jì)、域名注冊(cè)、商城網(wǎng)站、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)