HTML模塊化：使用HTML5 Boilerplate模板
開始一個Web項目，HTML的書寫總是重中之重，一個好的HTML能從根源上規(guī)避大量潛在問題，所以Web App應該全部應用一個標準化的高質(zhì)量HTML模板，而不是將所有頁面交由開發(fā)人員自由發(fā)揮。
這里推薦使用HTML5 Boilerplate項目作為App的默認模板以及文件路徑規(guī)范，無論是網(wǎng)站或者富UI的App，都可以采用這個模板作為起步。
可以使用
git clone git://github.com/h5bp/html5-boilerplate.git
或者直接下載HTML5 Boilerplate項目代碼。HTML5 Boilerplate的文件結(jié)構如下：
從上往下看：
css用于存放css文件，并內(nèi)置了Normalize.css作為默認CSS重置手段（其實Normalize.css不能算是CSS reset）。doc存放項目文檔img存放項目圖片js存放javascript文件，其中第三方類庫推薦放在vendor下.htaccess內(nèi)置了很多對于靜態(tài)文件在Apache下的優(yōu)化策略，如果Web服務器不是Apache則可以參考其他Web服務器配置優(yōu)化。404.html默認的404頁面，index.html項目模板humans.txt相對于面向機器人的robots.txt，humans.txt更像是小幽默，這在里可以寫關于項目/團隊的介紹，或者放置一些彩蛋給那些喜歡對你的應用刨根問底的用戶們。robots.txt用于告訴搜索引擎蜘蛛爬行規(guī)則crossdomain.xml用于配置Flash的跨域策略favicon.icoapple-touch-icon.png等小圖標。
如果是一個主要面向移動設備，則主要將jQuery換成了Zepto.js，以適應移動設備。
HTML5 Boilerplate的模板核心部分不過30行，但是每一行都可謂千錘百煉，可以用最小的消耗解決一些前端的頑固問題：
使用條件注釋區(qū)分IE瀏覽器
- <!DOCTYPE html>
- <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
- <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
- <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
- <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
之所以要這樣寫：
- 可以使用class作為全局條件區(qū)分低版本的IE瀏覽器并進行調(diào)整，這顯然要優(yōu)于使用CSS Hack。
- 可以避免IE6條件注釋引起的高版本IE文件阻塞問題，原文的解決方法是在前面加一個空白的條件注釋，但是這里顯然將原本無用空白的條件注釋變得有意義了。
- 仍然可以通過HTML驗證。
- 與Modernizr等特征檢測類庫使用相同的class，更具備通用性。
no-js標簽是需要與Modernizr等類庫配合使用的，如果你不想在項目中引入Modernizr，需要在Head部分加入一行使no-js標簽變?yōu)?code>js，代碼來自Avoiding the FOUC：
- <script>(function(H){HH.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
通過上面的條件注釋，就可以在CSS中針對不同情況分別處理：
- .lt-ie7 {} /* IE6等版本時 */
- .no-js {} /* JavaScript沒有啟用時 */
meta標簽的書寫順序
為了讓瀏覽器識別正確的編碼，meta charset標簽應該先于title標簽出現(xiàn)。
meta X-UA-Compatible標簽可以指定IE8以上版本瀏覽器以***級模式渲染文檔，同時如果已經(jīng)安裝Google Chrome Frame則直接使用Chrome Frame渲染。而指定渲染模式的meta X-UA-Compatible標簽同樣需要優(yōu)先出現(xiàn) ：
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <title></title>
設置移動設備顯示窗口寬度
- <meta name="viewport" content="width=device-width">
這是移動設備專屬的標簽，具體設置需要根據(jù)項目實際情況調(diào)整。
使用Modernizr做瀏覽器差異檢測
Modernizr常做前端的應該都不陌生。引入Modernizr后，html標簽的no-js將會被自動替換為js，同時Modernizr會向html標簽添加代表版本檢測結(jié)果的class。
對于低版本瀏覽器的向上兼容需要根據(jù)項目實際需求處理，Modernizr也非常周到的給出的絕大多數(shù)HTML5功能的兼容方法。
腳本
一個完整的Boilerplate里還包含一個build目錄，里面config目錄里有針對ant的配置文件，default.properties自然是默認屬性定義，用戶可以修改project.properties來定義自己的屬性；tools目錄下有各種編譯工具。
編譯時，libs下的文件不會再改變，但mylibs中文件以及另兩個都會一起壓縮到一個js文件中，style.css也會被壓縮，同時 images目錄下會針對jpg和png優(yōu)化。js中consloe.log函數(shù)將被去除，html文件也可以壓縮，默認使用htmlbuildkit， 還可以用htmlclean或htmlcompress來壓縮。
再看看default.properties里定義哪些選項
- build.concat.scripts = true – 腳本文件將被壓縮為一個文件
- build.delete.unoptimized = true – 未優(yōu)化的文件將被刪除
- file.exclude = nonexistentfile – 發(fā)布時排除的文件后綴
后面是文件目錄的定義，以及編譯工具的定義。
結(jié)語
進入 HTML5 Boilerplate 項目的門檻非常低，有充足的空間用于試驗。您可以將這個項目作為您的試驗項目，探索它帶來的好處，如果其中有任何缺失或您不需要的東西，盡管進行相應修改。
