編寫高質量代碼︰Web前端開發修煉之道

推薦序
贊譽
前言
致謝
第1章 從網站重構說起
　1.1 糟糕的頁面實現，頭疼的維護工作
　1.2 Web標準—結構、樣式和行為的分離
　1.3 前端的現狀
　1.4 打造高品質的前端代碼，提高代碼的可維護性—精簡、重用、有序
第2章 團隊合作
　2.1 揭秘前端開發工程師
　2.2 欲精一行，必先通十行
　2.3 增加代碼可讀性—注釋
　2.4 提高重用性—公共組件和私有組件的維護 　
　2.5 冗余和精簡的矛盾—選擇集中還是選擇分散
　2.6 磨刀不誤砍柴工—前期的構思很重要
　2.7 制訂規範
　2.8 團隊合作的最大難度不是技術，是人
第3章 高質量的HTML
　3.1 標簽的語義
　3.2 為什麼要使用語義化標簽
　3.3 如何確定你的標簽是否語義良好
　3.4 常見模塊你真的很了解嗎
　　3.4.1 標題和內容
　　3.4.2 表單
　　3.4.3 表格
　　3.4.4 語義化標簽應注意的一些其他問題3
第4章 高質量的CSS4
　4.1 怪異模式和DTD
　4.2 如何組織CSS
　4.3 推薦的base.css
　4.4 模塊化CSS—在CSS中引入面向對象編程思想 　
　　4.4.1 如何劃分模塊—單一職責
　　4.4.2 CSS的命名—命名空間的概念
　　4.4.3 掛多個class還是新建class —多用組合，少用繼承
　　4.4.4 如何處理上下margin
　4.5 低權重原則—避免濫用子選擇器
　4.6 CSS sprite
　4.7 CSS 的常見問題
　　4.7.1 CSS的編碼風格
　　4.7.2 id和class
　　4.7.3 CSS hack
　　4.7.4 解決超鏈接訪問後hover樣式不出現的問題
　　4.7.5 hasLayout4
　　4.7.6 塊級元素和行內元素的區別
　　4.7.7 display:inline-block 和 hasLayout7
　　4.7.8 relative、absolute和float3
　　4.7.9 居中4
　　4.7.10 網格布局
　　4.7.11 z-index的相關問題以及Flash和IE 6下的select元素
　　4.7.12 插入png圖片
　　4.7.13 多版本IE並存方案—CSS的調試利器IETester
第5章 高質量的JavaScript
　5.1 養成良好的編程習慣
　　5.1.1 團隊合作—如何避免JS沖突
　　5.1.2 給程序一個統一的入口—window.onload和DOMReady
　　5.1.3 CSS放在頁頭，JavaScript放在頁尾
　　5.1.4 引入編譯的概念—文件壓縮
　5.2 JavaScript的分層概念和JavaScript庫
　　5.2.1 JavaScript如何分層
　　5.2.2 base層3
　　5.2.3 common層
　　5.2.4 page層4
　　5.2.5 JavaScript庫
　5.3 編程實用技巧7
　　5.3.1 彈性7
　　5.3.2 getElementById、getElementsByTagName和getElements-ByClassName3
　　5.3.3 可復用性
　　5.3.4 避免產生副作用9
　　5.3.5 通過傳參實現定制3
　　5.3.6 控制this關鍵字的指向7
　　5.3.7 預留回調接口
　　5.3.8 編程中的DRY規則
　　5.3.9 用hash對象傳參
　5.4 面向對象編程
　　5.4.1 面向過程編程和面向對象編程
　　5.4.2 JavaScript的面向對象編程
　　5.4.3 用面向對象方式重寫代碼
　5.5 其他問題
　　5.5.1 prototype和內置類
　　5.5.2 標簽的自定義屬性
　　5.5.3 標簽的內聯事件和event對象
　　5.5.4 利用事件冒泡機制
　　5.5.5 改變DOM樣式的三種方式
附錄A 寫在規則前面的話
附錄B 命名規則
附錄C 分工安排
附錄D 注釋規則
附錄E HTML規範
附錄F CSS規範
附錄G JavaScript規範

Web前端開發是從網頁制作演變而來的，名稱上有很明顯的時代特征。在互聯網的演化進程中，網頁制作是Web 1．0時代的產物，那時網站的主要內容都是靜態的，用戶使用網站的行為也以瀏覽為主。2005年以後，互聯網進入Web 2，0時代，各種類似桌面軟件的Web應用大量涌現，網站的前端由此發生了翻天覆地的變化。網頁不再只是承載單一的文字和圖片，各種富媒體讓網頁的內容更加生動，網頁上軟件化的交互形式為用戶提供了更好的使用體驗，這些都是基于前端技術實現的。

以前會Photoshop和Dreamweaver就可以制作網頁，現在只掌握這些已經遠遠不夠了。無論是開發難度上，還是開發方式上，現在的網頁制作都更接近傳統的網站後台開發，所以現在不再叫網頁制作，而是叫Web前端開發。Web前端開發在產品開發環節中的作用變得越來越重要，而且需要專業的前端工程師才能做好，這方面的專業人才近兩年來備受青睞。Web前端開發是一項很特殊的工作，涵蓋的知識面非常廣，既有具體的技術，又有抽象的理念。簡單地說，它的主要職能就是把網站的界面更好地呈現給用戶。

如何才能做得更好呢？

第一，必須掌握基本的Web前端開發技術，其中包括︰CSS、HTML、DOM、BOM、Ajax、JavaScript等，在掌握這些技術的同時，還要清楚地了解它們在不同瀏覽器上的兼容情況、渲染原理和存在的Bug。

第二，在一名合格的前端工程師的知識結構中，網站性能優化、SEO和服務器端的基礎知識也是必須掌握的。

第三，必須學會運用各種工具進行輔助開發。

第四，除了要掌握技術層面的知識，還要掌握理論層面的知識，包括代碼的可維護性、組件的易用性、分層語義模板和瀏覽器分級支持，等等。

可見，看似簡單的網頁制作，如果要做得更好、更專業，真的是不簡單。這就是前端開發的特點，也是讓很多人困惑的原因。如此繁雜的知識體系讓新手學習起來無從下手，對于老手來說，也時常不知道下一步該學什麼。

目前市面上關于Web前端開發的書主要都是針對單一技術的，本書與這些書有著本質的區別。它主要想實現兩個目標︰第一，為不太有經驗的Web前端開發工程師建立大局觀，讓他們真正了解和理解這個職業；第二，幫助有一定Web前端開發經驗的工程師修煉內功，通過編寫高質量的代碼來提高前端代碼的可維護性。這是很多前端開發工程師感興趣的內容。

本書的前兩章討論了網站重構和團隊合作，這是很有必要的。網站重構的目的僅僅是為了讓網頁更符合Web標準嗎？不是！重構的本質應該是構建一個前端靈活的MVC框架，即HTML作為信息模型（Model），CSS控制樣式（View），JavaScript負責調度數據和實現某種展現邏輯（Controller）。同時，代碼需要具有很好的復用性和可維護性。這是高效率、高質量開發以及協作開發的基礎。建立了這種大局觀後，學習具體技術的思路就更清晰了。

……