用 JSEclipse 构建 JavaScript 应用程序(1)

 

准备工作

本教程将介绍两个工具并说明如何创建一个全新的物种，那么让我们先做一些准备工作。

需要完成的任务

本教程将用大量篇幅描述不断进化的 “物种” 的出现 —— 在 Web 页面中到处移动，寻找同类进行繁殖并创造出具有类似属性的新生物的元素 —— 或者在找到同类之前死去。

本教程的学习时间只有一个小时，因此生物将十分简单。这些生物是具有各种尺寸、颜色和速度的正方形，并且它们遇到另一个生物时，将以半随机方式繁殖创造结合了两者属性的生物。如果幸运的话，得到的是一组到处移动的生物。

图 1. 生物群落

此 “群落” 不像 其他已经创建的其他生物一样复杂。例如，Second Life 用户所创建的一些生物，例如 Laukosargas Svarog 的 Svarga 和 Luciftias Neurocam 的 Terminus，都是非常漂亮的。Pagan Bishop 的 Basic Evo Objects 中的所有属性每一代都进化，因此甚至他也不知道如何结束。对于我们的简单教程，使用活泼、不断进化的正方形就可以了。

如何整合

完成这项工作需要几个部分，因此让我们查看有哪几个部分以及如何整合。

我们将使用 JavaScript 构建此应用程序，因此首先创建一个简单 Web 页面并引用含有环境控制脚本的外部文件。该脚本将引用一个表示生物的类。至于工具，将结合使用 Eclipse IDE 与 JSEclipse 插件。这将为您提供一个便利的 JavaScript 编辑器以及自动完成代码的工具。最初，能够在 Eclipse 的浏览器中查看创建的 Web 页面，因此开发将很好地包含在一个环境中。JSEclipse 不提供实际的调试器，因此当需要进行调试时，不使用 Eclipse，而在 Firefox 中直接打开页面，使用 Firebug 插件调试它。

让我们开始整合各个部分。

获得 JSEclipse

如果尚未安装 Eclipse IDE，请立即安装（请参阅 系统要求）。本教程使用的是 Eclipse V3.3.1.1，因此如果遇到插件安装问题，则可以尝试安装该版本。

下一步是获得 JSEclipse 插件。完成该操作的最简单方法是使用 Eclipse 的内置更新系统：

1. 安装 Eclipse。
2. 启动 Eclipse。
3. 如果有必要，请选择 “Go to Workbench”。
4. 从 Workbench 菜单中，选择 Help > Software Updates > Find and Install。
5. 选择 Search for new features to install。
   
   
   图 2. 选择搜索新功能
   

6.单击 Next 继续创建一个新更新站点。

创建新更新站点

新功能和插件托管在特定的更新站点中。Eclipse 安装中预先配置了这其中的一些站点，但是需要为 JSEclipse 添加一个新更新站点：

1. 单击窗口右侧的 New Update Site。
2. 输入名称 JSEclipse（或者记得住的任何其他名称）以及 URL http://download.macromedia.com/pub/labs/jseclipse/autoinstall。
   
   
   图 3. 添加新更新站点信息

3.单击 OK 将新站点添加到列表中。

 

安装 JSEclipse

新站点就绪后，可以使用它安装 JSEclipse：

1. 确保通过选中新站点旁边的复选框选中要更新的新站点，然后单击 Finish。
2. JSEclipse 是托管在此站点中的惟一一个功能，因此它应当十分易于查找。选择 JSEclipse 功能并单击 Next。
   
   
   图 4. 选择要安装的功能
   

 

1. 接受许可证协议并单击 Next。
2. 检验 Eclipse 安装位置并单击 Finish。
3. 出于安全（以及代码完整性）原因，实际安装将查看功能是否已被签名。它尚未被签名，因此请确认是否需要安装这个未签名的功能，如图 5 所示，然后单击 Install。

 

 

安装完成后，单击 Apply Changes。应当不必重新启动 Eclipse，但是如果 Eclipse 运行不正常，则最好重新启动。

