隨著互聯(lián)網(wǎng)行業(yè)的爆發(fā)式增長，與之相伴的網(wǎng)站設(shè)計(jì)Web前端技術(shù)也在經(jīng)歷著洗禮和變革。尤其是近年來，隨著移動(dòng)終端的發(fā)展，越來越多的人開始加入或轉(zhuǎn)向新的領(lǐng)域，為當(dāng)今的IT行業(yè)注入了新的活力。 Web前端技術(shù)雖然誕生時(shí)間不長，但是隨著Web技術(shù)的逐漸深入，未來會(huì)在以下幾個(gè)方面做出努力。

1、Web移動(dòng)端開發(fā)。

2.JavaScript兄弟。

3. 多種類庫和框架。

4.工程Web前端開發(fā)規(guī)范。Web移動(dòng)終端開發(fā)

PhoneGap：一個(gè)使用HTML、CSS 和JavaScript 構(gòu)建跨平臺(tái)移動(dòng)應(yīng)用程序的開源開發(fā)框架。它使開發(fā)人員能夠利用iPhone、Android、Palm、Symbian、BlackBerry、WindowsPhone 和Bada 等智能手機(jī)的核心功能，包括地理定位、加速器、聯(lián)系人、聲音和振動(dòng)。除了在本地編譯應(yīng)用，還可以使用PhoneGap提供的Cloud Build工具來編譯應(yīng)用。也就是說，你只需要將用HTML5編寫的應(yīng)用程序上傳到PhoneGap云服務(wù)器，PhoneGapBuild就可以編譯成適用于不同平臺(tái)的應(yīng)用程序。前端知識(shí)圖譜

SenchaTouch：說到這里不得不提一些面向移動(dòng)端的WebUI庫。畢竟，PhoneGap 是一個(gè)工具。如果要構(gòu)建一個(gè)完整的基于Web技術(shù)的App，就必須選擇一些適用的移動(dòng)端UI庫。而最值得一提的是SenchaTouch，它可以讓W(xué)ebApp看起來像NativeApp。漂亮的用戶界面組件和豐富的數(shù)據(jù)管理，全部基于最新的HTML5 和CSS3 網(wǎng)絡(luò)標(biāo)準(zhǔn)，完全兼容Android 和iOS 設(shè)備。 PhoneGap顯示出一個(gè)發(fā)展趨勢(shì)，即App也可以使用Web前端技術(shù)來完成。作為開發(fā)者最常用的UI工具箱，SenchaTouch進(jìn)一步加速了這一趨勢(shì)。目前淘寶上大量的項(xiàng)目都采用了這種思路來構(gòu)建，即添加自定義的移動(dòng)端Web端UI庫。我相信這種模式在未來會(huì)越來越受歡迎。

Sencha Touch：說到這里，不得不提一些面向移動(dòng)端的WebUI庫。畢竟，PhoneGap 是一個(gè)工具。如果要構(gòu)建一個(gè)完整的基于Web技術(shù)的App，就必須選擇一些適用的移動(dòng)端UI庫。而最值得一提的是Sencha Touch，它可以讓W(xué)eb App看起來像Native App。漂亮的用戶界面組件和豐富的數(shù)據(jù)管理，全部基于最新的HTML5 和CSS3 網(wǎng)絡(luò)標(biāo)準(zhǔn)，完全兼容Android 和iOS 設(shè)備。 PhoneGap顯示出一個(gè)發(fā)展趨勢(shì)，即App也可以使用Web前端技術(shù)來完成。作為開發(fā)者最常用的UI工具箱，Sencha Touch進(jìn)一步加速了這一趨勢(shì)。目前淘寶中大量的項(xiàng)目都是采用這種思路構(gòu)建的，即添加自定義的移動(dòng)端Web端UI庫。我相信這種模式在未來會(huì)越來越受歡迎。

Media Queries：在CSS2時(shí)代，如果你曾經(jīng)為網(wǎng)站設(shè)計(jì)過打印CSS，你就會(huì)明白CSS3 Media Queries的作用。但是CSS3的Media Queries比CSS2的Media Queries更能獲取這些數(shù)據(jù)：瀏覽器窗口的寬高、設(shè)備的寬高、設(shè)備的手持方向（水平或垂直）、分辨率。換句話說，Media Queries 提供了一種基于不同平臺(tái)編寫CSS 的技術(shù)。這項(xiàng)技術(shù)從2011年初開始推廣至今一直非常流行，尤其是在網(wǎng)頁仍然占據(jù)互聯(lián)網(wǎng)流量絕大部分的今天。這種兼容技術(shù)可以快速使網(wǎng)站與移動(dòng)設(shè)備兼容，確保最快的跨境平臺(tái)兼容性和多平臺(tái)可用性。

