叢書名： 圖靈程序設(shè)計(jì)叢書 
作　　者： （美）哈羅德　東賢安　等譯
出 版 社： 人民郵電出版社                      I S B N ： 9787115210470

內(nèi)容大部分連接至當(dāng)當(dāng)：http://product.dangdang.com/product.aspx?product_id=20642357

內(nèi)容簡介
        本書采用理論與實(shí)踐相結(jié)合的方式，展示了如何重構(gòu)HTML，以獲得更佳的可靠性、性能、可用性、安全性、可訪問性、兼容性，甚至實(shí)現(xiàn)良好的搜索引擎優(yōu)化。書中詳細(xì)介紹了如何辨別應(yīng)該重構(gòu)的Web代碼中的“壞味道”，如何把舊的HTML轉(zhuǎn)換為良構(gòu)和有效的XHTML，如何使用CSS改善現(xiàn)有的布局，如何通過用GET替換POST、替換舊的聯(lián)系表單和重構(gòu)JavaScfipt來更新Web應(yīng)用程序，如何系統(tǒng)地重構(gòu)內(nèi)容和鏈接，如何在不改變用戶所依賴的URL的前提下重建網(wǎng)站。
        本書適合Web設(shè)計(jì)人員、開發(fā)人員、項(xiàng)目經(jīng)理和需要維護(hù)或更新既有網(wǎng)站的人使用。

目錄

第1章　重構(gòu)

        簡明概要的說，重構(gòu)是在不改變程序行為的基礎(chǔ)上進(jìn)行的小改動(dòng)，是代碼基逐漸改善的過程，通常也需依賴于一些自動(dòng)化工具的幫助。重構(gòu)的目標(biāo)是移除長年累月積聚下來的爛碼，以得到更清晰和更容易維護(hù)、除錯(cuò)及新添加功能的代碼。
        重構(gòu)的原因：1、初始設(shè)計(jì)者未曾想到的細(xì)節(jié)逐漸暴露；2、增加新功能。

1.1　為何重構(gòu)
1.1.1　壞味道：難以辨認(rèn)的代碼
1.1.2　壞味道：CE0根本搞不定他的旅行費(fèi)用報(bào)銷單
        網(wǎng)站需要更好的可用性。
1.1.3　壞味道：緩慢的頁面呈現(xiàn)速度
1.1.4　壞味道：不同的瀏覽器，不同的呈現(xiàn)
1.1.5　壞味道：網(wǎng)頁需要危險(xiǎn)或者非標(biāo)準(zhǔn)技術(shù)的支持
1.1.6　壞味道：公司主頁突然顯示“Pwned by Elite Doodz”
    黑客入侵，例如直接對設(shè)計(jì)有漏洞的表單處理腳本實(shí)施代碼注入攻擊。
1.1.7　壞味道：在Google搜索結(jié)果中首次排在17頁之后
1.1.8　壞味道：訪問者致信投訴網(wǎng)站失靈

1.2　何時(shí)重構(gòu)
        無論做什么，都不要因追求完美而忽視小的改進(jìn)（勿以善小而不為），如果眼下的時(shí)間足夠做一點(diǎn)兒重構(gòu)，那就只做一點(diǎn)兒，以后有時(shí)間可以做得更多。整體性的重新設(shè)計(jì)雖然惹人注目令人難忘，但不積跬步又何以至千里？

1.3　重構(gòu)什么
1.3.1 為何要用XHTML
        XHTML只不過XML化的HTML。但XHTML非常嚴(yán)格。諸如漏掉引號或忽略結(jié)束標(biāo)簽這些細(xì)微的錯(cuò)誤，在HTML中瀏覽器會(huì)默默補(bǔ)上，但在XHTML中就會(huì)成為嚴(yán)重的四級警報(bào)。這樣就簡化了瀏覽器對XHTML的處理。

1.3.2　為何要用CSS
        把表現(xiàn)從內(nèi)容中分離出來是HTML的基本設(shè)計(jì)原則。

