2011回顧：20個將JavaScript推到極致的網站

        對于瀏覽器上的開發者來說，2011年又是相當精彩的一年。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. 非死book

        必須承認，非死book 在界面設計上做了大量復雜、精細的工作，使得它真實。上面有豐富的實時資訊，通知和聊天功能，雖然它的風格可能無法迎合所有人的口味，但是它的確對 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. 推ter 移動網站

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

        …這就是全部的 20 個網站

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

        文章來源：2011 in review: 20 sites thatpushed JavaScript to the limit