Unobtrusive Ajax 的兩種境界

作者: 鶴沖天來源: 博客園發布時間: 2010-10-14 07:16 閱讀: 765 次推薦: 0 原文鏈接 [收藏]

　　王國維在《人間詞話》說：古今之成大事業、大學問者，必經過三種之境界：

昨夜西風凋碧樹。獨上高樓，望盡天涯路。
衣帶漸寬終不悔，為伊消得人憔悴。
眾里尋他千百度，驀然回首，那人卻在，燈火闌珊處。

類似，在 Web 中使用 Ajax 也有境界之分，這里境界不指技能的高低，而是思想的成熟。

　　Unobtrusive Ajax

　　有一片關于 Unobtrusive Ajax 的著名文章，是 Jesse Skinner （80后，3~4歲就玩電腦）在06年10月發表的：http://www.thefutureoftheweb.com/talks/2006-10-ajax-experience/slides/ 。文中指出應當將 JavaScript （或其它腳本）從 Html 中分離出來，就像最初將樣式從 Html 中分離出來一樣道理。簡單來說就是將嵌入在 Html 中的 JavaScript 全部取出來，放在單獨的 js 文件中，頁面中不要出現任何 onclick、onload 等。

　　使用 Unobtrusive Ajax 我們最大的收益就是簡單易于維護的代碼（Code is cleaner and easier to maintain）。Jesse Skinner 將腳本分離（Separation）分成了兩種：Physical Separation 和 Conceptual Separation 兩種，也就是標題中所提的兩種境界。如果沒有進行腳本分離，只能算是個初學者，技術再高也談不上境界。

　　Physical Separation

　　代碼中沒有任何 onclick、onload，就算達到這一境界了。技術上比較容易實現，通過 jQuery 或其它 JavaScript Library 我們很容易進行做到：

$('#abc').click(function(){
//...
});

　　這種分離，簡化了頁面，提高了頁面代碼的可讀性。能做到這一步，是思想上的一種進步，也是 Web 開發開始走向成熟的第一步。但這種分離只是初步的，只是將 JavaScript 移了下位置，并沒有從根本上改變 HTML 和 JavaScript 之間的關系。

　　Conceptual Separation

　　這個境界可不容易了，要滿足以下要求（源自 Jesse Skinner 的文章，翻譯的可能不太準確）：

網頁內容和表單使用純 HTML；
不借助 JavaScript，表單和超級連接也能正常使用；
頁面外觀完全由 CSS 控制，而不是 HTML（不要用 table 來布局）或 JavaScript；
任何人都能通過任何設備（考慮不支持JavaScript的設備）訪問；

　　說白了，就是沒有 JavaScript，網站也能正常運行。這種分離其實是重新定義了 HTML 和 JavaScript 的分工：

HTML 為主，JavaScript 為輔；
HTML 不依賴于 JavaScript，可獨立運行;
JavaScript 僅用來增加頁面效果。

　　要達到這種境界，要求開發時先不使用任何腳本，這樣保證了 HTML 獨立運行。然后在不影響 HTML 的前提下，逐步加入腳本，以增強頁面效果。之所以作為一個境界，是因為做到這一步是非常困難的，有時是不可能的（如：Google 地圖），如果能做到，你也將受益匪淺：

沒有腳本的干擾，網站調試更加簡單;
更換網站動態效果像換膚一樣簡單，只需要引用另外一個腳本;
開發人員分工更加明確，前端開發與后臺開發徹底分開，互不影響。

　　Unobtrusive Ajax 面臨的挑戰

　　現在是 2010 年 10 月了，離 Jesse Skinner 發表文章已經有四年時間了，這四年間 web 發生了巨大變化：

Chorme 為代表的新一代瀏覽器的出現，JavaScript 運行效率越來越高，對新的 Web 標準（HTML5 和 CSS3 ）支持也不斷完善；
各種 JavaScript 類庫的涌現和成熟，有和 Unobtrusive Ajax 同一戰線的（jQuery、Prototype），也有站在對立面的如：ExtJS；
雜亂的 Web 控件很多，很多都是具有很強侵入性的；
WebOS、在線 Office 等逐漸興起，且對對 JavaScript 依賴較強。