20個將 JavaScript 用到極致的網站

瀏覽器正變得越來越強大，上面有各種豐富的功能可以供開發者選擇，一些在幾年前幾乎難以想象的功能都已經一一實現。有了這些新功能，開發者現在能夠開發出 更精細、更複雜、更有想象力的用戶界面了。這為網站開發掃清了障礙，網站能夠擁有讓人驚喜的用戶界面了。那些喜歡冒險體驗前沿技術的開發者現在應該會非常 開心。

有時候，這種技術的運用是非常精妙的，它無聲無息地改變了應用的用戶體驗。有時結果就像是加入櫻桃可樂中的跳跳糖，悄悄地給人們帶來驚喜。

Web開發者Phil Hawksworth在這篇文章中總結了Web上經典的JavaScript用法。這裡有20個特別突出的網站，他們在定位、技巧或者是JavaScript的使用上有各自的獨到之處。

一、演示網站

先看一些有趣的東西。這些網站利用JavaScript將Canvas、WebGL、CSS3和HTML5元素這些瀏覽器技術融合在了一起。通常 這些技術只是用來取悅用戶，或是在現代的瀏覽器中顯示一些新的功能。雖然大多數的功能都很不錯，但有些會佔用大量的處理器或是顯卡資源，所以筆記本電腦用 戶常常需要關注他們的筆記本溫度，以免溫度過高而出現異常。

1. Baroque.me

Baroque.me是一個簡單，但是能夠催眠的網站，它就用到了HTML5 Canvas元素，並使用JavaScript巧妙地控制了一個簡單的虛擬巴赫大提琴設備的渲染工作。網站的聲音是由Flash提供的，並且使用 JavaScript控制。你可以控制頁面上那些跳動的圓點，但是卻很難控制大提琴的時間節奏。

它的開發者Alexander Chen來自Google Creative Labs，也參與了非常受歡迎的Les Paul Google Doodle開發，在早些時候，還開發了一個非常棒的可視化NY地鐵系統。

2. Beercamp

Beercamp 2011的界面非常有趣，可以自由縮放，它非常巧妙地使用了CSS3和JavaScript技術，這一點吸引了許多人的關注。網站大量採用了CSS3轉換和變形效果，你還會發現它劫持了瀏覽器的滾動事件用來控制網頁的縮放效果。今年的早些時候David DeSandro曾分享了相關效果實現的技術細節。

3. Three.js

Canvas和WebGL這些技術為瀏覽器帶來了強大的渲染功能。Mr. Doob開發的Three.js項目是一個3D JavaScript引擎，能夠利用瀏覽器上的這些新功能渲染頁面。下面是一個利用Three.js渲染動畫或是3D模型的例子。

4. Windows Phone Demo

最新消息：web將覆蓋移動設備！老實說，這個消息確實對使用JavaScript技術的移動市場來說是一個好消息。這還只是推動移動市場發展的第一步。

為了演示新的Windows移動設備界面，Microsoft開發了一個Windows mobile上的演示示例。用戶確實能夠發現它的界面播放的動畫非常流暢，並且響應相當及時。這也是CSS和JavaScript的功勞（最好是通過 iPhone或是Android設備訪問——目前還不支持Windows Phone！）。

二、工具

這一節介紹的技術可能不會直接給用戶帶來驚艷的感覺（雖然有些可能可以做到），但他們確實非常重要。其中有些是開發者可能會頻繁使用的JavaScript資源，而有些是人們開發瀏覽器應用時的首選工具。

5. Workflowy

Workflowy可以幫助人們整理自己的想法。在2010年十一月推出了他們的測試版本，僅僅用了30天的時間，它就擁有了一百萬條記錄了。它是由 Jesse Patel和Mike Turitzin共同開發的，Workflowy使用JavaScript處理DOM操作和存儲，並且能夠在大量的本地記錄中快速查找目標記錄。如果你需要整理自己的記錄或是想查找新的GTD 工具，Workflowy會是一個不錯的選擇。最近它還增加了對移動設備和平板電腦的支持，方便用戶分享文檔。