Zepto.js：專門為Safari 和Chrome 等移動(dòng)WebKit 瀏覽器開發(fā)的JavaScript 框架。標(biāo)榜其簡單的開發(fā)理念，可以幫助開發(fā)者簡單快速的完成開發(fā)和交付任務(wù)。更重要的是，這個(gè)JavaScript 框架是超輕量級(jí)的，只有5KB。借鑒了Zepto.js 的語法并與jQuery 兼容。目前很多網(wǎng)站已經(jīng)開始基于Zepto.js做應(yīng)用，因?yàn)樵谵饤壛薎E瀏覽器的兼容性問題后，web開發(fā)會(huì)變得越來越純粹，體量更輕，編碼更愉快。不可否認(rèn)，隨著移動(dòng)端開發(fā)越來越普及，未來Zepto.js將會(huì)有更廣闊的應(yīng)用場(chǎng)景和空間。

Bootstrap: Twitter 推出了一個(gè)用于前端開發(fā)的開源工具包。它由Mark Otto 和Jacob Thornton 共同開發(fā)，是一個(gè)CSS/HTML 框架。 Bootstrap 提供優(yōu)雅的HTML 和CSS 規(guī)范，用動(dòng)態(tài)CSS 語言LESS 編寫，與CSS 框架Blueprint 有很多相似之處。 Bootstrap 自推出以來就非常受歡迎，一直是GitHub、NASA 和MSN 上的熱門開源項(xiàng)目

BC的 Breaking News都使用了該項(xiàng)目。2012年第二季度，Bootstrap發(fā)布了2.0版，Bootstrap 2.0的一個(gè)重大改進(jìn)是添加了響應(yīng)設(shè)計(jì)特性，在1.0中，這是讓很多開發(fā)人員抱怨的地方。而且為了提供更好的針對(duì)移動(dòng)設(shè)備的響應(yīng)式設(shè)計(jì)方 案，Bootstrap 2.0采用了更為靈活的12欄網(wǎng)格布局。此外，它還更新了一些進(jìn)度欄及可定制的圖片縮略圖，并增加了一些新樣式。值得關(guān)注的是，Bootstrap是一個(gè) 非常輕量級(jí)的框架，2.0在壓縮后只有10KB。Bootstrap為我們的網(wǎng)站快速搭建提供了不錯(cuò)的工具和思路，這個(gè)工具集將擁有更旺盛的生命力。

JavaScript的兄弟們

CoffeeScript是一個(gè)借鑒Ruby編寫的新編程語言，創(chuàng)建者JeremyAshkenas戲稱它是JavaScript的低調(diào)的小兄弟，因?yàn)镃offeeScript會(huì)將Ruby編譯成JavaScript，而且大部分結(jié)構(gòu)都相似。但不同的是，CoffeeScript擁有更嚴(yán)格的語法。它的最大功績就是將JavaScript硬綁的C/Java語法拋棄了，改為采用類似Ruby/Python的語法。Ruby/Python本來就是深受Lisp影響的，與JavaScript算是同門師兄，它們的語法經(jīng)過了實(shí)踐考驗(yàn)，非常適合函數(shù)式編程。這種優(yōu)雅的語言獨(dú)具魅力，即將面世的2013版的淘寶首頁即采用了CoffeeScript實(shí)現(xiàn)。

TypeScript是微軟開發(fā)的JavaScript的超集，TypeScript兼容JavaScript，可以載入JavaScript代碼然后運(yùn)行。與JavaScript相比，TypeScript進(jìn)步的地方在于：加入注釋，讓編譯器理解所支持的對(duì)象和函數(shù)，編譯器會(huì)移除注釋，不會(huì)增加開銷；增加一個(gè)完整的類結(jié)構(gòu)，使之更像是傳統(tǒng)的面向?qū)ο笳Z言。由于JavaScript只是一個(gè)腳本語言，并非用于開發(fā)大型Web應(yīng)用，所以沒有提供類和模塊的概念。而TypeScript擴(kuò)展了JavaScript實(shí)現(xiàn)了這些特性，能更好地支持大規(guī)模JavaScript應(yīng)用開發(fā)，吸引了不開發(fā)者。但要注意，雖然TypeScript有微軟做后盾看起來很有保證，但目前提供的只是早期的預(yù)覽版本，TypeScript并不像它的網(wǎng)站看起來那樣精美，最終版本可能會(huì)在一年后ECMAScript6發(fā)布會(huì)確定，現(xiàn)在的版本只是個(gè)開發(fā)預(yù)覽版。因此，TypeScript今后發(fā)展如何，還需要進(jìn)一步觀察。

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