现在 JSEclipse 已经安装，接下来需要进行配置。

配置 JSEclipse

使用 JSEclipse 插件可以让您很好地控制用户体验。要配置 JSEclipse，请选择 Window > Preferences > JSEclipse 打开首选项。 

 

JSEclipse 首选项有四种。

General 首选项

这些是首选项，例如弹出自动完成下拉菜单需要等待的时间、是否执行错误报告以及是否突出显示当前变量的其他出现位置。

Syntax coloring

使用 JSEclipse 不但可以完全控制彩色编码内容，例如函数名、变量等，而且还可以完全控制哪个颜色代表哪个条目，以便可以更轻松地阅读，或者匹配现有颜色模式，比方说，来自另一个编辑器。

Templates

正如您将在 使用代码模板轻松编程：多维数组 部分中看到的那样，JSEclipse 包括常用类型的代码模板，例如 for 循环、函数等。使用此模板可以激活或者取消激活现有模板，并且可以根据需要导入新模板。

Typing

使用 IDE 的优点之一是可以自动化完成诸如添加结束括号之类的任务。如果您觉得使用该功能会让自己变得懒惰，则可以在这里的首选项中关闭此功能。

接下来，需要设置 Eclipse 使用该插件。

将 JSEclipse 设为 JavaScript 编辑器

需要告诉 Eclipse 它有一个 JavaScript 文件的专用编辑器，这样它将不使用通用文本编辑器。选择 Window > Preferences > General > Editors > File Associations。高亮选中 *.js 文件扩展名并确保 JSEclipse 是相关编辑器。

图 7. 将 JSEclipse 编辑器配置为默认编辑器
 

如果没有 *.js 扩展名，请单击顶部的 Add 按钮，然后将该扩展名添加到对话框中。如果 *.js 扩展名没有用 JSEclipse 作为其默认编辑器，请单击底部的 Add 按钮。选择 Internal Editors > JSEclipse HTML Editor 并单击 Add 将其设为默认值。

现在让我们看看 JSEclipse 如何运行。

 

基本项目

现在已经安装了 JSEclipse，请继续并启动实际项目。JavaScript 应用程序通常都比 Java 应用程序简单，但是您仍然可以把各个部分整合在一起。

创建新项目

首先创建一个新 Eclipse 项目以保存所有部分。可以使用现有文件，但是我们假定您将从头开始。创建一个新项目：

1. 选择 File > New > Project > General > Project。
2. 单击 Next。
3. 输入项目名称并选择项目的位置，如图 8 所示。如果已经有一个现有应用程序，则可以取消选中 Use default location 并指向包含现有文件的文件夹。
   
   
   
   图 8. 设置项目的名称和位置
   单击 Finish 创建项目。此操作应当会把您带回到熟悉的 Eclipse 工作区中。

创建主页面

现在已经有一个项目，接下来需要创建主页面。大多数 JavaScript 应用程序都是在 Web 页面中运行的，当然，这个应用程序也不例外。因此让我们首先创建生物的生存环境。

在项目上右键单击并选择 New > File。假定要创建一个新文件，键入文件名 environment.html 并单击 Finish。

另一方面，如果创建了一个空项目，但是需要直接包括一个现有文件，则可以：

1. 单击 Advanced。
2. 选中 Link to file in the file system。
3. 浏览查找文件。
   
   
   图 9. 创建新文件
    

 

托管 HTML 页面

应用程序所在的 HTML 页面非常简单。将以下代码输入到 environment.html 文件中。

清单 1. 基本的 HTML 页面

environment.html

< html >
< head ></ head >
< body >

< div  id ="environment"  style ="float: right; width: 600px; 
     height: 500px; border: 3px solid black;position: 
     relative;" >

</ div >

</ body >
</ html >

在这里创建了一个简单的 HTML 页面，内容包括一个 div 元素。该元素实质上是一个大框，宽度为 600 像素，高度为 500 像素，周围是用 3 像素宽的实线绘制的黑色边框。我特意把位置设为相对位置，这样位置属性将从稍后放在 div 中的代码继承。

