重構。什么是重構？為什么要重構。
重構是在不改變程序行為的基礎上進(jìn)行小的改動(dòng)，是代碼逐漸改善的過(guò)程。移除長(cháng)期累積下來(lái)的爛碼，以得到更清晰和更容易維護，除錯以及添加新功能的代碼，這做法不能單純只出現在編碼的后期，甚至是你意識到你的代碼已經(jīng)無(wú)從再下手非重寫(xiě)不可的時(shí)候，而是從開(kāi)始開(kāi)發(fā)起，逐漸積累，逐漸修改。以前因為日常編碼的隨意性，導致問(wèn)題日益積累，逐步擴散，最后只能推倒重來(lái)。如果時(shí)間經(jīng)受不起推倒重來(lái)，你別無(wú)選擇，唯一實(shí)現的選擇就是重構。
無(wú)論做什么，都不要因為追求完美而忽略曉得改進(jìn)，如果眼下時(shí)間足夠做一點(diǎn)重構，那就做一點(diǎn)兒。日后有時(shí)間還可以做更多。整體的重構設計雖然惹人注目令人難忘，但沒(méi)有平日的積累，何以收獲龐大的成就？你的目標應該是讓代碼每天都有新變化。堅持幾個(gè)月，我相信我們都能擁有驕傲地，清晰代碼。
良構
把標記轉換為符合現代標準的首要任務(wù)是實(shí)現良構。良構保證了DOM可操作的文檔樹(shù)結構的唯一性，因而成為可靠的跨瀏覽器的javascript代碼的基礎。對于一個(gè)亂構的頁(yè)面來(lái)說(shuō)，任何可靠的自動(dòng)化處理或測試都是非常難以保證的，其次，瀏覽器頁(yè)面的展示效果更是不可預估。對于亂構的頁(yè)面，不同的瀏覽器使用不同的方式補充確實(shí)的片段，并糾正其中的錯誤。因此，對于重構HTML，最要緊的無(wú)疑是實(shí)現頁(yè)面良構化。
要達到良構，大部分的網(wǎng)站要至少或全部做到以下幾點(diǎn)：
針對往日因為個(gè)人編程習慣和隨意性容易犯的錯誤，從良構角度思考，整理一下日后構建HTML時(shí)，有幾點(diǎn)需要特別注意。
更好實(shí)現良構的幾個(gè)要點(diǎn)：
有效性
有效性比良構稍微嚴格，即不僅要確保文檔的語(yǔ)法正確，還要保證語(yǔ)義正確。保證元素和屬性只能按自身語(yǔ)義出現在恰當的地方。
有效性是面向未來(lái)開(kāi)發(fā)的基石。有效的網(wǎng)站與設備無(wú)關(guān)，有效的頁(yè)面為不同的讀者傳達相同的信息，就算讀者使用的是界面不相同的瀏覽器。
良構和有效性檢查是基本的語(yǔ)法約束保證，接下來(lái)要保證語(yǔ)義是恰當的。
具體實(shí)現方法：
1，加入過(guò)渡型DOCTYPE聲明
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
過(guò)渡式DTD讓你不必要完全語(yǔ)義標記就能讓文檔通過(guò)驗證，并且他允許包含i,b和center等這些不推薦使用的表現性元書(shū)，因此，在進(jìn)一步改善文檔的語(yǔ)義之前，你可以找出比修復更嚴重的結構問(wèn)題。
2，刪除所有不存在的標簽
3，用CSS替代center，i，font等不被推薦或棄用的標簽。
4，把行內（inline）元素，放在塊（block）元素中
要做到有效，文檔中所有元素是有效的嚴格性XHTML元素還不夠，還必須保證它們之間的正確關(guān)系，瀏覽器和其他程序處理XHTML需要依賴(lài)元素間的正確位置。
Do you like this pictrue?<br /><img src = "file.gif" />I think it's really <em>neat</em><!--改寫(xiě)為--><p>Do you like this pictrue?<br /></p><div><img src = "file.gif" /></div><p>I think it's really <em>neat</em></p>
布局
1，熟悉元素語(yǔ)義
每一個(gè)元素都應各司其職：ul是無(wú)序列表，ol是有序列表，table是表格式數據，blockquote是應用，h1~h6是標題等。恰當的語(yǔ)義元素有助于屏幕閱讀器呈現更容易理解的結構，也能保證不同平臺間正確顯示。對于初學(xué)者，很多本來(lái)語(yǔ)義良好的元書(shū)，如ul,blockquote,table等，被濫用與實(shí)現某種特定布局效果。這些濫用的目的是給網(wǎng)頁(yè)生成特定的外觀(guān)，然而這些外觀(guān)難以跨瀏覽器，幾乎除了設計者自己的電腦，通常很多地方都不通用的。
| 失敗經(jīng)歷： 為了實(shí)現導航效果，一開(kāi)始沒(méi)有考慮內容語(yǔ)義，無(wú)意中將導航主項和相關(guān)聯(lián)的菜單分開(kāi)，在利用css中的相對定位，設定top和left屬性，將相關(guān)菜單移動(dòng)到相關(guān)的主項下。這樣會(huì )導致一個(gè)嚴重的問(wèn)題。一旦將不同頁(yè)面放置在不同的分辨率的屏幕上，菜單就會(huì )錯位。就是說(shuō)，針對不同分辨率的屏幕，還要設計不同的 top和left屬性。 <div class = "nav"> <div class="nav01">菜單一</div><div class="nav02">菜單二</div><div class="nav03">菜單三</div> </div> <div class = "menu"> <div class="menu01">子菜單一</div><div class="menu02">子菜單二</div><div class="menu03">子菜單三</div> </div> 優(yōu)化設計過(guò)的導航HTML結構，組合主菜單和子菜單： <nav> <ul class="clear"> <li class="first"><a href="#">菜單一</a></li> <li> <span class="Darrow"></span> <a href="#">菜單二</a> <dl> <dt><span class="arrow"></span></dt> <dd><a href="#">子菜單一</a></dd><dd><a href="#">子菜單二</a></dd><dd><a href="#">子菜單三子菜單三</a></dd> </dl> </li> <li> <span class="Darrow"></span> <a href="#">菜單三</a> <dl> <dt><span class="arrow"></span></dt> <dd><a href="#">子菜單一</a></dd><dd><a href="#">子菜單二</a></dd><dd><a href="#">子菜單三子菜單三</a></dd> </dl> </li> </ul> </nav>
|
編寫(xiě)HTML的目的不是為某種結構或者頁(yè)面外觀(guān)，而是為了如何更好地呈現內容，因此在編寫(xiě)HTML之前，務(wù)必思考這種內容應該使用哪種語(yǔ)義的元素。
恰當的HTML非常適合處理跨瀏覽器問(wèn)題。拿到web設計圖后，在著(zhù)手構建web應用之前，你必須要停止考慮頁(yè)面的外觀(guān)，而應該開(kāi)始思考頁(yè)面表達的是什么含義。
2，替換表格布局
基于CSS的頁(yè)面比基于表格的頁(yè)面更小更簡(jiǎn)單。
a)編寫(xiě)和編輯更容易，下載更快，
b)通過(guò)轉向CSS，可以節省帶寬。同時(shí)外聯(lián)的css文件可以緩存和重用，不必隨每次頁(yè)面的下載又重下一次。
取代濫用本用于呈現表格數據的table元素而使用表格布局，可以考慮頻繁使用的分欄式布局：
1）兩欄，左側固定寬度的側欄，右邊是彈性寬度的內容欄
2）三欄，左右各固定寬度的側欄，中間是內容。
| 根據以往項目開(kāi)發(fā)經(jīng)驗： 欄目的高度是由它們所包含的內容量決定。對于內容比重大的網(wǎng)站來(lái)說(shuō)，因為不能保證單個(gè)內容欄跟其他欄等高，欄會(huì )固定高度，保證各欄高度相同；而對于內容簡(jiǎn)單短小頁(yè)面，不固定高度問(wèn)題不大。另外，主體內容的div應該在側欄，頁(yè)頭或頁(yè)腳之前，這樣屏幕閱讀器可以從頁(yè)面最重要的內容開(kāi)始線(xiàn)性讀取頁(yè)面。搜索引擎機器人也可以對排在頁(yè)面前面的內容予以更高的優(yōu)先級。 就兩欄布局而言，有三種可能的寬度： ?。?）兩欄寬度固定。最普遍，固定寬度對于一部分用戶(hù)來(lái)所可能過(guò)大，過(guò)大的寬度用戶(hù)必須滾動(dòng)水平內容來(lái)查看內容，降低文本的可讀性 ?。?）左欄固定，內容欄是百分比寬度 ?。?）兩欄都是百分比 從更好的用戶(hù)體驗考慮，主體內容應該能調整大小，以便適應不同窗口寬度。 |
3，內容與樣式分離
當然我們的頁(yè)面也需要漂亮的外觀(guān)，以幫助我們在競爭中脫穎而出。這可以通過(guò)在獨立的CSS樣式中放置有關(guān)表現的信息來(lái)實(shí)現。CSS用來(lái)描述網(wǎng)頁(yè)的外觀(guān)，而瀏覽器可以自由選擇不同的樣式表或是修改過(guò)的樣式表。實(shí)際上，你可以為不同的瀏覽器隨意發(fā)送不同的樣式表，也可以為它們獨特的能力量身定制。這是響應式設計的基本實(shí)現方法。
“響應式網(wǎng)頁(yè)不僅僅是響應不同類(lèi)型的設備，而且需要響應不同的用戶(hù)需求。響應式的初衷是為了讓信息更好的傳遞交流，讓所有人無(wú)障礙的獲取信息，同時(shí)這也是 Web 的初衷?！?/span>
出于方便或者是自身的編碼習慣，在修改某種被更改的需求的樣式代碼時(shí)候，我們很容易在html代碼中直接鑲嵌樣式代碼。這樣的做法除了更快的完成你暫時(shí)的任務(wù)之外沒(méi)有任何好處。
4，使用CSS定位替代框架
網(wǎng)站使用框架的理由實(shí)際上就兩種：
（1）為所有頁(yè)面引入相同的靜態(tài)內容，而不用單獨編輯每個(gè)頁(yè)面。例如導航，網(wǎng)頁(yè)頭部尾部。也就是說(shuō)，單獨的非框架頁(yè)面可能比相應的框架頁(yè)面更耗帶寬，因為框架內容每次都要給客戶(hù)端重新發(fā)送內容。
?。?）顯示多欄外觀(guān)。例如Java API，包含包和類(lèi)的列表，主體內容
然而，過(guò)多使用框架將降低可用性：
?。?）難以標記數千或返回指定頁(yè)面
?。?）難以保存和打印頁(yè)面
（3）過(guò)多的滾動(dòng)條占據屏幕的寶貴空間
在每一個(gè)頁(yè)面上都有導航和其他相同或幾乎相同的內容，對網(wǎng)站來(lái)說(shuō)是非常普遍的，使用CSS取代框架，關(guān)鍵在于設立對應每個(gè)框架的div，每個(gè)div內容是對應框架里的文檔內容。然而，這樣做的問(wèn)題在于，它違反了DRY原則（Don't Repeat Youself,別重復你自己），對于相同的內同，雖然有時(shí)候只是很小的變化，但還是需要不斷在這一頁(yè)那一頁(yè)重復出現。重復內容通常也是代碼的壞味道?？蚣茉陟o態(tài)頁(yè)面上避免惡劣不必要的重復，我提倡清晰，可維護的代碼，在不損害用戶(hù)界面的前提下，我更遠一選擇難看的代碼而不是難看的用戶(hù)界面。日常中原始的 HTML是重復的，但不是我們必須編輯的，很多時(shí)候我們可以通過(guò)后臺自動(dòng)生成重復內容。
| Apache服務(wù)器端包含： 通常，擁有服務(wù)器端包含的以.shtml結尾的文件會(huì )在發(fā)送到客戶(hù)端之前，告訴服務(wù)器需要解析自身以及包含的內容 幾乎所有的Web服務(wù)器都支持某些形式的服務(wù)器端包含功能，使用服務(wù)器端包含各種非靜態(tài)文件，性能有所降低，但影響不大。 <!DOCTYPE html> <html> <meta charset = "utf-8"> <body> <!--#include virtual = "/header.html" --> <!---這里嵌套主內容--> <!--#include virtual = "/footer.html"--> <!--#include virtual = "/siderbar.html"--> </body> </html> 
盡管Apache默認的編譯會(huì )包含mod_include，但可能不會(huì )在所有目錄上啟用，你需要子啊Apache主配置文件或是.htacess文件中添加一下三行配置，以指向每一個(gè)使用服務(wù)器包含的目錄： AddType text/html .shtml AddOutputFilter INCLUDES .shtml Options +Includes
PHP的include函數有類(lèi)似的功能 <!DOCTYPE html> <html> <meta charset = "utf-8"> <body> <!--主內容--> <?php include("footer.html"); include("sidebar.html"); ?> </body> </html>
|
5，正確標記列表
正確標記列表能夠提升可訪(fǎng)問(wèn)性，通常我們子啊列表中實(shí)現跳轉和導航。
大部分瀏覽器給列表以及列表中的項目都制定特定的外觀(guān)，通常表現為縮進(jìn)和項目符號，可能不是你所需要的外觀(guān)，因此很容易在搭建html的時(shí)候忽略它們的存在，放棄使用正確列表標記，而使用語(yǔ)義較差的標簽，實(shí)現同樣的效果。根據需求，你能夠通過(guò)CSS可以容易地修復這些特定的外觀(guān)。下面整理了開(kāi)發(fā)中常用的CSS樣式修改規則：
/*刪除項目符號*/ul{list-style-type:none;}/*載入外部圖片自定義項目符號*/ul li {list-style-image : url(images/str.gif);}/*去掉縮進(jìn)的規則*/ul{margin-left : 0px;padding-left :0px;}/*把項目排成一行*/ul,li{display: inline;margin:0px;padding: 0px;}/*在列表項之間插入逗號*/ul li:after{content : ",";}/*制定項目的寬度，超出時(shí)顯示省略號*/div.titleholder {font-size: 8pt;width: 100px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;} 然而，lu應用與列表上，blockquote應用在應用上。blockquote與ul相比，整理文本縮進(jìn)更強大，更準確。
6，為圖片添加width和height屬性
width和height屬性能讓瀏覽器更快地樣式化頁(yè)面并展現給用戶(hù)。但注意，這樣做，對頁(yè)面的顯示速度有提升，但對下載速度并沒(méi)有幫助。
出于一般項目開(kāi)發(fā)觸覺(jué)，改變圖片的尺寸意味著(zhù)要修改HTML，否則圖片會(huì )奇怪地變大變小。如果需要經(jīng)常改變圖片，比如設計頁(yè)面是，最好是在最后的階段插入確定的寬度和高度。
聯(lián)系客服