如此看來，Node.js在命令行工具領(lǐng)域有著更加廣闊的應(yīng)用場(chǎng)景，甚至可以代替Perl或者Ruby這些傳統(tǒng)的動(dòng)態(tài)語言。在淘寶Node.js已有非常多的應(yīng)用場(chǎng)景，例如在數(shù)據(jù)部門，Node.js被用作處理高并發(fā)場(chǎng)景下的容池，專門吸收高并發(fā)的請(qǐng)求，甚至能夠保持和客戶端的長鏈接，而這在之前則需要花費(fèi)很高昂的成本，例如Comet技術(shù)等。此外，淘寶的開源前端類庫KISSY也可以直接運(yùn)行于Node.js環(huán)境，這樣就可以在命令行運(yùn)行KISSY代碼，很多前端代碼就有機(jī)會(huì)采用自動(dòng)化測(cè)試等，提高生產(chǎn)效率。再者，淘寶內(nèi)部的開發(fā)工具鏈也已大部分采用Node.js來構(gòu)建了。

百花齊放的類庫和框架
SeaJS是由支付寶前端高級(jí)技術(shù)專家王保平（玉伯）開發(fā)的一個(gè)遵循CMD規(guī)范的模塊加載框架，可用來輕松愉悅地加載任意JavaScript模塊和CSS模塊。SeaJS非常小巧，小巧在于其壓縮后體積只有4KB，而且接口和方法也非常少。SeaJS有兩個(gè)核心：模塊的定義和模塊的加載。SeaJS可以加載任意JavaScript模塊和CSS模塊，能保證你在使用一個(gè)模塊時(shí)，已將所依賴的其他模塊載入腳本運(yùn)行環(huán)境中。SeaJS可以讓你享受寫代碼的樂趣，不用去管那些加載的問題。畢竟現(xiàn)在網(wǎng)頁的可維護(hù)性和性能問題一樣嚴(yán)峻，體現(xiàn)在：文件太多，不利于維護(hù)，前端后端都一樣；HTTP請(qǐng)求過多，當(dāng)然這個(gè)可以通過合并解決，但如果沒有后端直接合并，那么人工成本會(huì)非常大。用SeaJS就能非常好地解決這些問題。SeaJS遵循CMD規(guī)范，因此可以很方便地書寫模塊。目前已經(jīng)有越來越多的人采用CMD規(guī)范來開發(fā)項(xiàng)目了。

最近微軟已經(jīng)正式發(fā)布了Windows8操作系統(tǒng)，Windows操作系統(tǒng)的風(fēng)格已經(jīng)完全變成了磁貼狀的MetroUI。對(duì)于微軟來說，這是一個(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類庫一定會(huì)成為一種趨勢(shì)。

Hype是一個(gè)小巧的工具，是MacAppStore新上架的一個(gè)HTML5創(chuàng)作工具，其長處是可以在網(wǎng)頁上做出悅目的動(dòng)畫效果，無須Flash插件。開發(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)作工具缺乏的問題?？梢哉f，Hype是第一個(gè)可用的創(chuàng)作HTML5產(chǎn)品的可視化工具，具有里程碑式的意義。隨著硬件性能提升，HTML5的應(yīng)用程序更加傾向于被工具生成，而不像傳統(tǒng)意義上由工程師“切”出來。因此工具化是一個(gè)方向，不管HTML5是否真的能在移動(dòng)終端扎下腳跟，這種方向是值得堅(jiān)持的。畢竟，HTML5的應(yīng)用開發(fā)現(xiàn)在還處于原始社會(huì)。

iScroll.js是使用原生JavaScript編寫的一個(gè)模擬滾動(dòng)效果的小類庫，不依賴于任何JavaScript框架。旨在解決移動(dòng)WebKit系瀏覽器的區(qū)域滾動(dòng)問題，兼容MobileSafari、Android默認(rèn)瀏覽器、Safari、Chrome、Firefox5+、Opera11+、IE9+及其他WebKit核心瀏覽器。最新版本為iScroll4。這個(gè)小庫一問世就備受關(guān)注，因?yàn)樗粌H可以在PC端完美模擬滾動(dòng)效果，在移動(dòng)終端里對(duì)觸屏事件的支持也堪稱完美。

iScroll4是2011年底問世的，2012年在移動(dòng)終端產(chǎn)品開發(fā)中大放異彩，在淘寶的諸多產(chǎn)品中都用到了這個(gè)JavaScript庫。iScroll是小而精的經(jīng)典作品，名字也帶著蘋果范兒。但美中不足的是，只能使用ID調(diào)用。不過這個(gè)小特性不是什么大問題，可以通過二次封裝來解決。期待iScroll4在移動(dòng)終端里有更多精彩的表現(xiàn)。

