• Choose a category
• All
• Classic-Fiction

Ajax应用开发：实践者指南

编写 HTML文档的时候首先需要选用合适的文档类型声明（DTD）。目前来说最合适的 HTML 4.01过渡型， 即。在编写 HTML文档的时候，需要使用合适的元素。 HTML规范 中的一些元素， 如、、、

、 和 等，对开发人员来说比较陌生。但是这些元素富含语义，有适合它们使用的场景。如果使用 的是

和等通用元素，需要使用富含语义的 class属性来增加语义，说明元素的作 用。在 HTML文档编写完成之后，最好使用 W3C提供 的 HTML文档验证器来验证文档。

CSS

CSS 的语法非常简单，包含的元素也非常少，其中最主要的是样式规则集。样式规则集是一 系列样式声明规则的集合。每个样式规则由选择器和声明两部分组成。选择器用来选择文档 中的元素。这些元素将被应用上与选择器对应的样式声明。CSS不同版本规范所支持的选择 器类型不同，尽量使用常用并且简单的选择器以获得更好的浏览器兼容性，如 ID选择器、 class选择器和元素选择器。

使用 CSS的时候会遇到的一个很大的问题是浏览器兼容性。经常会遇到的情况是某种样式在 A和 C浏览器上应用正常，而在 B浏览器上则使用不正常。等到把 B浏览器调好了之后，却 发现 C浏览器上显示出现错误。解决这个问题的基本原则是要首先确定几个基准的浏览器和 开发基本的布局样式表。基准浏览器一般是所要支持的浏览器中对 CSS规范支持较好的浏览 器。基本的布局样式表保证在基准浏览器上应用的页面布局是正确的。目前的浏览器在 CSS 页面布局这一块的兼容性最差，尤其在盒模型（box model）、浮动定位等方面。而在显示样 式，如字体大小和颜色等方面，则基本上没有什么问题。

接下来要做的是让基本的布局样式表在除基准浏览器外的其它浏览器上正确工作。这个时候 就需要对某种版本的浏览器来应用特殊的样式，从而修正样式上的不一致。一种做法是利用 一些招数（hack）。招数是利用浏览器本身对 CSS规范支持的不完善或是实现上的 bug来识 别浏览器并应用样式。另外一种做法是通过 JavaScript来检测当前浏览器并应用样式。招数 可能会随着浏览器的版本更新而变得不可用，因此尽量少使用。

在一般 Ajax应用，最常被应用招数的是 IE 6。因为 IE 6对 CSS规范支持不完善，而且存在比 较多的 bug，但是 IE 6的用户目前还是数量众多，还是有支持的必要。对 IE浏览器应用特殊 样式的更好做法是使用 IE独有的条件注释。

当应用所包含的 CSS文件比较多的时候，开发和维护这些 CSS文件就成为一件比较困难的事 情。一个解决办法是把面向对象的思想引入到 CSS的编写过程中。两种重要的原则是组件化

Ajax应用开发：实践者指南

和单一职责。组件化的做法是开发出针对页面上某类元素的样式组件。这些样式组件可以在 不同的页面中任意组合使用。单一职责指的是把表示结构和外观的样式分开。与结构相关的 样式包括大小和位置，外观的样式包括字体大小、颜色和背景图片等。

DOM查询与操作

DOM 操作是 Ajax应用中页面动态和局部刷新的实现基础。DOM定义了文档的逻辑结构， 以及对文档进行访问和操作的方式。通过 DOM，开发人员可以在文档中自由导航，也可以 添加、更新和删除其中的元素和内容。通过 DOM规范提供的 API就可以完成对文档的查询 与操作。不过 DOM的原生 API使用起来比较繁琐，最好使用 JavaScript库来完成查询和操作。

通过 DOM操作对当前页面进行修改一般都是通过响应用户的事件而发生的。这些 DOM操 作中一部分是纯浏览器端实现的，另外一部分则需要服务器端的支持。服务器端可以选择返 回数据或 HTML片段。返回数据的好处是传输的数据量小，易于与第三方应用集成。不足之 处在于浏览器端需要额外的操作来完成展示。浏览器端可以使用 DOM操作或是模板技术来 生成 HTML片段。服务器端也可以通过 JSP和 Apache Velocity等模板技术来生成 HTML片段， 并直接返回给浏览器。浏览器只需要直接使用即可。这种做法的好处是浏览器端实现简单。 不足之处在于与展示相关的逻辑同时存在于服务器端和浏览器端，不容易维护。

有一些比较好的实践可以提高 DOM操作的性能。首先是使用文档片段（document fragment）。 当需要插入大量节点的时候，首先把这些节点添加到一个文档片段中，再把此文档片段添加 到文档上。这样可以减少页面的重新排列。其次是使用 innerHTML来更新文档内容，速度比 使用 DOM API要快。最后是通过 cloneNode()来创建多个结构相同的元素。

