隨著互聯(lián)網(wǎng)產(chǎn)業(yè)的爆炸式增長(zhǎng)，與之伴生的 Web 前端技術(shù)也在歷經(jīng)洗禮和蛻變。尤其是近幾年隨著移動(dòng)終端的發(fā)展，越來(lái)越多的人開(kāi)始投身或轉(zhuǎn)行至新領(lǐng)域，這更為當(dāng)今的 IT 產(chǎn)業(yè)注入了新的活力。盡管 Web 前端技術(shù)誕生至今時(shí)日并不長(zhǎng)，但隨著 Web 技術(shù)的逐漸深入，今后將會(huì)在以下幾方面發(fā)力。
　　1.Web 移動(dòng)終端開(kāi)發(fā)。
　　2.JavaScript 的兄弟們。
　　3. 百花齊放的類庫(kù)和框架。
　　4. 工程化的 Web 前端開(kāi)發(fā)規(guī)范。
　　Web 移動(dòng)終端開(kāi)發(fā)
　　PhoneGap：一個(gè)開(kāi)源的開(kāi)發(fā)框架，使用 HTML、CSS 和 JavaScript 來(lái)構(gòu)建跨平臺(tái)的移動(dòng)應(yīng)用程序。它使開(kāi)發(fā)者能夠利用 iPhone、Android、Palm、Symbian、BlackBerry、WindowsPhone 和 Bada 等智能手機(jī)的核心功能，包括地理定位、加速器、聯(lián)系人、聲音和振動(dòng)等。除了在本地編譯應(yīng)用之外，還可以使用 PhoneGap 提供的云端 Build 工具進(jìn)行應(yīng)用編譯。也就是說(shuō)，只需要將用 HTML5 寫好的應(yīng)用上傳到 PhoneGap 的云端服務(wù)器，PhoneGapBuild 即可將其編譯成適合不同平臺(tái)的應(yīng)用。
　　前端知識(shí)圖譜 
　　SenchaTouch：說(shuō)到這里，就不得不提一些面向移動(dòng)端的 WebUI 庫(kù)，畢竟 PhoneGap 是一個(gè)工具，要想基于 Web 技術(shù)構(gòu)建完整的 App，必須選擇一些適用的移動(dòng) UI 庫(kù)。而最值得一提的是 SenchaTouch，它可以讓 WebApp 看起來(lái)像 NativeApp。美麗的用戶界面組件和豐富的數(shù)據(jù)管理，全部基于最新的 HTML5 和 CSS3 的 Web 標(biāo)準(zhǔn)，全面兼容 Android 和 iOS 設(shè)備。PhoneGap 昭示著一種開(kāi)發(fā)趨勢(shì)，即 App 也可以使用 Web 前端技術(shù)來(lái)完成。而作為開(kāi)發(fā)者最常用的 UI 工具箱，SenchaTouch 又進(jìn)一步加速了這種趨勢(shì)，目前在淘寶已有大量的項(xiàng)目采用這種思路來(lái)搭建，即在內(nèi)置應(yīng)用的外殼加上自定義的基于移動(dòng) Web 的 UI 庫(kù)。相信在未來(lái)這種模式必會(huì)越來(lái)越流行。
　　MediaQueries：在 CSS2 時(shí)代，如果你曾經(jīng)為網(wǎng)站設(shè)計(jì)過(guò)打印版 CSS，那么就會(huì)明白 CSS3MediaQueries 的作用。不過(guò)，CSS3 的 MediaQueries 比 CSS2 的 Media
　　Type 更實(shí)用，因?yàn)?nbsp;CSS2 的 MediaType 并不曾被多少設(shè)備支持過(guò)。CSS3 的 Media
　　Queries 可以獲取這些數(shù)據(jù)：瀏覽器窗口的寬和高、設(shè)備的寬和高、設(shè)備的手持方向（橫向還是豎向）和分辨率等。也就是說(shuō)，MediaQueries 提供了一種基于不同的平臺(tái)寫 CSS 的技術(shù)。這項(xiàng)技術(shù)在 2011 年初被推廣開(kāi)來(lái)，至今已非?；馃?，尤其是在 Web 頁(yè)面仍占互聯(lián)網(wǎng)流量大多數(shù)的今天，這種兼容技術(shù)能很快讓網(wǎng)站兼容移動(dòng)設(shè)備，保證產(chǎn)品實(shí)現(xiàn)最快的跨平臺(tái)的兼容性和多平臺(tái)的可用性。
　　Zepto.js：一個(gè)專為 MobileWebKit 瀏覽器（如 Safari 和 Chrome）而開(kāi)發(fā)的 JavaScript 框架。它標(biāo)榜自己簡(jiǎn)約的開(kāi)發(fā)理念能夠幫助開(kāi)發(fā)人員簡(jiǎn)單、快速地完成開(kāi)發(fā)交付任務(wù)。更重要的是這個(gè) JavaScript 框架是超輕量級(jí)的，只有 5KB。Zepto.js 的語(yǔ)法借鑒且兼容 jQuery。目前已有不少網(wǎng)站開(kāi)始基于 Zepto.js 做應(yīng)用，因?yàn)樵趻仐壛?nbsp;IE 瀏覽器的兼容性問(wèn)題后，Web 開(kāi)發(fā)會(huì)變得越來(lái)越純粹，體積更輕巧，編碼也更加愉悅。不可否認(rèn)，隨著移動(dòng)終端開(kāi)發(fā)越來(lái)越流行，Zepto.js 在未來(lái)將會(huì)有更加廣闊的應(yīng)用場(chǎng)景和空間。
　　Bootstrap:Twitter 推出的一個(gè)開(kāi)源的用于前端開(kāi)發(fā)的工具包。它由 MarkOtto 和 JacobThornton 合作開(kāi)發(fā)，是一個(gè) CSS/HTML 框架。Bootstrap 提供了優(yōu)雅的 HTML 和 CSS 規(guī)范，由動(dòng)態(tài) CSS 語(yǔ)言 LESS 寫成，與 CSS 框架 Blueprint 存在很多相似之處。Bootstrap 一經(jīng)推出便頗受歡迎，一直是 GitHub 上的熱門開(kāi)源項(xiàng)目，NASA 和 MSNBC 的 BreakingNews 都使用了該項(xiàng)目。2012 年第二季度，Bootstrap 發(fā)布了 2.0 版，Bootstrap2.0 的一個(gè)重大改進(jìn)是添加了響應(yīng)設(shè)計(jì)特性，在 1.0 中，這是讓很多開(kāi)發(fā)人員抱怨的地方。而且為了提供更好的針對(duì)移動(dòng)設(shè)備的響應(yīng)式設(shè)計(jì)方案，Bootstrap2.0 采用了更為靈活的 12 欄網(wǎng)格布局。此外，它還更新了一些進(jìn)度欄及可定制的圖片縮略圖，并增加了一些新樣式。值得關(guān)注的是，Bootstrap 是一個(gè)非常輕量級(jí)的框架，2.0 在壓縮后只有 10KB。Bootstrap 為我們的網(wǎng)站快速搭建提供了不錯(cuò)的工具和思路，這個(gè)工具集將擁有更旺盛的生命力。
　　JavaScript 的兄弟們
　　CoffeeScript 是一個(gè)借鑒 Ruby 編寫的新編程語(yǔ)言，創(chuàng)建者 JeremyAshkenas 戲稱它是 JavaScript 的低調(diào)的小兄弟，因?yàn)?nbsp;CoffeeScript 會(huì)將 Ruby 編譯成 JavaScript，而且大部分結(jié)構(gòu)都相似。但不同的是，CoffeeScript 擁有更嚴(yán)格的語(yǔ)法。它的最大功績(jī)就是將 JavaScript 硬綁的 C/Java 語(yǔ)法拋棄了，改為采用類似 Ruby/Python 的語(yǔ)法。Ruby/Python 本來(lái)就是深受 Lisp 影響的，與 JavaScript 算是同門師兄，它們的語(yǔ)法經(jīng)過(guò)了實(shí)踐考驗(yàn)，非常適合函數(shù)式編程。這種優(yōu)雅的語(yǔ)言獨(dú)具魅力，即將面世的 2013 版的淘寶首頁(yè)即采用了 CoffeeScript 實(shí)現(xiàn)。
　　TypeScript 是微軟開(kāi)發(fā)的 JavaScript 的超集，TypeScript 兼容 JavaScript，可以載入 JavaScript 代碼然后運(yùn)行。與 JavaScript 相比，TypeScript 進(jìn)步的地方在于：加入注釋，讓編譯器理解所支持的對(duì)象和函數(shù)，編譯器會(huì)移除注釋，不會(huì)增加開(kāi)銷；增加一個(gè)完整的類結(jié)構(gòu)，使之更像是傳統(tǒng)的面向?qū)ο笳Z(yǔ)言。由于 JavaScript 只是一個(gè)腳本語(yǔ)言，并非用于開(kāi)發(fā)大型 Web 應(yīng)用，所以沒(méi)有提供類和模塊的概念。而 TypeScript 擴(kuò)展了 JavaScript 實(shí)現(xiàn)了這些特性，能更好地支持大規(guī)模 JavaScript 應(yīng)用開(kāi)發(fā)，吸引了不開(kāi)發(fā)者。但要注意，雖然 TypeScript 有微軟做后盾看起來(lái)很有保證，但目前提供的只是早期的預(yù)覽版本，TypeScript 并不像它的網(wǎng)站看起來(lái)那樣精美，最終版本可能會(huì)在一年后 ECMAScript6 發(fā)布會(huì)確定，現(xiàn)在的版本只是個(gè)開(kāi)發(fā)預(yù)覽版。因此，TypeScript 今后發(fā)展如何，還需要進(jìn)一步觀察。
　　此外，在服務(wù)器端，Node.js 越來(lái)越流行。如今 Node.js 不僅作為處理高并發(fā)請(qǐng)求的中間層解決方案，還因其靈活的語(yǔ)法和豐富的底層 API，越來(lái)越多的人開(kāi)始用它來(lái)寫工具，尤其是之前基于 Ant 或者 Java 的一些工具如今都有了 Node.js 的版本。
　　如此看來(lái)，Node.js 在命令行工具領(lǐng)域有著更加廣闊的應(yīng)用場(chǎng)景，甚至可以代替 Perl 或者 Ruby 這些傳統(tǒng)的動(dòng)態(tài)語(yǔ)言。在淘寶 Node.js 已有非常多的應(yīng)用場(chǎng)景，例如在數(shù)據(jù)部門，Node.js 被用作處理高并發(fā)場(chǎng)景下的容池，專門吸收高并發(fā)的請(qǐng)求，甚至能夠保持和客戶端的長(zhǎng)鏈接，而這在之前則需要花費(fèi)很高昂的成本，例如 Comet 技術(shù)等。此外，淘寶的開(kāi)源前端類庫(kù) KISSY 也可以直接運(yùn)行于 Node.js 環(huán)境，這樣就可以在命令行運(yùn)行 KISSY 代碼，很多前端代碼就有機(jī)會(huì)采用自動(dòng)化測(cè)試等，提高生產(chǎn)效率。再者，淘寶內(nèi)部的開(kāi)發(fā)工具鏈也已大部分采用 Node.js 來(lái)構(gòu)建了。
　　百花齊放的類庫(kù)和框架 
　　SeaJS 是由支付寶前端高級(jí)技術(shù)專家王保平（玉伯）開(kāi)發(fā)的一個(gè)遵循 CMD 規(guī)范的模塊加載框架，可用來(lái)輕松愉悅地加載任意 JavaScript 模塊和 CSS 模塊。SeaJS 非常小巧，小巧在于其壓縮后體積只有 4KB，而且接口和方法也非常少。SeaJS 有兩個(gè)核心：模塊的定義和模塊的加載。SeaJS 可以加載任意 JavaScript 模塊和 CSS 模塊，能保證你在使用一個(gè)模塊時(shí)，已將所依賴的其他模塊載入腳本運(yùn)行環(huán)境中。SeaJS 可以讓你享受寫代碼的樂(lè)趣，不用去管那些加載的問(wèn)題。畢竟現(xiàn)在網(wǎng)頁(yè)的可維護(hù)性和性能問(wèn)題一樣嚴(yán)峻，體現(xiàn)在：文件太多，不利于維護(hù)，前端后端都一樣；HTTP 請(qǐng)求過(guò)多，當(dāng)然這個(gè)可以通過(guò)合并解決，但如果沒(méi)有后端直接合并，那么人工成本會(huì)非常大。用 SeaJS 就能非常好地解決這些問(wèn)題。SeaJS 遵循 CMD 規(guī)范，因此可以很方便地書(shū)寫模塊。目前已經(jīng)有越來(lái)越多的人采用 CMD 規(guī)范來(lái)開(kāi)發(fā)項(xiàng)目了。
　　最近微軟已經(jīng)正式發(fā)布了 Windows8 操作系統(tǒng)，Windows 操作系統(tǒng)的風(fēng)格已經(jīng)完全變成了磁貼狀的 MetroUI。對(duì)于微軟來(lái)說(shuō)，這是一個(gè)巨大的改變，而且所有微軟的平臺(tái)包括桌面、平板、移動(dòng)端及其網(wǎng)站都使用這個(gè) UI 風(fēng)格。
　　MetroUICSS 是一個(gè)非常完整的創(chuàng)建 Metro 風(fēng)格的網(wǎng)站框架。它自成體系，但也可以與其他框架一起使用。使用 LESS 創(chuàng)建，并且擁有網(wǎng)格系統(tǒng)、排版樣式、表格、按鈕和圖片。同時(shí)也擁有內(nèi)建的 JavaScript 組件，幫助你生成片狀、菜單、邊欄、進(jìn)度條和提示等，是一個(gè)非常好用的框架。隨著 Windows8 的進(jìn)一步流行，這種風(fēng)格的 CSS 類庫(kù)一定會(huì)成為一種趨勢(shì)。
　　Hype 是一個(gè)小巧的工具，是 MacAppStore 新上架的一個(gè) HTML5 創(chuàng)作工具，其長(zhǎng)處是可以在網(wǎng)頁(yè)上做出悅目的動(dòng)畫效果，無(wú)須 Flash 插件。開(kāi)發(fā)該應(yīng)用的公司 Tumult 由兩個(gè)前蘋果工程師創(chuàng)建，并獲得了 YCombinator 的投資。由于公司的聯(lián)合創(chuàng)始人之一 JonathanDeutsch 曾擔(dān)任 Mail.app 后端的技術(shù)主管，因此他在接受 PaulHontz 的 TheStartupFoundry 訪談時(shí)，談到公司創(chuàng)始是為了解決 HTML5 創(chuàng)作工具缺乏的問(wèn)題?？梢哉f(shuō)，Hype 是第一個(gè)可用的創(chuàng)作 HTML5 產(chǎn)品的可視化工具，具有里程碑式的意義。隨著硬件性能提升，HTML5 的應(yīng)用程序更加傾向于被工具生成，而不像傳統(tǒng)意義上由工程師 " 切 " 出來(lái)。因此工具化是一個(gè)方向，不管 HTML5 是否真的能在移動(dòng)終端扎下腳跟，這種方向是值得堅(jiān)持的。畢竟，HTML5 的應(yīng)用開(kāi)發(fā)現(xiàn)在還處于原始社會(huì)。
　　iScroll.js 是使用原生 JavaScript 編寫的一個(gè)模擬滾動(dòng)效果的小類庫(kù)，不依賴于任何 JavaScript 框架。旨在解決移動(dòng) WebKit 系瀏覽器的區(qū)域滾動(dòng)問(wèn)題，兼容 MobileSafari、Android 默認(rèn)瀏覽器、Safari、Chrome、Firefox5+、Opera11+、IE9+ 及其他 WebKit 核心瀏覽器。最新版本為 iScroll4。這個(gè)小庫(kù)一問(wèn)世就備受關(guān)注，因?yàn)樗粌H可以在 PC 端完美模擬滾動(dòng)效果，在移動(dòng)終端里對(duì)觸屏事件的支持也堪稱完美。
　　iScroll4 是 2011 年底問(wèn)世的，2012 年在移動(dòng)終端產(chǎn)品開(kāi)發(fā)中大放異彩，在淘寶的諸多產(chǎn)品中都用到了這個(gè) JavaScript 庫(kù)。iScroll 是小而精的經(jīng)典作品，名字也帶著蘋果范兒。但美中不足的是，只能使用 ID 調(diào)用。不過(guò)這個(gè)小特性不是什么大問(wèn)題，可以通過(guò)二次封裝來(lái)解決。期待 iScroll4 在移動(dòng)終端里有更多精彩的表現(xiàn)。
　　前端 MVC 在 2011 年是比較火的話題，隨著越來(lái)越多的人開(kāi)始嘗試使用諸如 JavaScriptMVC 和 Backbone.js 這些 MVC 類庫(kù)，更多的產(chǎn)品也看起來(lái)更像 " 軟件 " 而非 " 網(wǎng)頁(yè) "。但由于前端環(huán)境的復(fù)雜性，我們也漸漸發(fā)現(xiàn) " 這種 "MVC 并非完美，只能應(yīng)用于 " 基于數(shù)據(jù)驅(qū)動(dòng) " 的場(chǎng)景，而對(duì) " 基于事件驅(qū)動(dòng) " 的場(chǎng)景卻沒(méi)有太好的解決辦法。目前，淘寶有很多產(chǎn)品在嘗試使用 " 有限自動(dòng)機(jī) " 來(lái)彌補(bǔ) MVC 在這方面的不足。因此，新場(chǎng)景下的 MVC 還需要更深入的提煉。
　　工程化的 Web 前端開(kāi)發(fā)規(guī)范 
　　2012 年，關(guān)于前端開(kāi)發(fā)編碼規(guī)范的討論愈來(lái)愈多。國(guó)外和國(guó)內(nèi)的頂尖開(kāi)發(fā)者幾乎同時(shí)對(duì)編碼規(guī)范產(chǎn)生了很大興趣，前 Yahoo! 首頁(yè)首席前端工程師 N.C.Zakas 在他那本《高可維護(hù)的 JavaScript》書(shū)中也提到規(guī)范在團(tuán)隊(duì)協(xié)作過(guò)程中的重要性。而如下這兩個(gè)方面，是值得我們探討和深思的。
　　AMD 與 CMD 規(guī)范之爭(zhēng)，隨著 CommonJS 的進(jìn)一步普及，CommonJS 規(guī)范在標(biāo)準(zhǔn)的模塊開(kāi)發(fā)領(lǐng)域發(fā)揮著越來(lái)越重要的作用，而 CommonJS 在瀏覽器端的難以實(shí)現(xiàn)卻為這份規(guī)范增添了一絲變數(shù)。本質(zhì)上講，CommonJS 是一種用于同步加載 JavaScript 代碼的 API 規(guī)范，非常簡(jiǎn)單優(yōu)雅。為了在瀏覽器端實(shí)現(xiàn)這種機(jī)制，則不得不加入了一層異步回調(diào)，這便是 AMD（Modules/Asynchronous-Definition）。RequireJS 實(shí)現(xiàn)了這個(gè)規(guī)范，而 Dojo 也將馬上完全支持（Dojo1.6）。規(guī)范本身非常簡(jiǎn)單，甚至只包含了一個(gè) API。玉伯在開(kāi)發(fā) SeaJS 的過(guò)程中，更多地保持了 CommonJSModules 規(guī)范的風(fēng)格，即 CMD（CommonModuleDefinition）。較之 AMD，CMD 沒(méi)有采用單一的 API 來(lái)適用于多個(gè)功能，而是根據(jù)不同功能定義不同的 API。我認(rèn)為，兩者在完備性上是基本一致的，但在社區(qū)理念和編程風(fēng)格上有所差異，開(kāi)發(fā)者可以根據(jù)自己的偏好來(lái)選擇使用 AMD 還是 CMD 編程風(fēng)格。
　　Java 語(yǔ)言編碼規(guī)范對(duì)于前端開(kāi)發(fā)編程規(guī)范有非常大的影響。在 Zakas 的《高可維護(hù)性 JavaScript》一書(shū)中提到了五種 JavaScript 編程規(guī)范，都和 Java 語(yǔ)言編碼規(guī)范有著類似的淵源：Crockford 編程規(guī)范、jQuery 核心風(fēng)格指南、SproutCore 編程風(fēng)格指南、Google 的 JavaScript 風(fēng)格指南和 Dojo 編程風(fēng)格指南。不管是哪種規(guī)范，都強(qiáng)調(diào)了編碼風(fēng)格一致的重要性，這也可看出，前端團(tuán)隊(duì)開(kāi)發(fā)越來(lái)越看重規(guī)范，JavaScript 的靈活性需要某種程度的限制。
　　總之，通過(guò)上面的闡述，我們可以看到前端技術(shù)的不斷進(jìn)步和推陳出新，也能夠體會(huì)到項(xiàng)目過(guò)程的工程化，解決方案的輕量化，庫(kù)和框架的多元化，知識(shí)結(jié)構(gòu)的體系化，這種趨勢(shì)在今后會(huì)變得越來(lái)越明顯，也昭示著前端技術(shù)的發(fā)展方向。
　　說(shuō)到前端技術(shù)知識(shí)結(jié)構(gòu)的體系化建設(shè)，這是我這些年來(lái)一直都在做的事情，在 2011 年也畫了一張圖來(lái)說(shuō)明我的觀點(diǎn)——前端技術(shù)體系的建設(shè)是一項(xiàng)長(zhǎng)期的任務(wù)。畢竟前端新技術(shù)新知識(shí)層出不窮，對(duì)于經(jīng)典的知識(shí)結(jié)構(gòu)的整理也很有挑戰(zhàn)性，但這項(xiàng)工作終究需要有人去做，為新入道的人指出一個(gè)大致的方向。對(duì)于前端工程師的成長(zhǎng)問(wèn)題，我也寫過(guò)一篇長(zhǎng)文 " 前端開(kāi)發(fā)十日談 "，幫助新人們解惑。
原文地址：http://iphone.myzaker.com/l.php?l=540813b91bc8e05d118b456a