代码改变世界

Unobtrusive Ajax 的两种境界

2010-10-12 23:15  鹤冲天  阅读(3338)  评论(6)  编辑  收藏  举报

王国维在《人间词话》说：古今之成大事业、大学问者，必经过三种之境界：

  1. 昨夜西风凋碧树。独上高楼，望尽天涯路。
  2. 衣带渐宽终不悔，为伊消得人憔悴。
  3. 众里寻他千百度，蓦然回首，那人却在，灯火阑珊处。

类似，在 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 的文章，翻译的可能不太准确）：

  1. 网页内容和表单使用纯 HTML；
  2. 不借助 JavaScript，表单和超级连接也能正常使用；
  3. 页面外观完全由 CSS 控制，而不是 HTML（不要用 table 来布局） 或 JavaScript；
  4. 任何人都能通过任何设备（考虑不支持JavaScript的设备）访问；

说白了，就是没有 JavaScript，网站也能正常运行。这种分离其实是重新定义了 HTML 和 JavaScript 的分工：

  1. HTML 为主，JavaScript 为辅；
  2. HTML 不依赖于 JavaScript，可独立运行;
  3. JavaScript 仅用来增加页面效果。

要达到这种境界，要求开发时先不使用任何脚本，这样保证了 HTML 独立运行。然后在不影响 HTML 的前提下，逐步加入脚本，以增强页面效果。

之所以作为一个境界，是因为做到这一步是非常困难的，有时是不可能的（如：Google 地图），如果能做到，你也将受益匪浅：

  1. 没有脚本的干扰，网站调试更加简单;
  2. 更换网站动态效果像换肤一样简单，只需要引用另外一个脚本;
  3. 开发人员分工更加明确，前端开发与后台开发彻底分开，互不影响。

Unobtrusive Ajax 面临的挑战

现在是 2010 年 10 月了，离 Jesse Skinner 发表文章已经有四年时间了，这四年间 web 发生了巨大变化：

  1. Chorme 为代表的新一代浏览器的出现，JavaScript 运行效率越来越高，对新的 Web 标准（HTML5 和 CSS3 ）支持也不断完善；
  2. 各种 JavaScript 类库的涌现和成熟，有和 Unobtrusive Ajax 同一战线的（jQuery、Prototype），也有站在对立面的如：ExtJS；
  3. 杂乱的 Web 控件很多，很多都是具有很强侵入性的；
  4. WebOS、在线 Office 等逐渐兴起，且对 JavaScript 依赖较强。

后计

从一开始接触到 Unobtrusive Ajax，我就感觉这是一种伟大的想法，并积极向 Conceptual Separation 的境界努力。当然 Unobtrusive Ajax 也有一定的适用范围，并不适用于所有的 Web 开发。

希望听听大家对 Unobtrusive Ajax 的看法，支持的也好，反对的也好，交流就是一种进步！