6. jQuery Mobile

雖然現在移動web開發正變得越來越熱，但是移動設備的開發工作還是相當困難的。jQuery JavaScript庫的目標就是想在瀏覽器上實現一個通用的JavaScript開發方法。而 jQuery Mobile的目標則更加遠大：簡化各種移動設備平台上的web開發工作。這個庫已經推出了1.0版本，jQuery Mobile網站就是一個很好的示例，展示了如何使用jQuery Mobile開發一個能夠在各種移動設備和傳統瀏覽器設備上運行的網站。

7. Spritecow

Spritecow是由Jake Archibald開 發的，它能夠幫助用戶解決許多繁瑣費時的問題。前台開發人員都知道，創建spritesheets的目標就是使得界面響應更加及時並盡量減少HTTP請求 的次數。Spritecow將JavaScript，Canvas和一些數學邏輯演算法融合在一起，為用戶提供了一個好用的CSS生成工具。

8. Cloud 9 IDE

將整個開發環境整合到雲和瀏覽器裡面已經成為了我們這個時代的標誌。在過去的幾年裡面，Cloud 9一直在開發他們的集成開發工具（IDE），但是今年，它變成一個令人期待的項目並且成為一個可用的web開發資源。創始人兼CTO Rik Arends表示，與其他類似項目（如Bespin）相比，使用JavaScript來管理DOM，在編輯環境中控制文檔性能更好。 通過配置和擴展JavaScript，還可以為這個開發環境帶來更多的提升和功能。都相當值得期待。

9. Reveal.JS

Reveal.JS是Hakim El Hattab開發的一個演示文稿製作工具，能夠製作絢麗的演示文稿並生成HTML格式，將它發布到web上。它使用了CSS3變換功能和JavaScript，這個工具大受web開發者的青睞。

10. Pusher

Pusher是一個很棒的工具，在此不得不提。雖然它已經推出一年多了，但最近提升了Web Sockets對瀏覽器的支持，Node使得Pusher受到了更多的關注。

Pusher提供了一組API用來提升實時apps和服務。有許多非常棒的網站都使用了Pusher。

Pusher最初是由New Bamboo的幾個員工開發的，雖然規模不大，但是做的工作卻相當了不起，New Bamboo需要實現實時通訊來提升web遊戲和工具，所以Pusher自身用到了Node。

11. Speakerdeck

來自Ordered List的Speakerdeck最近被收錄到Github上，它利用JavaScript和web技術在web上展示演示文稿。雖然許多其他類似的服務都利用了大量的Flash技術，Speakerdeck相比之下則較少用到Flash，而是利用JavaScript實現幻燈片預覽功能。這裡有許多豐富的功能和技術。

12. Gauges

既然已經提到了Speakerdeck，就不得不提一下Ordered List的另一個精彩服務——Gauges。它是一個分析工具，有點類似於Google Analytics，使用了常用的JavaScript插件獲取用戶的訪問數據。Gauges有豐富的API，並且能夠很好地渲染實時數據。 JavaScripty相當的精彩。

三、改進界面

13. BBC主頁

最近關於BBC更新的主頁有一些爭論。有些人喜歡它，而有些則對它感到反感。就個人而言，作者開始覺得新的主頁看起來有點瘋狂，但慢慢地也覺得它 其實也挺可愛的。它的交互看起來非常酷，並且有許多的改進。即使在不支持JavaScript的環境中，這個主頁也考慮得非常周到。但是，它還是顯得有點 擁擠和正正方方了。

14. BBC iPlayer

雖然已經介紹過BBC了，但是BBC iPlayer的確值得拿出來再說一說。它有一個非常了不起的JavaScript驅動界面，能夠非常有效地呈現豐富的內容信息（不僅僅是視頻信息，還包括圖片信息）。使用BBC的主頁和開源的Glow JavaScript庫能夠做許多新穎的工作。

