| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| <html> |
| <!-- Copyright (c) 2010, Oracle and/or its affiliates. All rights reserved. --> |
| <!-- Use is subject to license terms.--> |
| <head> |
| <title>编辑 JavaScript - NetBeans IDE 7.0-7.3 教程</title> |
| <meta name="description" |
| content="A document describing improved JavaScript editing features in NetBeans IDE."> |
| <link rel="stylesheet" href="../../../netbeans.css"> |
| |
| <meta HTTP-EQUIV="Content-Type" Content="text/html; charset=UTF-8"></head> |
| |
| <body> |
| <h1>编辑 JavaScript</h1> |
| |
| <p>NetBeans IDE 提供了更强大的 JavaScript 编辑功能，旨在为 Java、Ruby 和其他语言提供支持。下面的指南对这些功能进行了概述。</p> |
| |
| <div class="indent"> |
| <h3>目录</h3> |
| |
| <p><img alt="此页上的内容适用于 NetBeans IDE 6.9 及更高版本" class="stamp" src="../../../images_www/articles/71/netbeans-stamp-71-72-73.png" title="此页上的内容适用于 NetBeans IDE 6.9 及更高版本"></p> |
| |
| <ul class="toc"> |
| <li><a href="#basic">基本功能</a></li> |
| <li><a href="#semantic_highlighting">语义突出显示功能</a></li> |
| <li><a href="#mark_occurrences">标记实例</a> </li> |
| <li><a href="#instant_rename">即时重命名</a></li> |
| <li><a href="#refactoring">重构</a></li> |
| <li><a href="#quickfixes">快速修复和语义检查功能</a></li> |
| <li><a href="#tasklist">任务列表</a></li> |
| <li><a href="#code_completion">代码完成和类型分析功能</a></li> |
| <li><a href="#goto">转至声明</a></li> |
| <li><a href="#documentation">文档</a></li> |
| <li><a href="#embedded_completion">嵌入式完成</a></li> |
| <li><a href="#embedding">嵌入</a></li> |
| <li><a href="#open_type">打开类型</a></li> |
| <li><a href="#jsdoc_support">JSDoc 支持</a></li> |
| <li><a href="#basic_file_filtering">基本文件包含过滤</a></li> |
| <li><a href="#seealso">另请参见</a></li> |
| </ul> |
| </div> |
| <h3 class="tutorial">本教程所需要的软件</h3> |
| |
| <p><b>要学完本教程，您需要具备以下软件和资源。</b></p> |
| |
| <table> |
| <tbody> |
| <tr> |
| <th class="tblheader" scope="col">软件或资源</th> |
| <th class="tblheader" scope="col">要求的版本</th> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="https://netbeans.org/downloads/index.html">NetBeans IDE</a></td> |
| <td class="tbltd1">6.9 或 7.3</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://java.sun.com/javase/downloads/index.jsp">Java 开发工具包 (JDK)</a></td> |
| <td class="tbltd1">6</td> |
| </tr> |
| </tbody> |
| </table> |
| |
| <h2><a name="basic"></a>基本功能</h2> |
| |
| <p>在本部分中，我们将介绍 IDE 的基本 JavaScript 编辑功能。</p> |
| |
| <h3>创建新文件</h3> |
| |
| <p>通过新建文件向导，您可以在任何项目中创建新的 JavaScript 文件。单击 "New -> Other"（新建 -> 其他）以打开向导。在该向导中，打开 "Other"（其他）类别，然后选择 JavaScript 文件。此时将从模板创建新的 JavaScript 文件。</p> |
| |
| <p>如果要使 JavaScript 文件显示在项目编辑器中，请在项目的相应子文件夹中创建 JavaScript 文件，如 src。</p> |
| |
| <p>默认的 JavaScript 模板中仅包含许可信息。要向模板中添加内容，请转至 "Tools"（工具）-> "Templates"（模板），然后在 IDE 中打开 JavaScript 模板。</p> |
| |
| <h3>语法突出显示</h3> |
| |
| <p>IDE 提供了真正意义上的<a href="#semantic_highlighting">语义突出显示功能</a>，以区别方法和变量。</p> |
| |
| <h3>代码折叠</h3> |
| |
| <p>方法代码可以折叠或展开。在编辑器中，单击方法旁边的 <img alt="折叠" src="../../../images_www/articles/72/ide/javascript/collapse_node.png"> 图标，该方法随即会折叠起来。单击折叠的方法旁边的 <img alt="展开" src="../../../images_www/articles/72/ide/javascript/expand_node.png"> 图标，该方法随即会展开。折叠的代码由省略号框表示。<img alt="省略号框" src="../../../images_www/articles/72/ide/javascript/ellipsis_box.png"> 将光标悬停在省略号框上，IDE 随即会显示折叠的方法。</p> |
| |
| <p><br><img alt="将光标悬停在省略号上时所显示的折叠的方法" border="1" src="../../../images_www/articles/72/ide/javascript/show_collapsed_method.png" title="将光标悬停在省略号上时所显示的折叠的方法"> |
| |
| <p>您可以在 "View -> Code Folds"（视图 -> 代码折叠）菜单中折叠或展开所有方法。</p> |
| |
| <h3>导航</h3> |
| |
| <p>IDE 的 "Navigator"（导航器）标签显示 JavaScript 文件结构。"Navigator"（导航器）可识别原型样式类定义，并将其作为类与方法一起显示。</p> |
| |
| <p><br><img alt="显示 Javascript 文件结构的 "navigator"（导航器）标签" border="1" src="../../../images_www/articles/72/ide/javascript/js_navigator.png" title="显示 Javascript 文件结构的 "Navigator"（导航器）标签"> |
| |
| <h3>后台解析器</h3> |
| |
| <p>解析器在后台运行，并提供详细的错误消息。</p> |
| |
| <p><br><img alt="显示错误的后台解析器" border="1" src="../../../images_www/articles/72/ide/javascript/background_parser.png" title="显示错误的后台解析器"> |
| |
| <h3>括号匹配</h3> |
| |
| <p>自动添加右括号。键入 '、"、[、( 或 { 将自动插入匹配的右引号或右括号。键入右引号或右括号将直接使用插入的符号。删除左引号或左括号将删除匹配的符号。</p> |
| |
| <h3>格式设置</h3> |
| |
| <p>按换行键将根据下一行应该在的位置缩进脱字号。按 <code>}</code> 将立即凸排该行。重新设置所选内容或整个缓冲区的格式将重新缩进整个文件。</p> |
| |
| <h3>JSON 支持</h3> |
| |
| <p>JSON 文件被视为 JavaScript。后台解析器在特定的 JSON 模式下运行，在该模式下只允许不带函数的对象文字表达式等。</p> |
| |
| <h2><a name="semantic_highlighting"></a>语义突出显示功能</h2> |
| |
| <p>方法声明以粗体显示（包括对象文字中的原型样式方法声明），全局变量以绿色显示，而未使用的变量以灰色下划线显示。</p> |
| |
| <p><br> <img alt="显示突出显示的代码片段" border="1" src="../../../images_www/articles/72/ide/javascript/highlighting.png" title="显示突出显示的代码片段"></p> |
| |
| <h2><a name="mark_occurrences"></a>标记实例</h2> |
| 将脱字号放在某个符号上将突出显示同一变量或调用的其他用法。此外，将脱字号放在某个函数关键字上将突出显示方法 (return, throw) 的所有返回内容。将脱字号放在某个返回上时，情况也应该一样。 <p><br> <img alt="突出显示的返回" border="1" src="../../../images_www/articles/72/ide/javascript/mark_occurences.png" title="突出显示的返回"><br> <br> |
| <h2><a name="instant_rename"></a>即时重命名</h2> |
| <p>在局部变量上按 Ctrl-R/Command-R 组合键，即可在整个文件中同步重命名该符号。 </p> |
| <p><br><img alt="同步重命名变量" border="1" src="../../../images_www/articles/72/ide/javascript/instant_rename.png" title="在整个文件中将变量的所有实例重命名为 "number""> <br> |
| </p> |
| <h2><a name="refactoring"></a>重构</h2> |
| <p>您可以查找产品中某个变量或操作的所有使用实例。找到这些使用实例后，可以重命名该变量或操作的所有实例，并在整个产品中进行重构。在执行重构之前，可以在一个拆分屏幕 UI 中预览更改。</p> |
| <p><strong>查找并重命名变量或操作的所有使用实例：</strong></p> |
| <ol> |
| <li>在编辑器中选择变量或操作的一个实例。</li> |
| <li>选择 "Edit -> Find Usages"（编辑 -> 查找使用实例）（Alt-F7 组合键）。您可以选择搜索注释以及活动的代码。此时将打开 "Usages"（使用实例）视图，显示包含该变量或操作的所有使用实例的树视图。 |
| <p><br><img alt="查找所选变量的所有使用实例" border="1" src="../../../images_www/articles/72/ide/javascript/find_usages.png" title="查找变量 Abstract 的所有使用实例"></p> |
| <li>在编辑器中再次选择该变量，然后选择 "Refactor -> Rename"（重构 -> 重命名）（Ctrl-R/Command-R 组合键）。此时将打开一个对话框，您可以在其中键入新名称。</li> |
| <li>单击 "Preview"（预览）。此时将打开 "Refactoring"（重构）视图，其左侧会显示包含替换的树视图，其右侧会显示包含原始文件和重构文件的拆分屏幕。 <p><br> <img alt="所有使用实例重构的预览" border="1" src="../../../images_www/articles/72/ide/javascript/refactoring_preview.png" title="所有使用实例重构的预览"></p> |
| </li> |
| <li>您可以选择在个别位置不重命名变量或操作。在左侧的树视图中取消选择单独的重命名。 |
| <p><br><img alt="取消选择单独的重命名" border="1" src="../../../images_www/articles/72/ide/javascript/unselected_individual_renaming.png" title="取消选择单独的重命名"></p> |
| <li>检查后，请单击 "Do Refactoring"（执行重构），IDE 将重构所有文件。 |
| </ol> |
| <h2><a name="quickfixes"></a>快速修复和语义检查功能</h2> |
| IDE 会对 JavaScript 代码执行诸多语义检查，并提供快速修复功能。要显示快速修复功能，请选择 "Source -> Fix Code"（源 -> 修复代码）（Alt-Enter 组合键）。语义检查包括： |
| <ul><li>给参数重新赋值 </li> |
| <li>匿名函数无法始终返回值 </li> |
| <li>变量隐藏参数 </li> |
| <li> 没有副作用（无调用、无赋值）的代码 |
| <p><br><img alt="没有调用或赋值的代码" border="1" src="../../../images_www/articles/72/ide/javascript/nosideeffect.png" title="没有调用或赋值的代码"> </li> |
| <li>条件表达式 (if x = y) 中的赋值。此语义错误具有若干与其相关的快速修复，例如转换为 == 表达式，以及添加双括号以关闭警告。 <br> |
| <p><br> <img alt="条件中的赋值的快速修复菜单" border="1" src="../../../images_www/articles/72/ide/javascript/accidental_assignment.png" title="条件中的赋值的快速修复菜单"> </li> |
| <li> 函数的返回不一致（一些返回表达式返回值，而另一些不返回值） <p><br> <img alt="不一致的返回" border="1" src="../../../images_www/articles/72/ide/javascript/inconsistent_return.png" title="不一致的返回"> |
| </li> |
| </ul> |
| <h2><a name="tasklist"></a>任务列表</h2> |
| 任务列表中集成了后台解析器和警告快速修复。打开任务列表（"Window"（窗口）-> "Tasklist"（任务列表）），可查看与 JavaScript 关联的任何文件中的错误。双击该列表中的某个任务，编辑器将转至相关的行。 |
| <p><br> <img alt="显示快速修复的任务列表" src="../../../images_www/articles/72/ide/javascript/tasklist.png" title="显示快速修复的任务列表"></p> |
| <h2><a name="code_completion"></a>代码完成和类型分析功能</h2> |
| JavaScript 代码完成使您可以选择要插入代码中的 IDE 内置 JavaScript 核心类。例如，您可以编写 |
| <pre> x = "foo"; y = x; y. </pre> |
| <p>代码完成将向您显示可用于 JavaScript 字符串的方法。代码完成适用于 JavaScript 中的所有文字类型。类型分析和代码完成机制还知道原型样式类（仅常规函数）和用于构造这些类的新运算符。</p> |
| <p> NetBeans IDE 将参考函数参数的类型参数和返回类型 (@type, @param)。这些类型将显示在代码完成中，包括显示在列表、文档以及参数提示中（Ctrl-P 组合键）。在代码完成对话框中，返回类型也会显示在函数名称后面，并用冒号分隔。 </p> |
| <p><br> <img alt="代码完成" border="1" src="../../../images_www/articles/72/ide/javascript/code_completion.png" title="代码完成"> |
| <p> 如果使用 <tt>@deprecated</tt> 标记某个方法，则在此方法的导航器和代码完成调用中，它将被划掉。附带的过时描述将在代码完成文档中作为单独的部分以背景突出显示的方式显示。 |
| |
| <p> NetBeans IDE 还可以确定许多函数的返回类型。此函数是 JSQuery 支持所必需的。例如，方法如果返回 true 或 false，则返回类型为 Boolean；方法如果返回文字数值，则返回类型为 Number，依此类推。IDE 通过注释来推断类型并明确跟踪已声明的类型。最重要的意义在于，IDE 通过调用来沿用相应类型。如果您的代码如下所示：</p> |
| |
| <pre>"foo".big().charCodeAt(50).toExponential(fractionDigits);</pre> |
| |
| <p>NetBeans 首先看到 <tt>foo</tt> 是 String，因此，它将在 String 类中查找 <tt>big()</tt> 方法。该 String 中的 <tt>charCodeAt(50)</tt> 函数属于 Number 类型，因此，如果对此处的 "to" 应用代码完成，则只会看到用于 Number 的方法。 |
| <p><strong>注：</strong>查找返回类型涉及对索引的访问，这可能需要一段时间。因此，在类型分析期间，IDE 会查看时钟，过一到两秒后，它会中止类型计算。对大型函数、运行速度缓慢或运行速度快但不堪重负的计算机而言，这可能是很有意义的。 |
| <h2><a name="goto"></a>转至声明</h2> |
| 按 Ctrl 键并将光标放在一行代码上。左键单击变量名称。当 IDE 无法确定变量的类型（从而无法确定目标函数）时，它将为您提供一个弹出式菜单，其中包含项目中所有变量的声明： |
| <p><br> <img alt="转至变量声明的弹出式窗口" border="1" src="../../../images_www/articles/72/ide/javascript/goto.png" title="转至变量声明的弹出式窗口"><br> <br> |
| <h2><a name="documentation"></a>文档</h2> |
| 代码完成显示核心 javascript API 和 DOM API 的 API 文档。您还可以查看自己的函数的文档。在按住 Ctrl 键的同时指向调用也会显示文档（作为工具提示）。 <p><br> <img alt="文档工具提示" border="1" src="../../../images_www/articles/72/ide/javascript/documentation.png" title="文档工具提示"> <br> |
| <h2><a name="embedded_completion"></a>嵌入式完成</h2> |
| HTML 中元素 ID 上的代码完成适用于 <tt>Prototype.js $("...")</tt> 函数。要查看元素 ID 上的代码完成，请在光标位于引号内时按 Ctrl-空格组合键。例如，如果添加 <em>variable</em> = $("f<strong>|</strong>")，并在光标 (<strong>|) </strong>紧接在 f 后时按 Ctrl-空格组合键，则代码完成将显示文档中以 f 开头的所有 HTML 元素 ID。 |
| <p><br> <img alt="元素 ID 完成" border="1" src="../../../images_www/articles/72/ide/javascript/embedded_completion.png" title="元素 ID 完成"><br> <br> |
| <h2><a name="embedding"></a>嵌入</h2> |
| JavaScript 编辑功能可用于 RHTML、HTML 和 JSP 文件中嵌入的 JavaScript。 <br> <br> |
| <h2><a name="open_type"></a>打开类型</h2> |
| 按 Ctrl-O/Command-O 组合键并快速跳转至文件中的任意函数。 <p><br> <img alt=""Go to type"（转至类型）对话框" src="../../../images_www/articles/72/ide/javascript/find_type.png" title=""Go to type"（转至类型）对话框"><br> <br> |
| <h2><a name="jsdoc_support"></a>JSDoc 支持</h2> |
| <p>如果使用 <tt>@private</tt> 对某个方法进行标注，则该方法将显示在导航器中，并带有一个锁状图标。如果使用 <tt>@constructor</tt> 对某个函数进行标注，则该函数将显示为一个构造函数（并包含在代码完成中的 "new" 关键字之后），可以使用 <tt>@class</tt> 和 <tt>@namespace</tt> 为给定的类明确指定函数（虽然类型分析器通常可以自动指定这些函数）。标记 <tt>@ignore</tt> 的函数不显示在代码完成中，但包含在索引中，并且可以在<a href="#goto">转至声明</a>中使用。 </p> |
| <br> |
| <h2><a name="basic_file_filtering"></a>基本文件包含过滤</h2> |
| HTML 中的代码完成仅包含来自引用的 JavaScript 文件的代码。考虑这样一个项目，其中文件 <tt>foo.js</tt> 定义函数 <tt>foo()</tt>，而文件 <tt>bar.js</tt> 定义函数 <tt>bar()</tt>。如果文件 <tt>hello.html</tt> 只包含 <tt><script src="bar.js"></script></tt>，则只有 <tt>bar()</tt> 函数才会显示在 <tt>hello.html</tt> 的代码完成中。 <br> |
| <p><br> |
| </p> |
| |
| <div class="feedback-box" ><a href="/about/contact_form.html?to=3&subject=Feedback:%20JavaScript%20Editing%20in%20NetBeans%20IDE%206.1">请将您的反馈意见发送给我们</a></div> |
| <br style="clear:both;"> |
| <!-- ======================================================================================= --> |
| <h2><a name="seealso"></a>另请参见</h2> |
| <p>有关使用 NetBeans IDE 编辑非 Java Web 语言的详细信息，请参见以下资源： </p> |
| <ul> |
| <li><a href="../../trails/java-ee.html">JavaEE 和 Java Web 学习资源</a>的 JavaScript、Python 和 Groovy 部分 </li> |
| <li><a href="../../trails/php.html">PHP 应用程序学习资源</a>。</li> |
| </ul> |
| <p>要发送意见和建议、获得支持以及随时了解 NetBeans IDE Java EE 开发功能的最新开发情况，请<a href="../../../community/lists/top.html">加入 nbj2ee@netbeans.org 邮件列表</a>。</p> |
| </body> |
| </html> |
