构建Ajax应用：从调试到测试的全流程指南

### 构建 Ajax 应用：从调试到测试的全流程指南 在开发 Ajax 应用时，调试、应用结构组织、测试和性能基准测试都是至关重要的环节。本文将详细介绍如何利用 Eclipse 进行调试，如何组织应用结构，以及如何使用 JUnit 进行测试和基准测试。 #### 1. 在 Eclipse 中调试 Eclipse 为调试运行中的 Java 应用提供了良好的环境。当以托管模式运行 GWT 应用时，Eclipse 将其作为 Java 应用运行，你可以在 Eclipse 内进行调试。这对于 Ajax 开发过程来说是一个巨大的进步。 ##### 1.1 设置断点 断点允许你在代码中设置一个位置，当程序执行到该位置时，应用会暂停并将控制权交给调试器。这样你可以检查变量，逐行分析程序流程。以下是设置断点的步骤： 1. 在编辑器中，右键单击按钮的 `ClickListener.onClick` 方法的第一行的左边距，选择 `Toggle Breakpoint`。你会看到边距中出现一个蓝色圆圈，表示断点已添加。 2. 或者，你也可以双击边距中的同一位置来切换断点。 设置好断点后，从工具栏上的 Bug 图标打开 `Debug` 菜单，选择 `HelloWorld` 启动调试器。当 `HelloWorld` 应用在托管模式浏览器中打开时，点击 `Click Me` 按钮，Eclipse 将显示调试器。 ##### 1.2 调试工具 在调试透视图中，有一些常用的工具： - **Resume（继续）按钮**：绿色三角形，让程序继续运行。 - **Terminate（终止）按钮**：红色正方形，结束调试会话。当程序在断点处停止时，无法访问托管模式浏览器的界面，此时只能使用该按钮结束程序。 - **Step Into（进入）按钮**：黄色箭头，调用当前行的下一个方法，通常会进入另一个方法并在栈中添加一行。 - **Step Over（跳过）按钮**：黄色箭头，执行当前行，调用任何方法，并在当前方法的下一行停止。 - **Step Return（返回）按钮**：黄色箭头，执行当前方法的其余部分并返回到调用方法，在调用方法处停止。 ##### 1.3 调用栈和变量视图 调试控件下方是调用栈，它是一个树状结构，列出了 Java 应用中的线程及其栈。Ajax 应用是单线程的，因此我们只需要关注一个线程及其栈。当在 `onClick` 方法中命中断点时，单个 JavaScript 线程会显示其方法调用栈，并突出显示当前方法。你可以点击栈中的其他方法，在编辑器中查看其代码。 变量视图列出了当前方法中的局部变量和使用的变量。它是一个列树，允许你浏览每个变量的内容，如果是对象，则在第二列中显示其值。 ##### 1.4 异常断点 有时，仅使用断点逐行调试应用不足以找到和修复问题。例如，异常可能在未知时间发生，设置断点可能会导致调试器在遇到异常之前中断数千次。Eclipse 提供了在特定异常发生时中断调试器的功能。添加异常断点的步骤如下： 1. 选择 `Run > Add Java Exception Breakpoint`。 2. 在弹出的对话框中，选择你想要中断的异常。列表会根据输入的文本动态更新。 3. 点击 `OK` 后，你可以在调试透视图的 `Breakpoints` 视图中看到添加的断点。 为了测试异常断点，我们可以编写以下代码： ```java public void onModuleLoad() { int[] ints = new int[1000]; for (int i = 0; i <= 1000; i++) { ints[i] = i; } } ``` 当以调试模式运行应用时，Eclipse 会在代码尝试写入数组的第 1001 个元素时中断。此时，你可以在变量窗口中看到 `i` 的值为 1000。 ##### 1.5 实时更新代码 当发现代码中有 bug 时，Eclipse 允许你实时更新代码并恢复应用，而无需重新启动。例如，将上述代码中的比较操作从 `<= 1000` 改为 `< ints.length`，保存文件，恢复应用，然后点击托管模式浏览器上的 `Refresh` 按钮，你会看到应用运行修复后的代码，不再遇到异常。 #### 2. 组织应用结构 使用 GWT 的 `applicationCreator` 脚本生成应用时，脚本会创建遵循推荐结构的文件和目录。每个应用共享 `Projects` 目录。 ##### 2.1 目录结构 - **src 目录**：应用源文件所在的目录，多个应用可以共享该目录。源代码按照标准 Java 包结构组织，例如 `src/com/gwt/examples`。 - **client 子目录**：包含将被编译为 JavaScript 的 Java 源文件。GWT 编译器会自动包含该目录下的子目录和包，无需继承模块。 - **public 子目录**：包含静态应用文件，如 HTML 主机文件、CSS 文件和图像等。GWT 编译器会将该目录下的所有文件复制到 `www` 输出目录。 - **server 子目录**：用于放置不应该编译为 JavaScript 的服务器端代码，如 GWT RPC servlet。 ##### 2.2 模块文件 每个生成的 GWT 应用都有一个模块文件，如 `HelloWorld2.gwt.xml`。该文件指定了应用的配置选项，例如： ```xml <module> <!-- Inherit the core Web Toolkit stuff. --> <inherits name='com.google.gwt.user.User'/> <!-- Specify the app entry point class. --> <entry-point class='com.gwtapps.examples.client.HelloWorld2'/> </module> ``` 模块文件告诉 GWT 编译器应用的入口点类和需要使用的模块。 #### 3. 测试应用 在开发大型 Ajax 应用时，能够轻松创建单元测试对于维护应用至关重要。传统的瀑布开发周期在测试阶段容易引入新的 bug，而一种成功的测试方法是让开发人员在编写功能之前编写自动化单元测试。 ##### 3.1 测试优先的开发方法 测试优先的开发方法有以下优点： - 测试覆盖新功能的每个用例，确保每个功能都经过测试。 - 如果新功能导致应用的任何部分出现问题，自动化测试套件中的其他测试将能够识别该问题。 - 在开发周期早期发现和修复 bug 比在后期更容易和快速。 ##### 3.