级别： 中级 Mike Padilla, 用户体验设计主管, Radian Guaranty
2004 年 2 月 17 日
更新 2008 年 8 月 04 日 让 Web 应用程序冲破普遍存在的瘦客户机架构的桎梏。当今的浏览器终于能够支持 HTML 文档内跨对象高级客户端交互。由于文档对象模型（Document Object Model，DOM），UI 设计人员现在可以创建用户能够实时处理数据的界面，同时又提供了 Web 应用程序的便利性。在本文，作者 Mike Padilla 将向您阐述如何实现能具有健壮的客户端功能的、干净的、可扩展的代码。
随着浏览器大战接近尾声，用户界面（UI）设计人员和开发人员现在可以借助相当稳定的、健壮的平台创建更好的 Web 应用程序。最新的浏览器提供两种功能：以可见或交互的方式对 UI 在客户端的行为进行更多控制；以更干净和更具可扩展性的方式来实现这些控制。
确实，随着标准 Web 应用程序链（与服务器协同工作的一种瘦客户机）的不断瓦解，开发人员可以充分利用这些优势。如今，您能够创建可轻松在 Web 上部署和升级的应用程序，且使之具备丰富的交互功能。这是开发、认可和遵循 Document Object Model（DOM）相关标准的结果。UI 设计人员和开发人员可通过 JavaScript 和 级联样式表（CSS）创建能使用户进行更有效管理的系统，以充分利用 DOM 的可用性和可操纵性。
迅速、及时
设想一下，在每一次准备餐点时，您都必须去副食店购买一餐所需的食物。如果遗漏了某种重要的原料，就不得不再次返回商店。对于剩余的原料，您只能将它们扔掉。因为您没有用来储存食物的冰箱或保险柜。而到了准备午餐的时候，又要进行一次采购。晚餐也是如此。由于每个人都必须为每一餐前往商店购物，因此商店将变得非常的拥挤。
与此同时，厨房中的烹饪工具只有一个明火炉灶和一个炒勺。这些工具的效率很低，不是吗？然而，这基本上就是当今瘦客户应用程序的工作方式。几乎所有资源都存放在服务器中（等同于示例中的商店），用户不得不花很多时间数次访问这些资源，而目的往往是以一种严格受控、受限的方式一次性使用资源（基本的表单输入/提交）。
但是，如果 Web 应用程序按照真实生活中安排厨房的方式工作，情况又会如何呢？每周去一次商店，购买足够多的原料并存放在家中，在一周内用完。您有很多种工具，这些工具让烹饪变得更加轻松和享受。
您可以基于这样的逻辑实现 Web 应用程序：利用富客户机，使应用程序能以最优方式分散到多个层。数据集、业务逻辑以及高度交互的 UI 元素可以被下载到客户机以便进行即时用户交互。结果就是：能够享受到二者的益处。既能获得联网应用程序的部署简便性，又能获得即时响应的高效功能。
瘦客户机是否依然流行？
今天，几乎所有的 Web 站点和 Web 应用程序都是瘦客户机，只有数据组及最低程度的表示层会下载到用户 PC 上，大量计算处理都是在服务器上进行的。瘦客户机架构模式的最大优点是部署简便 —— 只需在一个位置（服务器）更改源代码，在用户再次使用应用程序时，就可以立即完成升级。相对于本地安装的应用程序需手动为用户群进行升级的巨大工程而言，利用瘦客户应用程序为用户升级的工作量要少得多。无需用户安装额外软件即可轻松部署新应用程序的能力十分具有吸引力。
有了瘦客户机，您就可以最大限度地利用您能完全控制的资源（即服务器），由它去完成繁重的工作，而只提供精简的数据集和表示层信息。
去芜存精
但是，由一台强大的服务器处理计算，同时又有无数客户机接收其信息，这样做究竟是否高效? 实际上并不是非常高效。在强大的服务器和受控的客户机之间存在着一个小问题，即有限的带宽及其导致的恶果 —— 服务器延迟。用户填写订购单、提交后等待 6 秒。一个屏幕出现，显示表单提交存在错误。用户试图更正错误并重新提交。用户焦急地又等待了 6 秒。如此循环往复。
尽管宽带已逐渐得到普及，但客户机-服务器间的延迟（大于十分之一秒）还是会造成可用性问题。用户不再感觉像是直接在 UI 中操作。如果延迟达到 10 秒左右，用户将失去耐心，您也就有可能失去这些用户的关注。服务器虽然非常强大，但没有用户访问其数据，它也就变为低效。
瘦用户机的另一个缺陷就是几乎所有的用户交互都发生在页面级别。系统逐页响应用户页面，而不是在 HTML 组件级别按元素响应用户。由于很多用户交互都要求立即回应，此类宏观的系统响应效率极低。要完成较大的目标，最有效的途径往往是多次执行规模较小的即时交互操作。设想，如果键盘上的每个键不是代表一个字母而是每个键都表示一个单词，那么使用起来将多么缓慢而笨拙。这很好地描述了为何不得不在更高的聚集级别进行交互。这样的交互也适用于瘦客户应用程序。
不胖也不瘦：富客户机
惟一的一种消除（或至少是最小化）由服务器延迟引起的工作流中断的方法是将数据和功能直接下载到用户的计算机。只有在这时，用户才能真正以本地应用程序接近即时响应的速度来处理数据。但究竟要下载多少内容到用户的本地机器？
对于客户机-服务器应用程序，可行实现很多，从胖客户机到瘦客户机。一个极端胖的客户机将下载整个应用程序，且仅在数据需要更改时才调用服务器。应用程序的全部 UI 以及全部应用程序逻辑都驻留于用户的机器。而在另一个极端，瘦客户机则只下载数据的一小部分和尽量少的一组 UI。
一个胖客户机应用程序的性能增强是以庞大的初始下载和复杂的安装为代价的。因此，任何对应用程序的更改都需要跨整个用户群进行繁琐的升级。此外，胖客户机大都不会如传统 Web 应用程序那样开放地构建在框架之上。瘦客户机应用程序则简化了开发、部署和升级；但是，用户通常都会受累于客户机-服务器间的往来通信所带来的延时。如今，最好的解决方案存在于这两个极端之间：富应用程序。
定义客户机-服务器架构的涉及范围
那么究竟什么是富应用程序？很难准确定义。即使是在富应用程序的小环境内，也会有相当宽泛的富客户机功能存在。使用 Macromedia Flash 开发的应用程序通常被视为富应用程序。但是这类应用程序需要浏览器插件以及特定的应用程序下载。根据 Flash 如何被您使用，应用程序可以属于富客户机的类别，也有可能落入胖应用程序的范畴。
对于另一个极端，也是如此，HTML Web 应用程序使用基本的 CSS 和 JavaScript 来提供增强的客户端交互和数据处理。这样的应用程序介于瘦客户机和富客户机之间。而富客户机又介于瘦客户机和胖客户机之间，它有多种等级。最重要的是，一个富客户机既能提供与瘦应用程序近乎相同的部署简易性，又能提供与胖应用程序类似的交互性和可用性以及改进的服务器资源分配。
坚持富客户机理念
富客户机看起来像是一种最优方法，但为何没有得到广泛使用？直到最近，浏览器市场还是充斥极为不完整、不成熟的功能性。由于浏览器往往是大多数 Web 应用程序的首选平台，因此开发高级客户端功能的任务极其艰巨。
两个重要的事件使这一境况有所改观。首先，通过公开 DOM，W3C 已经开发和固定了定义高级客户端功能的通用标准。其次，明显主导浏览器市场的 Microsoft Internet Explorer 也支持这些标准。这意味着 UI 设计人员和开发人员现在拥有了一种固定、健壮的平台，能够真正地创建创建能充分利用高级、即时的客户端交互的富客户应用程序。
富客户机能为您做什么？
设想一下，您将能够引用在屏幕上呈现的任何 HTML 元素、更改其属性、设置由事件触发的处理程序并修改其外观，而所有这些都能即时实现。而这一切如今已成为现实。借助 W3C 定义的 DOM，您将能够通过编程访问和处理页面的元素及其相应的属性。
此前，UI 设计人员主要受限于页面级交互，而现在将能够在元素级设计完整的交互功能。从表的单元格到表单字段再到链接，您都能通过其特征和 CSS 属性惟一地引用和修改。您可以使每个屏幕都更像是一个迷你应用程序。数据集和动态 UI 集都能下载至用户的机器，在此机器中，用户将能通过高级的、更为有效的交互操作实时处理数据。
一个基本的 Web 应用程序的标准交互就是简单的表单数据输入，使用一组静态信息。在此级别的交互中，用户所能使用的功能也相当有限。
然而，富应用程序却开辟了另一片天地。由于传送给用户的 UI 集的功能非常丰富，用户可以在请求服务器（或进行相应的性能请求）之前方便快捷地操控这些数据。对于一个基本的数据表演单输入屏来说（例如一个在线信用卡应用程序），由于用户所能进行的操作有限，因而一个富客户机不会获得性能增强，如果有，也很少。可以被认为是基本的富客户机的功能的客户机端的数据验证，可以提供一些帮助。然而，除此之外，能改过数据输入过程的交互并不是很多。如果您开始作为需要大量数据处理的真正的应用程序实现 Web 应用程序，富客户机的设计可以极大提高用户效率。
富客户机应用程序让用户进行控制，而不是让用户成为应用程序的奴隶，也不要求用户频繁地访问服务器。很大程度上，您可以实现传统应用程序的使用范例，
其中由用户处理数据并提前（根据用户的命令而非应用程序的指令）保存这些更改。
富客户机：原理揭秘
富客户机包括如下四个组成部分：
-
元素： HTML 代码中的名词，例如表（<table>）、行（<tr>）和链接（<a>）
-
事件: 由发起操作的用户或系统设置的触发器
-
特征/属性： 形容元素的词
-
样式：与特性/属性相似，含义有所重叠；样式更多地被用来描述有关 CSS 的细节
在实际使用时，可以规定特定的一个事件在何时 发生，某个对象 的属性 必须更改等。可以这样控制页面上的所有内容。
清单 1. 示例代码
<baby id="babyJoe"
onCry="checkCry(this)"
style="personality:cute"> I am cute </baby>
function checkCry(babyFocus) {
if (babyFocus.wetDiaper) {
changeDiaper(babyFocus);
babyFocus.style.personality = "happy";
}
}
|
您不仅可以引用现有的 HTML 元素，还可以向文档中插入新节点。亦可以无缝地删除节点。需要在该表内加入额外一行？那么只需在客户端加入一行：tbody.insertRow(0)。需要删除一行？可以轻松完成删除：table.deleteRow(0)。无需与服务器的任何通信，由用户进行完全即时的控制。
清洁、可扩展的实现
样式表是一种将表现链接到一个源的好方法。设想，如果可以这样处理行为 —— 假设您可以像设置其背景颜色那样轻松地将行为分配给一个表的单元格，比如是展开还是折叠，是突出显示还是滚动。效果会怎样？实际上这完全可以实现。
W3C 有相关的文档建议将行为扩展包括到 CSS 规范中。这些扩展让您可以通过 CSS 类将独立行为附加到任何的 HTML 元素上。虽然通用标准尚未形成，Microsoft 却已经使用 HTML 组件（HTC）实现了一种建议性的解决方案。功能特定于 Internet Explorer 5+，HTC 行为允许您通过一个 CSS 类添加事件及其对应的动作。例如，假设您有一个文本字段，该字段当用户鼠标在其上悬浮时会突出显示，而当用户在其上单击时会展开，如果用户在其中键入内容，还会复制这些内容。通常，实现该目的的 HTML 应该类似于如下代码：
<input type="text" name="textfield" onMouseOver="highlight(this)" onClick="expand(this)" onKeyUp="copyText(this)">
使用 HTC 行为，上述代码可以简化为：
<input type="text" name="textfield" class="dataCell">
就是这样。您可以像控制其外观那样轻松控制 HTML 元素的行为。富客户机开发并不一定非要以复杂的代码为代价。通过充分利用 HTC 行为，代码也可以像之前一样清晰和分块实现。
要使用 HTC 行为，以下三个组件是必须的：
- CSS 类
- HTC 文件
- Web 页（HTML、JSP、ASP 等）
CSS 类链接到 HTC 文件内的一个行为。HTC 文件指定要执行的事件和功能。通过将类指定给一个 Web 页内的 HTML 元素，在 HTC 文件内定义的行为就可以被无缝地应用。
如下代码通过 CSS 和 HTC 文件将突出显示行为添加到一个文本字段。
清单 2. HTML 代码
<input type="text" class="highlightingCell">
|
清单 3. CSS 类
..highlightingCell {
behavior : url(/javascript/ highlightingCellBehavior.htc);
background-color:'';
border:none;
height:13;
width:100%;
text-align:right;
} |
清单 4. HTC 文件代码（文件名为 highlightingCellBehavior.htc）
<PUBLIC:COMPONENT URN="projectOneBehaviorOne" >
<PUBLIC:ATTACH EVENT="onfocus" ONEVENT="cellOn()" />
<PUBLIC:ATTACH EVENT="onblur" ONEVENT="cellOff()" />
<SCRIPT language="JavaScript">
function cellOn()
{
window.event.srcElement.style.backgroundColor='#FFFF99';
}
function cellOff()
{
window.event.srcElement.style.backgroundColor='#FFFFFF';
}
</SCRIPT>
</PUBLIC:COMPONENT>
|
当然，只适用于 Microsoft 的解决方案并不是使用 DOM 的所有实现都必需的。使用 addEventListener 方法，可以向任何 HTML 元素添加事件和相应功能。虽然并没有像 HTC 行为那样地清晰和可扩展，这种方法还是让您得以附加来自某个源的行为，而同时又无需明确定义关联到每个 HTML 元素的究竟是哪些事件和函数。如下代码给出了其工作原理：
清单 5. addEventListener 方法的代码
the HTML:
<td id="myCell">
the JavaScript:
//define the object
var obj = document.getElementById("myCell");
//attach the behavior to the object
obj.addEventListener("mouseover", highlight, false);
|
此结果等同于：
<td id="myCell" onmouseover="highlight()">
Internet Explorer 尚未采用这种 DOM 标准；相反，它使用了一种类似的方法：attachEvent。对于 Internet Explorer，代码应该为：
清单 6. attachEvent 方法的代码
the HTML:
<td id="myCell">
the JavaScript:
//define the object
var obj = document.getElementById("myCell");
//attach the behavior to the object
obj.attachEvent("onmouseover", highlight);
|
通过遍历多个 HTML 元素，可以快速、清晰地将行为应用于每个元素。这可以通过使用易于理解的 ID（比如 TopCell1、TopCell2 等）或遍历 HTML 元素的节点结构（比如，使用 childnodes.length 循环遍历特定 tr 节点内的所有 td 元素）得到进一步的增进。也可以使用 getElementByTagName 函数来重点关注某些类型的 HTML 元素，可以向其上附加行为。
让富客户机变得更富
富客户机功能导致 Web 应用程序的每一页基本上都能充当一个迷你的应用程序。用户能够通过直接处理其机器上的 UI 即时修改数据和屏幕元素。无论用户是需要向表内添加更多的行、排序数据、输入新数据、编辑多个记录或是复制和粘贴全部的记录集，他们都能在客户端快速有效地实现，而无需担心任何的服务器延迟。
富客户应用程序能利用其架构创建智能页面，而不是服务于多个哑页面。通过跨客户机和服务器最优地分配负荷，用户就能受益于改进后的服务器资源分配所带来的系统响应和应用程序性能的增强。
Web 应用程序如打破其瘦客户机的桎梏，将能简便联网应用程序的部署，但却要以牺牲用户效率为代价。随着标准的逐渐成熟和浏览器对这些标准兼容性的不断提高， UI 设计人员和开发人员现在能够以清晰和可扩展的方式实现富客户机功能，这让用户和开发人员都受益匪浅。
 |
何为 DHTML？
动态 HTML 是一组技术集，为 Web 开发人员提供了设计和显示用户界面方面更高程度的灵活性。DHTML 包括脚本、样式表和一个改进了的新文档对象模型（DOM）。
DHTML 最大的优势就是：在 Web 页加载完成后，大多数用户交互就能完全在客户端执行，而无需涉及 Web 服务器。不过，DHTML 也存在一些缺点。最大的缺点是两种不同的实现并存（分别针对 Netscape Navigator 和 Microsoft Internet Explorer）并且只能在最新版本的浏览器内才能发现。
|
|
参考资料
关于作者 | | | Mike Padilla 是 Radian Guaranty（RDN）的 Web 应用程序用户体验设计主管，负责监管信息架构、品牌集成以及富客户机 UI 架构等。Mike 曾带领 Fleet Credit Cards、Mellon Private Asset Management、Bank of New York 以及 Bessemer Trust 等公司的前端的开发。Macromedia 采用了他的可用性设计。您可以通过 <a href="mailto:michael.padilla@radian.biz">Michael.Padilla@radian.biz</a> 联系他。 |
对本文的评价
| 