选择 File > Save 或按 Ctrl+S 组合键保存文件。

 

在浏览器中查看页面

作为一名 JavaScript 开发人员，我确信您知道如何在浏览器中打开页面。但是在本例中，我将引用 Eclipse 中的浏览器，以便能够尽可能地在一个窗口中进行所有开发。当您在右侧的 Project Explorer 中右键单击文件时，应当会看到一个选项菜单弹出。

图 10. 打开文件的选项

 

 

正如您可以看到的，有多种选择，这些选择都基于 Eclipse 所知道的文件扩展名。已经假定需要使用 JSEclipse HTML 编辑器，因此可以看到菜单后面的彩色编码。还记得为 *.js 文件添加默认编辑器的时候么？这个菜单是按照同样的原理工作的。

选择 Web browser。您应当会看到基本页面。

图 11. 基本的 HTML 页面

 

好的 —— 没有太多可看的内容，但是该框将是我们的生物生存的环境。现在只需要创建这些生物。

向 HTML 中添加一小段 JavaScript

在配置 Eclipse 时，确保了 JSEclipse 是 *.js 文件的默认编辑器，但是把 JavaScript 嵌入到 HTML 文件中一定不少见。幸运的是，我们可以使用一种轻松的方法来处理该问题，您马上就会看到。

首先将以下代码添加到 environment.html 中。

清单 2. 将 JavaScript 添加到页面中

< html >
< head >

< script  type ="text/javascript" > ...

var maxSize = 100;
var maxWidth = 600;
var maxHeight = 500;

var theCreature;
var theCreature2;

var interval = 100

function createNewEnvironment()...{
     alert("Creating new items...");
}

</ script >

</ head >
< body  onload ="createNewEnvironment()" >

< div  id ="environment"  style ="float: right; width: 600px; 
     height: 500px; border: 3px solid black;position: 
     relative;" ></ div >

</ body >
</ html >

代码本身非常简单。稍后将详细说明这段代码，但是现在，只需注意我们将设置一些初始变量，并且已经创建了一个函数 createNewEnvironment()，页面首次装载时将调用该函数。

现在，如何编辑它？

使用 JSEclipse 编辑嵌入的 JavaScript

要在 JSEclipse 中编辑页面的脚本部分，请在页面的脚本元素上右键单击并选择 Edit in JSEclipse。

图 12. 在脚本上右键单击将提供使用 JSEclipse 编辑该脚本的选项
 

选择 Edit in JSEclipse 之后，编辑器将创建一个临时文件并在 JavaScript 编辑器中打开它。

 

 

注意，此临时页面的编辑器提供了所需的所有功能，例如彩色编码、代码概要等。如果更改并保存此临时页面，则会发现更改被镜像到原始页面中。此功能对于有 “多层次” 页面、有很多难于跟踪和编辑的嵌入式 JavaScript 的情况十分有用，而且更是对调试大有帮助。可是，在大多数情况下，如果使用 IDE，使用单独的文件更容易。

使用外部脚本

为了便于维护（不考虑别的因素），通常最好把脚本包含在独立文件中。在本例中，我们已经得到了三个文件。

清单 3. 添加外部文件

< html >
< head >

< script  src ="Creature.js"  type ="text/javascript" ></ script >
< script  src ="MultiDimensionalArray.js"   
        type ="text/javascript" ></ script >

< script  src ="environment.js"  type ="text/javascript" ></ script >

</ head >
< body  onload ="createNewEnvironment()" >
...

从底部开始，environment.js 将包含主控制脚本，该脚本将触发进化进程并持续执行。在 environment.html 所在的目录中创建这个新文件并添加最初在刚刚替换的脚本元素中的代码。MultiDimensionalArray.js 文件将包含为跟踪生物创建的实用程序类，Creature.js 文件将包含生物的实际类定义。目前，只需在 environment.html 所在的目录中创建这两个脚本的空文件并保存。

现在可以开始讨论实际应用程序。