前端MVC在2011年是比較火的話題，隨著越來越多的人開始嘗試使用諸如JavaScriptMVC和Backbone.js這些MVC類庫，更多的產(chǎn)品也看起來更像“軟件”而非“網(wǎng)頁”。但由于前端環(huán)境的復(fù)雜性，我們也漸漸發(fā)現(xiàn)“這種”MVC并非完美，只能應(yīng)用于“基于數(shù)據(jù)驅(qū)動(dòng)”的場(chǎng)景，而對(duì)“基于事件驅(qū)動(dòng)”的場(chǎng)景卻沒有太好的解決辦法。目前，淘寶有很多產(chǎn)品在嘗試使用“有限自動(dòng)機(jī)”來彌補(bǔ)MVC在這方面的不足。因此，新場(chǎng)景下的MVC還需要更深入的提煉。

工程化的Web前端開發(fā)規(guī)范

2012年，關(guān)于前端開發(fā)編碼規(guī)范的討論愈來愈多。國外和國內(nèi)的頂尖開發(fā)者幾乎同時(shí)對(duì)編碼規(guī)范產(chǎn)生了很大興趣，前Yahoo!首頁首席前端工程師N.C.Zakas在他那本《高可維護(hù)的JavaScript》書中也提到規(guī)范在團(tuán)隊(duì)協(xié)作過程中的重要性。而如下這兩個(gè)方面，是值得我們探討和深思的。

AMD與CMD規(guī)范之爭，隨著CommonJS的進(jìn)一步普及，CommonJS規(guī)范在標(biāo)準(zhǔn)的模塊開發(fā)領(lǐng)域發(fā)揮著越來越重要的作用，而CommonJS在瀏覽器端的難以實(shí)現(xiàn)卻為這份規(guī)范增添了一絲變數(shù)。本質(zhì)上講，CommonJS是一種用于同步加載JavaScript代碼的API規(guī)范，非常簡單優(yōu)雅。為了在瀏覽器端實(shí)現(xiàn)這種機(jī)制，則不得不加入了一層異步回調(diào)，這便是AMD（Modules/Asynchronous-Definition）。RequireJS實(shí)現(xiàn)了這個(gè)規(guī)范，而Dojo也將馬上完全支持（Dojo1.6）。規(guī)范本身非常簡單，甚至只包含了一個(gè)API。玉伯在開發(fā)SeaJS的過程中，更多地保持了CommonJSModules規(guī)范的風(fēng)格，即CMD（CommonModuleDefinition）。較之AMD，CMD沒有采用單一的API來適用于多個(gè)功能，而是根據(jù)不同功能定義不同的API。我認(rèn)為，兩者在完備性上是基本一致的，但在社區(qū)理念和編程風(fēng)格上有所差異，開發(fā)者可以根據(jù)自己的偏好來選擇使用AMD還是CMD編程風(fēng)格。

Java語言編碼規(guī)范對(duì)于前端開發(fā)編程規(guī)范有非常大的影響。在Zakas的《高可維護(hù)性JavaScript》一書中提到了五種JavaScript編程規(guī)范，都和Java語言編碼規(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ì)開發(fā)越來越看重規(guī)范，JavaScript的靈活性需要某種程度的限制。

總之，通過上面的闡述，我們可以看到前端技術(shù)的不斷進(jìn)步和推陳出新，也能夠體會(huì)到項(xiàng)目過程的工程化，解決方案的輕量化，庫和框架的多元化，知識(shí)結(jié)構(gòu)的體系化，這種趨勢(shì)在今后會(huì)變得越來越明顯，也昭示著前端技術(shù)的發(fā)展方向。

說到前端技術(shù)知識(shí)結(jié)構(gòu)的體系化建設(shè)，這是我這些年來一直都在做的事情，在2011年也畫了一張圖來說明我的觀點(diǎn)——前端技術(shù)體系的建設(shè)是一項(xiàng)長期的任務(wù)。畢竟前端新技術(shù)新知識(shí)層出不窮，對(duì)于經(jīng)典的知識(shí)結(jié)構(gòu)的整理也很有挑戰(zhàn)性，但這項(xiàng)工作終究需要有人去做，為新入道的人指出一個(gè)大致的方向。對(duì)于前端工程師的成長問題，我也寫過一篇長文“前端開發(fā)十日談”，幫助新人們解惑。

我們專注高端建站，小程序開發(fā)、軟件系統(tǒng)定制開發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開發(fā)、各類API接口對(duì)接開發(fā)等。十余年開發(fā)經(jīng)驗(yàn)，每一個(gè)項(xiàng)目承諾做到滿意為止，多一次對(duì)比，一定讓您多一份收獲！