首頁
中文書目錄
原文書目錄
 站內快速搜尋
資源中心
Book Series
Special Interest













■好消息,歐萊禮書籍已重新鋪貨至各大書局及網路書店,歡迎讀者選購       ■歡迎各院校採用歐萊禮書籍,學校團購請洽校園服務團隊

[書籍導讀]

Ajax Design Patterns - Creating Web 2.0 Sites with Programming and Usability Patterns
— 庖丁解牛:從設計編程、功能與使用性、到開發,以全面性觀點剖析 Ajax,這是讓我們真正理解 Ajax 的最佳途徑

自從 Ajax 以 Asynchronous 的遠端通訊手法(XMLHttpRequest、IFrame Call、HTTP Streaming等),為傳統 Web應 用程式打通任督二脈,帶來 Client/Server 的非同步互動行為以來,Web 應用程式產生了無窮的趣味、變化、與可能性。一年多來的爆炸性成長,所產生的種種資源與成功案例,讓人眼花撩亂,瞠目結舌,當中所伴隨而來的問題,更是複雜且廣泛,並持續蔓延。如何「真正」了解 Ajax,變成一個棘手的問題,不是一般 Ajax 書籍所能解決的,需要以更全面的角度來剖析,以現實案例為師,動態地從中精煉出問題模式與解決方案。

