前端技術

隨著網際網路產業的爆炸式增長，與之伴生的Web前端技術也在歷經洗禮和蛻變。尤其是近幾年隨著移動終端的發展，越來越多的人開始投身或轉行至新領域，這更為當今的IT產業注入了新的活力。儘管Web前端技術誕生至今時日並不長，但隨著Web技術的逐漸深入，今後將會在以下幾方面發力。

1. Web移動終端開發。
2. JavaScript的兄弟們。
3. 百花齊放的類庫和框架。
4. 工程化的Web前端開發規範。

Web移動終端開發

PhoneGap： 一個開源的開發框架，使用HTML、CSS和JavaScript來構建跨平臺的移動應用程式。它使開發者能夠利用iPhone、Android、 Palm、Symbian、BlackBerry、Windows Phone和Bada等智慧手機的核心功能，包括地理定位、加速器、聯絡人、聲音和振動等。除了在本地編譯應用之外，還可以使用PhoneGap提供的雲 端Build工具進行應用編譯。也就是說，只需要將用HTML5寫好的應用上傳到PhoneGap的雲端伺服器，PhoneGap Build即可將其編譯成適合不同平臺的應用。

Sencha Touch：說到這裡，就不得不提一些面向移動端的WebUI庫，畢竟PhoneGap是一個工具，要想基於Web技術構建完整的App，必須選擇一些適 用的移動UI庫。而最值得一提的是Sencha Touch，它可以讓Web App看起來像Native App。美麗的使用者介面元件和豐富的資料管理，全部基於最新的HTML5和CSS3的Web標準，全面相容Android和iOS裝置。PhoneGap 昭示著一種開發趨勢，即App也可以使用Web前端技術來完成。而作為開發者最常用的UI工具箱，Sencha Touch又進一步加速了這種趨勢，目前在淘寶已有大量的專案採用這種思路來搭建，即在內建應用的外殼加上自定義的基於移動Web的UI庫。相信在未來這 種模式必會越來越流行。

Media Queries：在CSS2時代，如果你曾經為網站設計過列印版CSS，那麼就會明白CSS3 Media Queries的作用。不過，CSS3的Media Queries比CSS2的Media Type更實用，因為CSS2 的Media Type並不曾被多少裝置支援過。CSS3的Media Queries可以獲取這些資料：瀏覽器視窗的寬和高、裝置的寬和高、裝置的手持方向（橫向還是豎向）和解析度等。也就是說，Media Queries提供了一種基於不同的平臺寫CSS的技術。這項技術在2011年初被推廣開來，至今已非常火熱，尤其是在Web頁面仍佔網際網路流量大多數的 今天，這種相容技術能很快讓網站相容移動裝置，保證產品實現最快的跨平臺的相容性和多平臺的可用性。

Zepto.js：一個專為 Mobile WebKit瀏覽器（如Safari和Chrome）而開發的JavaScript框架。它標榜自己簡約的開發理念能夠幫助開發人員簡單、快速地完成開發 交付任務。更重要的是這個JavaScript框架是超輕量級的，只有5KB。Zepto.js的語法借鑑且相容jQuery。目前已有不少網站開始基於 Zepto.js做應用，因為在拋棄了IE瀏覽器的相容性問題後，Web開發會變得越來越純粹，體積更輕巧，編碼也更加愉悅。不可否認，隨著移動終端開發 越來越流行，Zepto.js在未來將會有更加廣闊的應用場景和空間。

Bootstrap：Twitter推出的一個開源的用於前端開發的工具包。它由Mark Otto和Jacob Thornton合作開發，是一個CSS/HTML框架。Bootstrap提供了優雅的HTML和CSS規範，由動態CSS語言LESS寫成，與CSS 框架Blueprint存在很多相似之處。Bootstrap一經推出便頗受歡迎，一直是GitHub上的熱門開源專案，NASA和MSNBC的 Breaking News都使用了該專案。2012年第二季度，Bootstrap釋出了2.0版，Bootstrap 2.0的一個重大改進是新增了響應設計特性，在1.0中，這是讓很多開發人員抱怨的地方。而且為了提供更好的針對移動裝置的響應式設計方 案，Bootstrap 2.0採用了更為靈活的12欄網格佈局。此外，它還更新了一些進度欄及可定製的圖片縮圖，並增加了一些新樣式。值得關注的是，Bootstrap是一個 非常輕量級的框架，2.0在壓縮後只有10KB。Bootstrap為我們的網站快速搭建提供了不錯的工具和思路，這個工具集將擁有更旺盛的生命力。

JavaScript的兄弟們

