隨著互聯(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，它可以讓W(xué)ebApp看起來(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)越流行。
Sencha Touch：說(shuō)到這里，就不得不提一些面向移動(dòng)端的WebUI庫(kù)，畢竟PhoneGap是一個(gè)工具，要想基于Web技術(shù)構(gòu)建完整的App，必須選擇一些適 用的移動(dòng)UI庫(kù)。而最值得一提的是Sencha Touch，它可以讓W(xué)eb App看起來(lái)像Native App。美麗的用戶界面組件和豐富的數(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工具箱，Sencha Touch又進(jìn)一步加速了這種趨勢(shì)，目前在淘寶已有大量的項(xiàng)目采用這種思路來(lái)搭建，即在內(nèi)置應(yīng)用的外殼加上自定義的基于移動(dòng)Web的UI庫(kù)。相信在未來(lái)這 種模式必會(huì)越來(lái)越流行。
Media Queries：在CSS2時(shí)代，如果你曾經(jīng)為網(wǎng)站設(shè)計(jì)過(guò)打印版CSS，那么就會(huì)明白CSS3 Media Queries的作用。不過(guò)，CSS3的Media Queries比CSS2的Media Queries可以獲取這些數(shù)據(jù)：瀏覽器窗口的寬和高、設(shè)備的寬和高、設(shè)備的手持方向（橫向還是豎向）和分辨率等。也就是說(shuō)，Media Queries提供了一種基于不同的平臺(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è)專為 Mobile WebKit瀏覽器（如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)樵趻仐壛薎E瀏覽器的兼容性問(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ā)的工具包。它由Mark Otto和Jacob Thornton合作開(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的 Breaking News都使用了該項(xiàng)目。2012年第二季度，Bootstrap發(fā)布了2.0版，Bootstrap 2.0的一個(gè)重大改進(jìn)是添加了響應(yīng)設(shè)計(jì)特性，在1.0中，這是讓很多開(kāi)發(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編寫的新編程語(yǔ)言，創(chuàng)建者JeremyAshkenas戲稱它是JavaScript的低調(diào)的小兄弟，因?yàn)镃offeeScript會(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)一步觀察。
上一條：
分享針對(duì)關(guān)鍵詞做網(wǎng)站頁(yè)面優(yōu)化的方法下一條：
長(zhǎng)沙做網(wǎng)站：如何獲得網(wǎng)站流量
湘公網(wǎng)安備 43010302001803號(hào)