1.3.3 為何要用REST
        REST(Representational State Transfer，表述性狀態(tài)轉(zhuǎn)移)，它是HTTP的架構(gòu)。

1.4　反對重構(gòu)的理由

第2章　工具

2.1 備份、測試用機(jī)和源碼控制
        重構(gòu)至少需要5個(gè)步驟：
1、確定問題。
2、修復(fù)問題。
3、檢查已修復(fù)的問題。
4、確保沒有引入新問題。
5、部署解決方案。

2.2　驗(yàn)證器
2.2.1  W3C標(biāo)記驗(yàn)證服務(wù)
2.2.2  日志驗(yàn)證程序
2.2.3  xmllint
2.2.4  編輯器

2.3　測試
2.3.1    JUnit
2.3.2　HtmlUnit
2.3.3　HttpUnit
2.3.4　JWebUIlit
2.3.5　FitNesse
2.3.6    Selenium
2.3.7　測試入門

2.4　正則表達(dá)式
2.4.1　搜索
2.4.2　搜索模式

2.5     Tidy
2.5.1    -asxhtml
2.5.2    -clean
2.5.3　編碼
2.5.4　整潔的格式
2.5.5　生成的代碼
2.5.6　當(dāng)做庫來用

2.6    TagSoup

2.7    XSLT

第3章 良構(gòu)
        良構(gòu)是強(qiáng)大XML工具鏈條中的基礎(chǔ)性環(huán)節(jié)。良構(gòu)保證了DOM可操作的文檔樹結(jié)構(gòu)的唯一性，因而成為可靠的跨瀏覽器的JavaScript代碼的基礎(chǔ)。

3.1　什么是良構(gòu)

3.2　將名稱改為小寫
        在XHTML模式中，小寫是必要條件。
<table></table>

3.3　給屬性值加引號
        在XHTML中，所有的屬性值，即使沒有空格，也都要加上引號。
<div id="speech1">...</div>

3.4　補(bǔ)足遺漏的屬性值
        為所有不帶屬性值的屬性加上屬性值。XHTML不支持只有屬性名稱而沒有值的語法。
<input type="radio" name="p" value="debit" checked></input>  改為
<input type="radio" name="p" value="debit" checked="checked"></input>

3.5  將空標(biāo)簽替換為空元素標(biāo)簽
        XML解析器要求所有的起始標(biāo)簽都有匹配的結(jié)束標(biāo)簽。
<br> 改為 <br class="empty" />  在最后一個(gè)斜線之前加上屬性或者空格能達(dá)到最大的兼容性。
   
3.6  添加結(jié)束標(biāo)簽
        關(guān)閉所有的段落、清單項(xiàng)目、表格單元格和其他非空的元素。

3.7  消除重疊
        在父級元素上關(guān)閉每一個(gè)子元素。

3.8  把文本轉(zhuǎn)換為 UTF-8
        UTF-8是一個(gè)標(biāo)準(zhǔn)的編碼，可運(yùn)作在所有瀏覽器上，被主流的文本編輯器和工具支持，它相當(dāng)快速、小巧和高效。它支持所有的Unicode字符，也是頁面國際化和本地化的堅(jiān)實(shí)基礎(chǔ)。

3.9  轉(zhuǎn)移小于號
        把 < 轉(zhuǎn)義為 &lt; 。

3.10  轉(zhuǎn)義 & 號
        把 & 轉(zhuǎn)義為 &amp; 。

3.11  轉(zhuǎn)義屬性值中的引號
        把 " 轉(zhuǎn)義為 &quot; 或把 ' 轉(zhuǎn)義為 &apos; 。

3.12  加入XHTML DOCTYPE聲明

3.13  結(jié)束每一個(gè)實(shí)體引用
        把 &copy 改為 &copy;

3.14  替換虛構(gòu)的實(shí)體引用
        確保文檔中用到的實(shí)體引用都是有定義的。