CoffeeScript 是一個借鑑Ruby編寫的新程式語言，建立者Jeremy Ashkenas戲稱它是JavaScript的低調的小兄弟，因為CoffeeScript會將Ruby編譯成JavaScript，而且大部分結構都 相似。但不同的是，CoffeeScript擁有更嚴格的語法。它的最大功績就是將JavaScript硬綁的C/Java語法拋棄了，改為採用類似 Ruby/Python的語法。Ruby/Python本來就是深受Lisp影響的，與JavaScript算是同門師兄，它們的語法經過了實踐考驗，非 常適合函數語言程式設計。這種優雅的語言獨具魅力，即將面世的2013版的淘寶首頁即採用了CoffeeScript實現。

TypeScript 是微軟開發的JavaScript的超集，TypeScript相容JavaScript，可以載入JavaScript程式碼然後執行。與 JavaScript相比，TypeScript進步的地方在於：加入註釋，讓編譯器理解所支援的物件和函式，編譯器會移除註釋，不會增加開銷；增加一個 完整的類結構，使之更像是傳統的面嚮物件語言。由於JavaScript只是一個指令碼語言，並非用於開發大型Web應用，所以沒有提供類和模組的概念。而 TypeScript擴充套件了JavaScript實現了這些特性，能更好地支援大規模JavaScript應用開發，吸引了不開發者。但要注意，雖然 TypeScript有微軟做後盾看起來很有保證，但目前提供的只是早期的預覽版本，TypeScript並不像它的網站看起來那樣精美，最終版本可能會 在一年後ECMAScript 6釋出會確定，現在的版本只是個開發預覽版。因此，TypeScript今後發展如何，還需要進一步觀察。

此外，在伺服器端，Node.js越來越流行。如今Node.js不僅作為處理高併發請求的中間層解決方案，還因其靈活的語法和豐富的底層API，越來越多 的人開始用它來寫工具，尤其是之前基於Ant或者Java的一些工具如今都有了Node.js的版本。

如此看來，Node.js在命令列工具領域有著更加 廣闊的應用場景，甚至可以代替Perl或者Ruby這些傳統的動態語言。在淘寶Node.js已有非常多的應用場景，例如在資料部門，Node.js被用 作處理高併發場景下的容池，專門吸收高併發的請求，甚至能夠保持和客戶端的長連結，而這在之前則需要花費很高昂的成本，例如Comet技術等。此外，淘寶 的開源前端類庫KISSY也可以直接執行於Node.js環境，這樣就可以在命令列執行KISSY程式碼，很多前端程式碼就有機會採用自動化測試等，提高生產 效率。再者，淘寶內部的開發工具鏈也已大部分採用Node.js來構建了。

百花齊放的類庫和框架

SeaJS是由支付寶前端高階技術專家王保平（玉伯）開發的一個遵循CMD規範的模組載入框架，可用來輕鬆愉悅地載入任意JavaScript模組和CSS模組。 SeaJS非常小巧，小巧在於其壓縮後體積只有4KB，而且介面和方法也非常少。SeaJS有兩個核心：模組的定義和模組的載入。SeaJS可以載入任意 JavaScript模組和CSS模組，能保證你在使用一個模組時，已將所依賴的其他模組載入指令碼執行環境中。SeaJS可以讓你享受寫程式碼的樂趣，不用 去管那些載入的問題。畢竟現在網頁的可維護性和效能問題一樣嚴峻，體現在：檔案太多，不利於維護，前端後端都一樣；HTTP請求過多，當然這個可以通過合 並解決，但如果沒有後端直接合並，那麼人工成本會非常大。用SeaJS就能非常好地解決這些問題。SeaJS遵循CMD規範，因此可以很方便地書寫模組。 目前已經有越來越多的人採用CMD規範來開發專案了。

最近微軟已經正式釋出了Windows 8作業系統，Windows作業系統的風格已經完全變成了磁貼狀的Metro UI。對於微軟來說，這是一個巨大的改變，而且所有微軟的平臺包括桌面、平板、移動端及其網站都使用這個UI風格。Metro UI CSS是一個非常完整的建立Metro風格的網站框架。它自成體系，但也可以與其他框架一起使用。使用LESS建立，並且擁有網格系統、排版樣式、表格、 按鈕和圖片。同時也擁有內建的JavaScript元件，幫助你生成片狀、選單、邊欄、進度條和提示等，是一個非常好用的框架。隨著Windows 8的進一步流行，這種風格的CSS類庫一定會成為一種趨勢。

Hype是一個小巧的工具，是Mac App Store新上架的一個HTML5創作工具，其長處是可以在網頁上做出悅目的動畫效果，無須Flash外掛。開發該應用的公司Tumult由兩個前蘋果工 程師建立，並獲得了Y Combinator的投資。由於公司的聯合創始人之一Jonathan Deutsch曾擔任Mail.app後端的技術主管，因此他在接受Paul Hontz的The Startup Foundry訪談時，談到公司創始是為了解決HTML5創作工具缺乏的問題。可以說，Hype是第一個可用的創作HTML5產品的視覺化工具，具有里程 碑式的意義。隨著硬體效能提升，HTML5的應用程式更加傾向於被工具生成，而不像傳統意義上由工程師“切”出來。因此工具化是一個方向，不管HTML5 是否真的能在移動終端紮下腳跟，這種方向是值得堅持的。畢竟，HTML5的應用開發現在還處於原始社會。

