前端技術

隨着互聯網產業的爆炸式增加，與之伴生的Web前端技術也在歷經洗禮和蛻變。尤爲是近幾年隨着移動終端的發展，愈來愈多的人開始投身或轉行至新領域，這更爲當今的IT產業注入了新的活力。雖然Web前端技術誕生至今時日並不長，但隨着Web技術的逐漸深刻，從此將會在下面幾方面發力。

1. Web移動終端開發。
2. JavaScript的兄弟們。

3. 百花齊放的類庫和框架。
4. project化的Web前端開發規範。

Web移動終端開發

PhoneGap： 一個開源的開發框架，使用HTML、CSS和JavaScript來構建跨平臺的移動應用程序。

它使開發人員能夠利用iPhone、Android、 Palm、Symbian、BlackBerry、Windows Phone和Bada等智能手機的核心功能，包含地理定位、加速器、聯繫人、聲音和振動等。除了在本地編譯應用以外，還可使用PhoneGap提供的雲 端Build工具進行應用編譯。

也就是說，僅僅需要將用HTML5寫好的應用上傳到PhoneGap的雲端server，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從此發展怎樣。還需要進一步觀察。

此外。在server端，Node.js愈來愈流行。如今Node.js不只做爲處理高併發請求的中間層解決方式，還因其靈活的語法和豐富的底層API。愈來愈多 的人開始用它來寫工具。尤爲是以前基於Ant或者Java的一些工具如今都有了Node.js的版本號。

如此看來，Node.js在命令行工具領域有着更加 廣闊的應用場景，甚至可以取代Perl或者Ruby這些傳統的動態語言。

在淘寶Node.js已有很是多的應用場景，好比在數據部門，Node.js被用 做處理高併發場景下的容池，專門吸取高併發的請求，甚至可以保持和client的長連接，而這在以前則需要花費很是高昂的成本，好比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建立，而且擁有網格系統、排版樣式、表格、 button和圖片。同一時候也擁有內建的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的應用程序更加傾向於被工具生成，而不像傳統意義上由project師「切」出來。所以工具化是一個方向，不管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還需要更深刻的提煉。

project化的Web前端開發規範

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

AMD 與CMD規範之爭。隨着CommonJS的進一步普及，CommonJS規範在標準的模塊開發領域發揮着愈來愈關鍵的數據，而CommonJS在瀏覽器端 的難以實現卻爲這份規範增添了一絲變數。本質上講，CommonJS是一種用於同步載入JavaScript代碼的API規範。很easy優雅。爲了在瀏覽器端實現這樣的機制，則不得不增長了一層異步回調。這即是AMD（Modules/Asynchronous-Definition）。RequireJS 實現了這個規範，而Dojo也將當即全然支持（Dojo1.6）。

規範自己很easy。甚至僅僅包括了一個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的靈活性需要某種程度的限制。

總之。經過上面的闡述，咱們能夠看到前端技術的不斷進步和推陳出新，也能夠體會到項目過程的project化，解決方式的輕量化，庫和框架的多元化，知識結構的體系化，這樣的趨勢在從此會變得愈來愈明顯，也昭示着前端技術的發展方向。

說 到前端技術知識結構的體系化建設。這是我這些年來一直都在作的事情，在2011年也畫了一張圖來講明個人觀點——前端技術體系的建設是一項長期的任務。畢 竟前端新技術新知識層出不窮。對於經典的知識結構的整理也很是有挑戰性。但這項工做終究需要有人去作，爲新入道的人指出一個大體的方向。

對於前端project師的成 長問題，我也寫過一篇長文「前端開發十日談」。幫助新人們解惑。

很感謝樸靈，已經將這個知識結構新建了一個開源項目（http://github.com/JacksonTian/fks），也但願你們一塊兒參與進來，爲前端技術知識體系建設作出貢獻。