3.15  加入根元素
        確保每一個(gè)文檔都有html根元素。

3.16  加入XHTML命名空間
   

第4章　有效性

        有效性比良構(gòu)稍微嚴(yán)格，即不僅要確保文檔的語法正確，還要保證語義正確。它保證只有HTML規(guī)范中定義的元素和屬性會(huì)出現(xiàn)，這樣就不會(huì)出乎瀏覽器的意料。它還保證了元素和屬性值能按自身語義出現(xiàn)在恰當(dāng)?shù)牡胤健?/p>

4.1  加入過渡型DOCTYPE聲明
        過渡型DTD讓你不必完全語義化標(biāo)記就能讓文檔通過驗(yàn)證。它允許文檔包含諸如i、b和center等這些不推薦使用的表現(xiàn)性元素。
        使用時(shí)需要特別注意的是IE瀏覽器中會(huì)產(chǎn)生一些使用特定技巧的偏差。

4.2  刪除所有不該存在的標(biāo)簽
        消滅所有異數(shù)（即HTML規(guī)范不允許或?yàn)g覽器私有的擴(kuò)展元素）。

4.3  添加alt屬性
        1、幫助視力受損的用戶、或者聲音瀏覽器。
        2、搜索引擎優(yōu)化，尤其是圖片搜索，過分關(guān)注alt屬性的文本。

4.4  用 object 替代 embed
        object元素可以被更好的文檔化，現(xiàn)代瀏覽器的支持更一致。
當(dāng)然對于舊瀏覽器，可以在 object元素內(nèi)加入 embed元素。
 
4.5  加入嚴(yán)格型的 DOCTYPE聲明

4.6  用 CSS替代center
        把所有的center元素轉(zhuǎn)化為div或者相應(yīng)的語義元素，然后再使用CSS的text-align屬性實(shí)現(xiàn)居中。

4.7  用 CSS替代font

4.8  用 em或 CSS替代 i

4.9  用 strong 或者 CSS替換 b

4.10  用 CSS替換各種顏色屬性

4.11  把 img元素的屬性轉(zhuǎn)換為 CSS屬性

4.12  用 object替代 applet

4.13  用 CSS替換表現(xiàn)性元素

4.14  把行內(nèi)(Inline)元素放到塊(block)元素中

第5章　布局

        在現(xiàn)代瀏覽器中，CSS對頁面的外觀提供更強(qiáng)有力的控制。創(chuàng)建現(xiàn)代網(wǎng)頁需要使用與CSS清晰分離的XHTML，不需在使用表格型布局和font標(biāo)簽等表現(xiàn)性元素。

5.1  替換表格布局
        把所有的表格布局都刪除，代之以線性化內(nèi)容的div元素。然后使用CSS樣式表按你想要的形式定位div。

5.2  使用CSS定位替代框架
        把框架轉(zhuǎn)化為單一頁面。

5.3  把內(nèi)容放到最前面
        在順序讀取原始HTML源碼時(shí)，主要內(nèi)容應(yīng)該放到最前面。側(cè)欄、頁頭、頁腳和導(dǎo)航欄等部分應(yīng)該跟在內(nèi)容之后。

5.4  正確標(biāo)記列表

5.5  用CSS替代 blockquote/ul 的縮進(jìn)
        blockquote應(yīng)該應(yīng)用于引用上，而ul應(yīng)該用戶列表中。

5.6  替換占位圖片
        把所有占位圖片都刪除，必要時(shí)使用 CSS的margin、padding、position和 indent屬性來呈現(xiàn)這些效果。

5.7  添加 id屬性
        為每個(gè)元素添加 id屬性，以便可快速定位。

5.8  為圖片添加 width和 height屬性
      width和 height屬性能讓瀏覽器更快地樣式化頁面并展示給用戶。
 