對想要從 Ajax 程式人員變專家的開發和設計者,以及對想要知道 Ajax 在現實世界裡能發揮到什麼程度的經理人和業主,《Ajax Design Patterns》是一本很寶貴的參考與工具書,本書背後的支援網站(http://ajaxpatterns.org/),正動態地成長,延續本書的閱讀。

假如你自認了解 Ajax 的一切,先看過本書之後,再來評斷!

  • 首先,你或許已經運用 Ajax 的思維,寫了一些應用程式,打破傳統 synchronous 的 request/response 模式,在 Client/Server 連接時,不打斷使用者的操作,動態更新網頁內的不同元素,沒有任何頁面的重更新。
  • 其次,你對 Ajax 技術家族的多項成熟技術,包括 HTML、JavaScript、XML、DOM、CSS、JSON 等,都能運用自如。或許,你也能採取不同的 Web 遠端通訊作法(XMLHttpRequest、IFrame Call、或 HTTP Streaming 等)與伺服端進行溝通,並嘗試過一些支援動態行為與視覺效果的程式庫和框架。
對第一點而言,不難,只要看過任何一本關於 Ajax 的書,甚至只要讀過幾篇文章(例如我們在另一篇《Ajax Hacks》書評中所列的參考文章),就能辦到。對第二點的前半部分,事實上在 Ajax 出現之前,你可能就已經很熟悉(與 Ajax 何干?),對後半部分,只要你寫過 Ajax 應用程式,必然多少用過一些。同時,你當然也以使用者的立場,親身體驗過 Amazon、Google、與 Yahoo! 家族種種成功實例的奇幻演出。除了驚嘆之外,如果有人問你這些是怎麼回事、妙在哪裡、如何辦到?你不能只是一語帶過,說「這是因為 Ajax」。這樣模糊的說法對客戶、老闆、和你自己,其實沒什麼幫助。你必須以務實的角度,有系統的作法,從各個面向剖析 Ajax,最後歸納出有用的知識,以便重利用。

Ajax 畢竟不是一個語言或一群框架,而是一種極為寬廣且有力的實作概念,加上它爆發性的蓬勃發展,隨之產生的混亂,缺乏簡單固定的依據,必定會讓相關人員無所適從。面對它,你得採取不同於一般的方式加以理解。你必須從編程、功能性、使用性,到開發,以全面性的角度剖析它,歸納它。甚至,對開發者、設計者、經理人、和業主來說,也會有不同的立場與觀點,但無庸置疑地,需要一種共同的語彙,以進行良好的溝通。這麼難?應該會讓你覺得無從下手吧!其實,這樣的宏圖大業並非你個人(甚至本書作者)所能為。還好,作者 Michael Mahemoff,在 2005 年成立了 Ajaxpatterns.org 這個網站(整個工作於 2004 年底,便於 Michael 的部落格 http://softwareas.com/ajax-patterns 展開),集眾人之力,收集 Ajax 開發所遭遇的諸多問題,觀察成功的網站,透過研究現有的 Ajax 應用程式及先驅工作,從中淬煉出諸多重要的問題模式與解決方案,為每個主要議題彙整出一種 Design Pattern。該網站的內容豐富且符合需求,受到極大的回響及參與,最後更集結成這本書,內含 70 個 Design Pattern(目前,另有 6 個新的設計模式正在成形或討論中)。

註:如果你很在意對「Design Pattern」這個詞的嚴謹定義,請勿耿耿於懷,退一步,把它當作一種方便性說法,或「問題模式與其解決方案」,擷取本書對你的利益即可。

這 70 個 Design Pattern,集眾人心血所成,且都有相對應的分析過程與真實世界案例可供對照,非常寶貴。
  • 身為設計或開發者:你能從本書擷取到成功先例的寶貴技術,理解其他開發者正用以產生高品質 Ajax 架構,加速效能並改善使用性的設計模式,運用在自己的工作上。
  • 身為業主或經理人:瞭解 Ajax 能辦到什麼,不能辦到什麼,以及正如何被運用到現實世界裡。並且,使用共同的語彙,改進與設計或開發者之間的溝通。
  • 想要在 Ajax 領域上快速提升的開發者,可從教學課程的章節(第二章)及基礎技術設計模式(第二部分)開始。已經有些 Ajax 經驗的人,可能從編程和開發設計模式(第三部分)獲益最多。擔任較非技術領域角色的人,可特別著重在功能性和使用性設計模式(第四部分)及真實世界的例子,看看 Ajax 能做到什麼,獲取高階觀點。
另外,本書所列的設計模式亦企圖幫你考量到一些對使用者/開發者真正要緊的事:

* 使用性(Usability)
Ajax 應用程式應儘可能直覺,有生產力,並且使用上要有趣。

* 開發者生產力
開發應儘可能有效率,具有乾淨,可維護的程式碼基礎。

* 效率
Ajax 應用程式應消耗最少的頻寬和伺服器資源。

* 可靠性
Ajax 應用程式應該提供正確的資訊並保護資料的完整性(integrity)。

* 隱私
當使用者產生的資料能夠且應該被用來改進使用者操作經驗時,使用者的隱私也應該被尊重,而且使用者應該知道他們的資料何時及怎樣被使用。

* 可存取性(Accessibility)
Ajax 應用程式應該為各種使用者服務,包括特定行為能力不足,不同年齡,不同文化背景的人。

* 兼容性(Compatibility)
作為可存取性的延伸,Ajax 應用程式應該在大範圍的瀏覽器應用程式,硬體設備,和作業系統上正常運作。

本書的敘述方式很特別,很有條理,每個 Design Pattern 以固定方式展開,一致且清晰。從「概觀圖解」開始,這是為此設計模式之場景所準備的一張草圖,簡單明瞭,直指要點。接著以虛擬的「目標故事」(或開發者故事)、「問題」、與「力量」陳述出問題與目標的焦點,及當中作用的力量。接著以「解法」提出所要注意之處,並分析可能的解決方案,再以「決策」澄清此設計模式所伴隨而來的相關決策。然後提出該設計模式在真實世界中運作的範例(「實例」)。接下來才是程式碼的解說(「程式碼範例︰重構說明」),最後,告訴你有哪些「替代作法」,及「相關設計模式」。作者在結束前會用一個「隱喻」,來比擬此設計模式(有些蠻有趣,有些實在有點無聊)。每個設計模式都是按部就班、一步一步的分析與講解,非常清楚。

本書有個小小的缺憾,就是伺服端方面僅以簡單的程式碼(PHP)處理。當然,就說明 Ajax 與 Design Patten 的來說,這是完全 OK 的,然而,某些後端對 Ajax 的支援也是很豐富、很值得參考,像是 Ruby on Rails 等等。不過,你可以從附錄中找到相關參考。

本書的組織很有邏輯且安排得宜,分成六大部分,前三章為第一部分,對 Ajax 技術做基本介紹,並說明 Design Pattern 的精神與方向。

所有的設計模式分成 4 大部分:

基礎技術設計模式(11 種模式)

    概述 Ajax 開發所需的原始技術,這些是不同於傳統方式的 Ajax 建構區塊,這部分解釋典型的用法。
編程設計模式(23 種模式)

    展示開發者已經發現的、可確保 Ajax 應用程式容易維護的開發技術。另外,還包括 Web Service(RESTful 與 RPC)的設計;管理瀏覽器與伺服器之間的資訊流;當回應到達時,進行 DOM 操作;以及效能最佳化等。
功能性和使用性設計模式(28 種模式)

    這些是與使用者最有關係的事,包括組件和互動技術;組織及維護頁面內容;視覺效果;以及 Ajax 能達成的功能性。
開發設計模式(8 種模式)

    這些是為開發工作最佳實務提供建言的流程設計模式,與先前的所有設計模式不同,先前的設計模式是存活在 Ajax 應用程式裡的「事物」。這些實務技巧涉及診斷問題及執行測試。
最後一個部分是附錄,對目前跟 Ajax 有關的 Framework 與 Library,進行分類與介紹,是非常實用的資訊。

現有的設計模式已經超過 70 種,為它們進行階層式的分類是很有用的。我們將書中對 4 個高階群組(基礎技術,編程,功能性與使用性,以及開發)所參考的階層圖,列在下面供你參考。最後,在將各設計模式按字母順序列出,簡略說明:

《4 個高階群組》

基礎技術設計模式


編程設計模式


功能性和使用性設計模式


開發設計模式


《設計模式簡略說明》(按字母排序)

Ajax App

產生 Ajax 應用程式 -- 一種能跑在任何現代 Web 瀏覽器內的豐富應用程式。

Ajax Stub

使用能讓瀏覽器 script 直接呼叫伺服端操作的 Ajax Stub 框架,而不需擔心 XMLHttpRequest 和 HTTP 傳輸的細節。

Browser-Side Cache

在瀏覽器端的快取裡保留伺服器回應的結果。

Browser-Side Templating

使用內嵌 JavaScript 產生樣板,並要求瀏覽器端框架將它們展示成 HTML。

Browser-Side Test

建立瀏覽器端 JavaScript 元件的自動化測試。

Browser-Side XSLT

運用 XSLT 將 XML Message 轉成 XHTML。

Call Tracking

追蹤 XMLHttpRequest Call,從瀏覽器到伺服器,再從伺服器返回瀏覽器。

Cross-Browser Component

建立跨瀏覽器人容的元件,讓程式人員重利用它們,不用管個別瀏覽器的特質。

Cross-Domain Proxy

建立負責代理與中介的 Web Service,促成瀏覽器與外部網域之間的溝通。

DOM Inspection

使用 DOM Inspection 工具,探索動態的 DOM 狀態。

Data Grid

就豐富表格裡的一些資料提出報告,並支援常見的查詢函式。

Debugging

使用 JavaScript 偵錯器診斷問題。

Direct Login

代替基於表單的提交,以 XMLHttpRequest Call 為使用者做認證,並且為瀏覽器裡的資料進行雜湊編碼(hashing),以提升安全防護。

Display Morphing

透過改變 DOM 裡頭的樣式與值(例如 text 和 color 特性),改變頁面元素。

Distributed Events

使用事件機制讓物件保持同步化。

Drag-And-Drop

提供 Drag-And-Drop 機制,讓使用者直接重新安排頁面上的元素。

Drilldown

為了讓使用者在階層結構裡找到項目,提供動態的 Drilldown。

Explicit Submission

代替隨著每個瀏覽器事件自動提交,要求使用者明確請求它;例如,依按鈕點擊提交。

Fat Client

遵循只有在瀏覽器沒有其他方法達成相同效果才執行遠端呼叫的原則,建立豐富的、以瀏覽器為基礎的客戶端。

Guesstimate

代替從伺服器請求資訊,改為進行合理的推測。

HTML Message

讓伺服器產生要被顯示在瀏覽器裡的 HTML 片段。

HTTP Streaming

為回應長時間存活的 HTTP 連接,將伺服器資料以串流傳送。

Heartbeat

讓瀏覽器定期上傳Heartbeat訊息,指明應用程式還在瀏覽器內,使用者仍然活躍。

Highlight

透過以一致的、能捕捉注意力的格式展示元素,強調它們。

Host-Proof Hosting

以加密形式保存敏感資料,客戶只有透過提供絕不會被提交給伺服器的密碼短語,存取及操作它。

IFrame Call

將 IFrame 使用在瀏覽器-伺服器通訊。

JSON Message

以 JSON(JavaScript 物件表示法)格式,在伺服器與瀏覽器之間傳送訊息。

Lazy Registration

當正式註冊被遞延時,隨著互動,逐步累積使用者資訊。

Live Command-Line

在命令列介面裡,監控編寫中的命令,並動態修改介面,支援互動。

Live Form

透過完整的互動,驗證及修改表單,而不是等待明確的提交。

Live Search

隨著使用者建構並且讓搜尋詢問更加精確,持續顯示全部的有效結果。

Malleable Content

建立由 Malleable Content 區塊所構成的頁面 -- 一小塊、一小塊可以在頁面裡編輯的內容區塊。

Microlink

提供在現有頁面上打開新內容的 Microlink,而不是載入新頁面。

Multi-Stage Download

將內容下載分解成多重階段,讓較快速和重要的內容先到達。

On-Demand Javascript

隨需要下載並執行 JavaScript 片段。

One-Second Motion

將元素從一個位置逐步移到另一個位置,或者暫時移動它,以傳達事件已經發生的事實。

One-Second Mutation

當頁面元素經歷值的改變或其他重要事件時,動態變化它的形狀約一秒鐘。

One-Second Spotlight

當顯示元素經歷值的改變時 — 或任何其他顯著改變 — 動態增加它的亮度約一秒鐘。

Page Rearrangement

透過 DOM 操作,增加、移除、移動、及覆蓋元素。

Periodic Refresh

瀏覽器定期發出 XMLHttpRequest Call,獲取新資訊;例如,每隔5秒呼叫一次。

Plain-Text Message

以純文字格式在伺服器和瀏覽器之間傳送簡單訊息。

Popup

使用暫時性的 Popup(出現在標準內容之「前」的內容區塊),支援快速任務與查詢。

Portlet

引進 Portlet — 具有獨立對話狀態的隔離內容區塊。

Predictive Fetch

預測可能的使用者動作,預先擷取內容。

Progress Indicator

指出伺服器呼叫的進度。

RESTful Service

根據 REST 原則暴露 Web Service。

RPC Service

以 RPC(遠端呼叫程序)暴露 Web Service。

Rich Text Editor

實作具有容易使用之格式化功能與 WYSIWYG 顯示的 Rich Text Editor 小組件。

Richer Plugin

使用 Richer Plugin,讓你的應用程式「比 Ajax 更 Ajax」。

Scheduling

使用 JavaScript 計時器為動作排程。

Server-Side Code Generation

從伺服端程式碼自動產生 HTML 和 JavaScript。

Service Test

建立自動化 Web Service 測試。使用 HTTP 客戶端與伺服器互動,就像瀏覽器做的那樣。

Simulation Service

根據模擬真正服務的「假造」Web Service,開發瀏覽器應用程式。

Slider

提供Slider(滑動條),讓使用者在某個範圍內選值。

Sprite

以Sprite加強顯示 -- 也就是,小的、彈性的、像圖示一樣的內容區塊。

Status Area

以唯讀的 Status Area,報告當前和過去活動的狀況。

Submission Throttling

代替針對每個 JavaScript 事件進行提交,在基於瀏覽器的緩衝區內保存資料,並以固定間隔自動上傳它們。

Suggestion

根據使用者當前的輸入,建議他們可能完成的單字或慣用語。

System Test

建立自動化測試,模擬使用者行為並驗證結果。

Timeout

在一段閒置時間之後,讓應用程式產生逾時,並選擇性地通知伺服器。

Traffic Sniffing

透過嗅探HTTP交通,診斷問題。

Unique URLs

為重要的應用程式狀態提供獨特的 URL。

Update Control

讓使用者控制更新的速度與標準。

User Action

使用事件處理器,在 JavaScript 裡處理大多數的使用者動作。

Virtual Workspace

提供參考到伺服端工作空間(workspace)的瀏覽器端視圖(view),讓使用者瀏覽整個工作空間,就好像它被保存在本地端。

Web Service

以精細(fine-grained)、易用的 Web Service,暴露伺服端功能。

XML Data Island

將 XML 回應保留為 XML Data Island -- 在 HTML DOM 裡的節點。

XML Message

以可擴展標記語言(XML)的格式,在伺服器和瀏覽器之間傳送訊息。

XMLHttpRequest Call

使用 XMLHttpRequest 物件,進行瀏覽器-伺服器溝通。

楊仁和
09/01/2007

| 首頁 | 聯絡我們 |
© 2009, O'Reilly Media, Inc. Taiwan Branch