iScroll.js是使用原生 JavaScript編寫的一個模擬滾動效果的小類庫，不依賴於任何JavaScript框架。旨在解決移動WebKit系瀏覽器的區域滾動問題，相容 Mobile Safari、Android預設瀏覽器、Safari、Chrome、Firefox5+、Opera11+、IE9+及其他WebKit核心瀏覽器。 最新版本為iScroll4。這個小庫一問世就備受關注，因為它不僅可以在PC端完美模擬滾動效果，在移動終端裡對觸屏事件的支援也堪稱完美。

iScroll4 是2011年底問世的，2012年在移動終端產品開發中大放異彩，在淘寶的諸多產品中都用到了這個JavaScript庫。iScroll是小而精的經典 作品，名字也帶著蘋果範兒。但美中不足的是，只能使用ID呼叫。不過這個小特性不是什麼大問題，可以通過二次封裝來解決。期待iScroll4在移動終端 裡有更多精彩的表現。

前端MVC在2011年是比較火的話題，隨著越來越多的人開始嘗試使用諸如JavaScript MVC和Backbone.js這些MVC類庫，更多的產品也看起來更像“軟體”而非“網頁”。但由於前端環境的複雜性，我們也漸漸發現“這種”MVC並 非完美，只能應用於“基於資料驅動”的場景，而對“基於事件驅動”的場景卻沒有太好的解決辦法。目前，淘寶有很多產品在嘗試使用“有限自動機”來彌補 MVC在這方面的不足。因此，新場景下的MVC還需要更深入的提煉。

工程化的Web前端開發規範

2012 年，關於前端開發編碼規範的討論愈來愈多。國外和國內的頂尖開發者幾乎同時對編碼規範產生了很大興趣，前Yahoo!首頁首席前端工程師N.C. Zakas在他那本《高可維護的JavaScript》書中也提到規範在團隊協作過程中的重要性。而如下這兩個方面，是值得我們探討和深思的。

AMD 與CMD規範之爭，隨著CommonJS的進一步普及，CommonJS規範在標準的模組開發領域發揮著越來越重要的作用，而CommonJS在瀏覽器端 的難以實現卻為這份規範增添了一絲變數。本質上講，CommonJS是一種用於同步載入JavaScript程式碼的API規範，非常簡單優雅。為了在瀏覽器端實現這種機制，則不得不加入了一層非同步回撥，這便是AMD（Modules/Asynchronous-Definition）。RequireJS 實現了這個規範，而Dojo也將馬上完全支援（Dojo1.6）。規範本身非常簡單，甚至只包含了一個API。玉伯在開發SeaJS的過程中，更多地保持 了CommonJS Modules規範的風格，即CMD（Common Module Definition）。較之AMD，CMD沒有采用單一的API來適用於多個功能，而是根據不同功能定義不同的API。我認為，兩者在完備性上是基本一 致的，但在社群理念和程式設計風格上有所差異，開發者可以根據自己的偏好來選擇使用AMD還是CMD程式設計風格。

Java語言編碼 規範對於前端開發程式設計規範有非常大的影響。在Zakas的《高可維護性JavaScript》一書中提到了五種JavaScript程式設計規範，都和 Java語言編碼規範有著類似的淵源：Crockford程式設計規範、 jQuery核心風格指南、SproutCore程式設計風格指南、Google的JavaScript風格指南和Dojo程式設計風格指南。不管是哪種規範，都 強調了編碼風格一致的重要性，這也可看出，前端團隊開發越來越看重規範，JavaScript的靈活性需要某種程度的限制。

總之，通過上面的闡述，我們可以看到前端技術的不斷進步和推陳出新，也能夠體會到專案過程的工程化，解決方案的輕量化，庫和框架的多元化，知識結構的體系化，這種趨勢在今後會變得越來越明顯，也昭示著前端技術的發展方向。

說 到前端技術知識結構的體系化建設，這是我這些年來一直都在做的事情，在2011年也畫了一張圖來說明我的觀點——前端技術體系的建設是一項長期的任務。畢 竟前端新技術新知識層出不窮，對於經典的知識結構的整理也很有挑戰性，但這項工作終究需要有人去做，為新入道的人指出一個大致的方向。對於前端工程師的成 長問題，我也寫過一篇長文“前端開發十日談”，幫助新人們解惑。

非常感謝樸靈，已經將這個知識結構新建了一個開源專案（http://github.com/JacksonTian/fks），也希望大家一起參與進來，為前端技術知識體系建設做出貢獻。