第6章　可訪問性

        只要讓 XHTML文檔有效，就能在很大程序上提高可訪問性，由過渡型向嚴(yán)格型轉(zhuǎn)變又提升了一層。使用 CSS樣式表分離內(nèi)容和表現(xiàn)對可訪問性也有很大的幫助。

6.1  把圖片轉(zhuǎn)換為文本
        使用圖片本身包含的文本取代圖片，然后使用標(biāo)記和CSS規(guī)則模擬相關(guān)的樣式。

6.2  為表單輸入框添加標(biāo)簽
        對于非隱藏的input、textarea、select等表單元素，確保他們都有相應(yīng)的標(biāo)簽。
Red-necked Grebe
<input name="rng" type="checkbox" />  轉(zhuǎn)換為

<label>Red-necked Grebe
<input name="rng" type="checkbox" />
</label>

6.3  使用標(biāo)準(zhǔn)的字段名稱
        重寫表單和處理表單的腳本，為如電子郵件地址、信用卡和電話號碼等使用慣用的名稱。
瀏覽器自動(dòng)填寫，這對于那些討厭把時(shí)間浪費(fèi)在重復(fù)輸入內(nèi)容的人有很大幫助。

6.4  開啟自動(dòng)完成
        在適當(dāng)情況下把 autocomplete="off" 刪除。

6.5  為表單添加 Tab索引
        為每一個(gè)可編輯的、非隱藏的表單字段添加 tabindex屬性。

6.6  加入“跳過”機(jī)制
        在每個(gè)頁面的開頭放置一個(gè)“不可見”的鏈接，它可以直接跳到頁面的主要內(nèi)容上。

6.7  添加頁面標(biāo)題
        對于比較長的網(wǎng)頁，在合適的位置放置 h1~h6元素。

6.8  把鏈接和標(biāo)題里重要的內(nèi)容放到前面

6.9  加大輸入框
        保證所有表單都有足夠的空間，讓用戶更容易填寫所有必要的字段。

6.10  加入表格描述
        為每個(gè)表格添加caption元素和或summary屬性，給每一行或每一列的標(biāo)簽使用 th元素。
為視覺和非視覺用戶提供幫助。

6.11  加入acronym元素

6.12  加入lang屬性
        為每個(gè)根元素添加 lang和 xml:lang屬性，用于指出文檔使用的主要語言。

第7章　Web應(yīng)用程序

7.1  用POST替換不安全的GET

7.2  用GET替換安全的POST

7.3  重定向 POST為 GET

7.4  啟用緩存

7.5  阻止緩存

7.6  使用 ETag
        ETag讓客戶端能夠不下載整個(gè)頁面就能迅速檢查頁面是否有變化，從而節(jié)省了服務(wù)器和客戶端的帶寬并加速了頁面的載入時(shí)間。

7.7  用 HTML替換 Falsh
        把 Flash網(wǎng)站專為HTML，為所有的 Flsah內(nèi)容提供一個(gè)純HTML的版本。

7.8  增加 Web Froms 2.0的類型
        注：不是所有瀏覽器都支持。

7.9  用 mailto 鏈接取代聯(lián)系表單
        電子郵件程序給用戶提供了更強(qiáng)和更舒適的編輯和歸檔功能。

7.10  封閉機(jī)器人
        在希望封閉機(jī)器人的目錄中加上 robots.txt文件，安裝一個(gè)蜜罐程序來檢測和封閉不禮貌的機(jī)器人和歹毒爬蟲。

7.11  轉(zhuǎn)義用戶的輸入
        為所有用戶的輸入提供轉(zhuǎn)義。

第8章　內(nèi)容

8.1  修正拼寫

8.2  修復(fù)壞鏈接

8.3  刪除入口頁面
        把內(nèi)容放到首頁上。

8.4  隱藏電子郵件地址
        公布在 Web頁面上的電子郵件地址應(yīng)該進(jìn)行編碼，放置垃圾信息機(jī)器人的采集。

附錄A　正則表達(dá)式