FeaturesPluginsDocs & SupportCommunityPartners

编辑 JavaScript

从 6.1 版开始,NetBeans IDE 就提供了更强大的 JavaScript 编辑功能,为 Java、Ruby 和其他一些语言提供支持。下面的指南对这些功能进行了概述。

本教程所需要的软件

要学习本教程,您需要使用以下软件和资源。

软件或资源 所需版本
NetBeans IDE 版本 6.1版本 6.0
Java Developer Kit(JDK) 版本 6
版本 5

基本功能

本节介绍 IDE 中基本的 JavaScript 编辑功能。

创建新文件

可以通过“新建文件”向导在任何项目中创建新的 JavaScript 文件。单击“新建文件”->“其他”,打开向导。在向导中,打开“其他”类别,选择 JavaScript 文件。从模板中创建新的 JavaScript 文件。

如果想让 JavaScript 文件在“项目编辑器”中可见,可以在项目中适当的子文件夹(比如 src)中创建 JavaScript 文件。

默认的 JavaScript 模板只包含许可信息。要在模板中添加内容,可以转到“工具”->“模板”,打开 IDE 中的 JavaScript 模板。

语法高亮显示

IDE 为区分方法和变量提供了正真的 语义高亮显示

代码折叠

方法代码可以折叠或展开。在编辑器中,单击方法旁边的折叠图标,便可以将其折叠。单击折叠的方法旁边的展开图标,可以将其展开。折叠的代码由省略号框表示。省略号框把光标放在省略号框上,IDE 就会显示出折叠的方法。


将光标放在省略号上可显示折叠方法

可以在“视图”->“代码折叠”菜单中折叠或展开所有方法。

导航

IDE 的导航选项卡显示 JavaScript 文件结构。导航可用于识别原型样式类定义,并将它们显示为带有方法的类。


导航选项卡显示 Javascript 文件结构

后台解析器

解析器在后台运行并提供详细的错误消息。


后台解析器显示错误

括号匹配

括号自动关闭。键入一个 '、"、[、( 或 {,便会插入一个与之相匹配的结束符号。键入的结束符号将会取代插入的符号。按 Backspace 键删除开始符号,匹配的符号也会随之删除。

格式化

按下换行符,插入符号将会缩排到下一行预期开始的位置。按下“}”将会立即取消该行的缩排。重新格式化一个选择或者整个缓冲区重新缩排整个文件。

JSON 支持

JSON 文件被视为 JavaScript。后台解析器以一种独特的 JSON 模式运行,只允许不包含函数等内容的对象字面值表达式。

语义高亮显示

方法声明以粗体形式显示(包括对象字面值中的原型样式方法声明),全局变量显示为绿色,未被使用的变量带有灰色的下划线。


高亮显示的代码片段

标记出现位置

把插入符放在符号上就会高亮显示同一变量或调用的其他用途。此外,把插入符放在函数关键字上,该方法(return、throw)的所有返回值都将高亮显示。把插入符放在一个 return 上也会有同样效果。


高亮显示的返回值

立即重命名

在局部变量上按 Ctrl-R 或者 Command-R 键,可以在整个文件中同步重命名相同的符号。


同步重命名变量

重构

在一个产品中,可以找到一个变量或者操作的所有使用实例。发现了这些使用实例以后,您在出现该变量或操作的所有地方进行重命名并在整个产品中重构。在执行重构之前,您可以在分屏 UI 中预览所做的更改。

要查找并重命名变量或操作的所有使用实例:

  1. 在“编辑器”中选择一个出现该变量或操作的地方。
  2. 选择“编辑”>“查找使用实例”(Alt-F7)。可以选择查找注释和活动代码。打开“使用实例”视图并显示包含变量或操作的所有使用实例的树视图。


    查找选定变量的所有使用实例

  3. 再次在“编辑器”中选择该变量,选择“重构”>“重命名”(Ctrl-R/Command-R)。打开一个对话框,在其中键入新名称。
  4. 单击“预览”。在左边打开的是“重构”视图和替换的树视图,右边是最初的分屏和重构文件。


    预览所有使用实例的重构

  5. 可以选择不在单独的空间中重命名变量或操作。取消左边树视图中的单独重命名选择。


    未选择的单独重命名

  6. 检查后,单击“执行重构”,IDE 就会重构所有文件。

快速修复和语义检查

IDE 在 JavaScript 代码中执行大量语义检查,并提供快速修复。要显示快速修复,请选择“源”->“修复代码”(Alt-Enter)。语义检查包括:
  • 重新分配参数
  • 匿名函数不是总能返回值。
  • 变量隐藏参数
  • 没有负面影响的代码(没有调用,没有赋值)


    没有调用或赋值的代码

  • 条件(if x = y)中的赋值。该语义错误有几个与之相关联的快速修复,比如转换为一个“==”表达式,添加一对括号关闭警告。


    一个条件中的赋值的快速修复菜单

  • 函数返回值不一致(一些 return 表达式返回了值,一些没有)。


    返回值不一致

任务列表

后台解析器和警告快速修复与任务列表进行了集成。打开任务列表(“窗口”->“任务列表”),检查与 JavaScript 相关联的所有文件。在列表中双击一个任务,则编辑器转到相关的行。