15. Facebook

必須承認，Facebook在界面設計上做了大量複雜、精細的工作，使得它真實。上面有豐富的實時資訊，通知和聊天功能，雖然它的風格可能無法迎合所有人的口味，但是它的確對web設計產生了影響，並且影響了許多人。

四、背後的美麗

雖然作者非常關注視覺效果和代碼庫（代碼庫確實相當重要），但他最關心的其實是如何巧妙地利用這些技術。最後幾個例子很好地展示了如何靈活地使用現有的技術。

16. Github

Github在用戶交互方面做得相當出色並且非常注重細節的設計。在代碼導航樹中，用戶能夠在項目的目錄樹中平滑地切換，網站記錄了各個頁面的地址信息並且可以對地址進行標記，內嵌了編輯器，可以直接在瀏覽器中修改代碼（使用Cloud 9 editor）。使用Canvas實現網站的可視化工作，包括搜索預覽，彈出菜單和界面元素，這個列表還在不斷增加。Github做得非常棒。

17. Google Doodle

Google Doodles提供了非常有趣的動畫，用戶能夠與這些動畫交互。有時，這些設計會讓用戶會心一笑，有時也許人們還沒發現它們，它們就已經消失了。Marcin Wichary是Google的這個「delighters」項目的負責人之一，為了推廣這個項目，必須 掃清JavaScript優化技術中的障礙。這個團隊使用了sprite-crunch技術，用來壓縮它們在動畫中使用的sprites的。處理方法相當妙。這些塗鴉非常巧妙地利用了瀏覽器API和JavaScript。Google的開發人員太聰明了！

18. Nike Better World

Nike團隊的這個網站常常被複制和討論。這個網頁將JavaScript和CSS結合起來，當用戶滾動頁面時，營造出一種有趣的視覺差。即使瀏 覽器不支持JavaScript，這個網站也能優雅地降級顯示，將視覺差效果移除，但並不會影響頁面的正常顯示，作者建議將導航鏈接保留下來。可以用 JavaScript劫持這個鏈接，這樣無論應用環境是否支持JavaScript，這個導航都能夠工作。

19. Mobile Beetle

作者在今年早前曾對Volkswagen Beetle的 新網站提出了一些批評。在此不會重複這些批評，而只是介紹這個網站在將JavaScript推向極致的幾個方面。它也是一個旋轉效果做得相當不錯的網站。 這個網站的移動版本做得相當精巧。當你在iPhone上訪問這個網站時，它充分利用了觸摸和旋轉事件提升服務的用戶體驗（儘管如果不是使用的WIFI的 話，網頁中的圖片可能顯得有點過大）。

20. Twitter移動網站

其實移動設備上已經有許多非常棒的Twitter客戶端了，以至於大家可能會忽略今年Twitter推出的移動優化版本的web客戶端，儘管它相 當不錯。Twitter的開發團隊採納了iPhone Twitter apps上的許多UI慣例，並且在自己的web框架中重新設計了一些UI。結果相當不錯，在智能手機上訪問瀏覽器中的頁面就像是native app一樣。在Android和iPhone上的效果都相當出色。真的是一個很棒的工作。

這就是作者挑選出來的20個將JavaScript推到極致的網站。當然，其實應該還有許多其他的網站也有資格出現在這個列表上，但是web太大 了，而列舉出20個網站只是一個很小的集合。雖然許多其他的網站也有一些突出的特點，但也各有不足。JavaScript讓開發者能夠在瀏覽器中做許多了 不起的工作，但這裡列出的20個網站中，有些為了實現某些特色犧牲了網站的訪問性、地址性和其他性能或功能，這是一個優秀的web應用應該克服的。不過， 它們確實在今年，給web開發者帶來了不少新的想法。

英文原文：2011 in review: 20 sites thatpushed JavaScript to the limit