事件处理

Ajax 应用与用户的交互是通过响应用户事件的方式来完成的。浏览器负责捕获用户的行为 并产生各种不同的事件，应用处理这些事件。浏览器中可以产生的事件种类比较多。事件产 生之后，会按照一定的过程在当前文档树中传播。事件所产生的节点称为目标节点。完整的 事件传播流程是从文档的根节点开始向下传播到目标节点（捕获阶段），然后再往上传播回 根节点（冒泡阶段）。当事件传播到某个节点上的时候，就会触发此节点上绑定的处理方法。 （IE只支持冒泡阶段。）需要注意的是事件处理方法中 this所指向的对象的值，有可能是当 前节点或是 window对象。通过 JavaScript库提供的支持来绑定事件处理方法，可以避免这 些不一致。

在绑定事件处理方法的时候，可以利用事件的传播机制来减少事件监听器的数量。如当需要

Ajax应用开发：实践者指南

为一系列

元素添加鼠标点击的事件时，可以把该事件添加到其父节点

上。在完成对 事件的处理之后，可以终止事件的传播，还可以阻止浏览器的默认行为。

选用合适的 JavaScript框架

目前存在非常多的 JavaScript框架，有开源的也有商业的。比较流行的有 jQuery、Dojo、YUI、 ExtJs、MooTools和 Prototype等。选用流行框架的好处是有比较大的社区支持，遇到问题的 时候容易获得帮助。流行框架的文档和示例也比较丰富。使用不同的框架会给应用带来不同 的实现风格。jQuery的使用者对方法的级联情有独钟，Dojo的爱好者则倾向于把页面上的 不同部分划分成 dijit来实现。

选用什么样的框架的因素很多，技术的和非技术的都有。一般来说，轻量级的框架，如 jQuery 和 Prototype，上手比较容易，但是可复用的组件较 少；而比较庞大的框架，如 Dojo和 ExtJs， 则学习曲线较陡，但是可复用的组件非常多，适合快速开发复杂的 Ajax应用。

构建过程

Ajax应用也需要一个完整的构建过程。构建过程的主要目的是提高 Ajax应用的质量和性能。 这个构建过程可以包含的步骤有：

1. JavaScript代码的潜在错误和代码风格检查。通过集成 JSLint可以找到代码中潜在的问题

2. JavaScript文件的合并、缩减和混淆。通过合并可以把多个 JavaScript文件合成一个，减 少页面加载时的 HTTP请求个数；通过缩减可以去掉 JavaScript代码中多余的空白字符 和注释等，从而减少文件大小，降低下载时间；通过混淆则是可以替换有意义的变量名 称，从而进一步减少文件大小， 同时在一定程度上保护代码免被反向工程。可以执行 这些操作的工具有很多，Apache Ant就可以完成合并，JSMin和 YUI Compressor可以完 成文件的缩减，Dojo Shrinksafe可以进行混淆。

3. CSS文件的合并和缩减。与 JavaScript类似，CSS文件也可以执行同样的合并和缩减操作， 从而减少 HTTP请求数目和文件大小。YUI Compressor可以完成 CSS的缩减。

4. 图片文件的压缩。通过对图片文件进行格式转换和压缩，可以在不损失质量的前提下， 减少图片文件的大小。

测试

Ajax应用的测试包含服务器端和浏览器端两部分。对于服务器端来说，测试的技术和工具

Ajax应用开发：实践者指南

都已经比较成熟。只需要根据服务器端采用的技术来进行选择即可。一个比较重 要的原则 是服务器端和浏览器端尽量实行松散耦合，以方便测试。从这个角度出发，服务器端返回数 据，而不是 HTML片段是更好的做法。可以通过工具来测试服 务器端返回的结果是否正确。

QUnit , Dojo D.O.H浏览器端的测试目前情况不是非常理想。已经有一些单元测试的框架，如

等，也存在一些集成测试的工具，如 DOH robot和 Selenium等。就单元测试来说，目前对 仅用 JavaScript实现的纯逻辑代码较容易实现，而对于包含了与页面上节点交互的代码则较 难实现。不管是单元测试还是集成测试，目前自动化程度都不是很高。

为了便于测试，Ajax应用中各部分之间的耦合应尽可能的小。事件处理方法的方法体应尽可 能的简单。

调试

Ajax 应用的调试一直是一个比较麻烦的问题，其主要原因是不同浏览器之间存在着各种各 样的兼容性问题，同一浏览器的不同版本之间也会存在很多不同。为了在所支持 的浏览器 上达