任务列表显示快速修复

代码完成和类型分析

JavaScript 代码完成功能为 IDE 内置的 JavaScript 核心类插入代码提供了机会。例如,您可以编写
 x = "foo"; y = x; y. 

则代码完成功能将显示 JavaScript 字符串可用的方法。代码完成与 JavaScript 中所有的字面值类型一起工作。类型分析和代码完成机制也可识别原型样式类(仅限于正规函数)和构造它们的新的运算符。

NetBeans IDE 会提供函数参数和返回类型的类型参数(@type,@param)。这些类型在代码完成中显示:在列表中,在文档中,以及在参数提示中(Ctrl-P)。返回类型也在代码完成对话框中的函数名之后显示,由一个冒号隔开。


代码完成

如果用 @deprecated 标记一个方法,将会在此方法的导航和代码完成调用中删除它。随带的不推荐的描述在代码完成文档中一个独立的部分中以高亮背景显示。

NetBeans IDE 还可以确定很多函数的返回类型。此功能是 JSQuery 支持的精髓。例如,返回 true 或 false 的方法有一个 Boolean 返回类型,返回字面值数字的方法有一个 Number 返回类型,等等。通过注释,IDE 既可以推断类型,又可以显式追踪声明类型。最重要的实质是 IDE 通过调用跟踪类型。如果您有这样的代码:

"foo".big().charCodeAt(50).toExponential(fractionDigits);

NetBeans 首先意识到 foo 是字符串,因此它在 String 类中查找 big() 方法。该 String 上的 charCodeAt(50) 函数是 Number 类型,如果您在“to”上应用代码完成,那么您只能看到 Number 上可用的方法。

注意:查找返回类型需要访问索引,这将会花费大量时间,在类型分析过程中,IDE 将会在几秒钟内中止类型计算。这对大型函数、运行速度慢的计算机或高工作负载下的快速计算机很有帮助。

转至声明

按下 Ctrl 键,将光标放在一行代码上。单击变量名。当 IDE 不确定此变量的类型(和目标函数)时,它会弹出一个包含项目中所有变量声明的菜单。


用于转至变量声明的弹出菜单

文档

代码完成为核心 javascript API 和 DOM API 提供了 API 文档。您也可以查看自己的函数文档。按下 Ctrl 键并指向调用也可显示文档(作为工具提示)。


文档工具提示

嵌入式完成

HTML 中的元素 ID 上的代码完全可用于 Prototype.js $("...") 函数。要查看元素 ID 上的代码完成,只需在引号中按下 Ctrl-Space 键即可。例如,如果添加 variable = $("f|") 并按下 Ctrl-Space 键,然后将光标(|)放在 f 的后面,代码完成就会显示文档中以 f 开头的所有 HTML 元素 ID。


元素 ID 完成

浏览器兼容性

您可以选择支持 JavaScript 的浏览器。IDE 会删除选定浏览器不支持的代码完成选项。

要选择想要支持的浏览器:

  1. 打开“工具”>“选项”。
  2. 单击“其他”图标。将会打开一个选项卡页面。
  3. 打开 JavaScript 选项卡。
  4. 选择和取消选择浏览器和版本。

注意:文档 显示了支持归档的 API 元素的所有浏览器图标。


选择要支持的浏览器

在以下的代码完成对话框中,IDE 删除了几个选项,因为所选浏览器并不支持它们(只有 Opera)。


删除代码完成选择

嵌入

JavaScript 编辑功能用于处理嵌入到 RHTML、HTML 和 JSP 文件中的 JavaScript。

开放类型

按下 Ctrl-O 或 Command-O 键,可以快速跳转到所有文件中的任何一个函数。


转到类型对话框

JSDoc 支持

如果将一个方法注释为 @private,那么它在导航中的显示将带有一个锁图标。如果将一个函数注释为 @constructor,它会显示为一个构造函数(并包含在“new”关键字之后的代码完成中),您可以使用 @class@namespace 将函数显式地分配到给定类(通常可以通过类型分析器自动分配这些函数)。标记为 @ignore 的函数不会在代码完成中显示,但是会包含于索引之中,并且可以用于 转至声明


基本文件包含过滤

HTML 中的代码完成只包括引用的 JavaScript 文件中的代码。考虑一个项目,其中文件 foo.js 定义函数 foo(),文件 bar.js 定义函数 bar()。如果文件 hello.html 只包含 <script src="bar.js"></script>,那么只有 bar() 函数会在 hello.html 的代码完成中显示。



更多信息

关于使用 NetBeans IDE 编辑非 Java 语言的更多信息,请参见下列资源:

要发送意见和建议,获取支持,了解关于 NetBeans IDE Java EE 开发特性的最新发展,请加入 邮件列表

Companion
Projects:
MySQL Database Server   Open JDK: an Open SourceJDK   GlassFish Community: an Open Source Application Server    Mobile & Embedded Community    Open Solaris   java.net - The Source for Java Technology Collaboration   Virtual Box - full virtualizer  Open ESB - The Open Enterprise Service Bus Powered by