Редактирование JavaScript

IDE NetBeans обеспечивает усовершенствованные функции редактирования JavaScript, смоделированные для поддержки, уже обеспеченной для Java, Ruby и других языков. Данное руководство содержит обзор этих функций.

Программное обеспечение, требуемое для работы с данным учебным курсом.

Для работы с этим учебным курсом требуются программное обеспечение и ресурсы, перечисленные ниже.

Программное обеспечение или материал Требуемая версия
IDE NetBeans 6.9 или 7.3
Комплект для разработчика на языке Java (JDK) 6

Основные функции

В этом разделе мы представим основные функции редактирования JavaScript среды IDE.

Создание новых файлов

Новый файл JavaScript можно создать в любом проекте, посредством мастера создания файлов. Щелкните "Создать" -> "Другое" для открытия мастера. В мастере откройте категорию "Другое" и выберите файл JavaScript. Из шаблона будет создан новый файл JavaScript.

Если файл JavaScript должен быть видимым в редакторе проектов, создайте файл JavaScript в соответствующей подпапке проекта, такой как src.

Шаблон JavaScript по умолчанию содержит только сведения о лицензировании. Чтобы добавить к шаблону содержимое, перейдите к "Средства" -> "Шаблоны" и откройте шаблон JavaScript в среде IDE.

Выделение синтаксиса

Среда IDE предоставляет настоящее семантическое выделение, чтобы можно было различать методы и переменные.

Свертывание кода

Метод кода может быть свернут или развернут. В редакторе щелкните значок свернуть рядом с мотодом и он будет свернут. Щелкните значок развернуть рядом со свернутым методом и он будет развернут. Свернутый код помечается многоточием в рамке. кнопка в виде эллипса Удерживайте курсор над эллиптической формы кнопкой и в IDE отобразится свернутый метод.


отображается свернутый метод с помощью удержания курсора над кнопкой в виде эллипса

Можно развернуть или свернуть все методы в меню "Представление" -> "Свертки кода".

Переходы

На вкладке переходов среды IDE отображается структура файла JavaScript. Вкладка переходов распознает определения классов в стиле прототипов и показывает их как классы с методами.


на вкладке 'Навигатор' отображается структура файла JavaScript.

Фоновое средство синтаксического анализа

Средство синтаксического анализа работает в фоновом режиме и предоставляет подробные сообщения об ошибках.


фоновое средство синтаксического анализа, в котором отображается ошибка

Парные скобки

Скобки закрываются автоматически. При вводе ', ", [, ( или { вставляется соответствующий символ для закрытия скобок. При вводе закрывающего символа вручную вставленный будет переписан. При удалении открывающего символа возвратом со стиранием удаляется и парный к нему символ.

Форматирование

При нажатии на клавишу перехода на новую строку курсор переводится туда, где должна быть следующая строка. При нажатии на клавишу } отступ в строке будет немедленно уменьшен. При переформатировании выбранной области или всего буфера отступы для всего файла будут восстановлены.

Поддержка JSON

Работа с файлами JSON осуществляется как с JavaScript. Фоновое средство синтаксического анализа работает в специальном режиме JSON, где разрешается только выражение объектного литерала без функций и т.д.

Семантическое выделение

Объявления методов выделяются жирным шрифтом (включая объявления методов в стиле прототипов в объектных литералах), глобальные переменные выделяются зеленым, а неиспользованные переменные подчеркиваются серым.


фрагмент кода, в котором показано выделение

Пометка вхождений

При наведении курсора на символ будут выделены другие вхождения этой переменной или вызова. Кроме того, при наведении курсора на ключевое слово функции будет выделено всё возвращаемое этим методом (возвращаемые значения, создаваемые исключения). Это также произойдет, если навести курсор на возвращаемое значение.


выделенные возвращаемые элементы

Быстрое переименование

Нажмите Ctrl-R/Command-R на локальной переменной, и символ можно будет одновременно переименовать по всему файлу.


синхронное переименование переменных

Реорганизация

Можно найти все случаи использования переменной или операции внутри продукта. После их обнаружения можно выполнить переименование всех вхождений переменной или операции или реорганизацию во всём продукте. Перед выполнением реорганизации предварительный просмотр изменений можно выполнить на разделенном экране.

Для поиска и переименования всех экземпляров переменной или операции выполните следующие действия.

  1. Выберите вхождение переменной или операции в редакторе.
  2. Выберите "Изменить" -> "Найти вхождения" (Alt-F7). Поиск можно выполнять как по активному коду, так и по комментариям. Откроется представление вхождений, показывающее дерево всех случаев использования переменной или операции.


    поиск всех использований выбранной переменной

  3. Выберите переменную в редакторе снова, затем выберите "Рефакторинг" -> "Переименовать" (Ctrl-R/Command-R). Откроется диалоговое окно, в которое можно будет ввести новое имя.
  4. Нажмите кнопку "Preview". Откроется представление реорганизации с деревом замен слева и разделенным экраном, на котором показан исходный файл и файл после реорганизации, справа.


    предварительный просмотр реорганизации для всех вариантов использования

  5. Можно отменять переименование для отдельных вхождений переменной или операции. Отменяйте выбор отдельных вхождений в дереве слева.


    снято выделение переименования по отдельности

  6. После предварительного просмотра нажмите кнопку "Выполнить реорганизацию", и среда IDE выполнит реорганизацию всех файлов.

Быстрые исправления и семантические проверки

Среда IDE выполняет множество семантических проверок кода JavaScript и предлагает быстрые исправления. Для отображения быстрых исправлений выберите Source ("Исходный код") -> Fix Code ("Исправить код") (Alt-ВВОД). В число семантические проверок входят следующие.
  • Переприсваивание параметра;
  • Анонимная функция не всегда возвращает значение;
  • Переменная скрывает аргумент;
  • Код без побочных эффектов (нет вызовов, нет присваиваний);


    код без вызовов или назначений

  • Присваивание в условном операторе (if x = y); С этой семантической ошибкой связано несколько быстрых исправлений, таких как преобразование в выражение == и добавление двойных скобок для отключения предупреждения.


    меню быстрых исправлений для назначения в условном

  • Противоречивый возврат от функции (некоторые возвращаемые выражения возвращают значение, а некоторые нет).


    несогласованные элементы

Список задач

Фоновое средство синтаксического анализа и быстрые исправления предупреждений интегрированы со списком задач. Откройте список задач (окно -> Tasklist ("Список задач")) для просмотра ошибок в файлах, связанных с JavaScript. Дважды щелкните задачу в списке, и редактор перейдет к соответствующей строке.


список задач, в котором отображаются быстрые исправления

Автозавершение и анализ типов

Автозавершение кода JavaScript предоставляет возможность выбрать между встроенными в среду IDE основными классами JavaScript, которые можно вставить в код. Например, можно написать:
    x = "foo";      y = x;      y.  

и автозавершение кода покажет методы, доступные для строк JavaScript. Автозавершение кода работает со всеми литеральными типами в JavaScript. Механизму анализа типов и автозавершения кода также известны классы в стиле прототипа (только для регулярных функций) и операция new для их конструирования.

IDE NetBeans содержит информацию о параметров типов для параметров функций и  возвращаемых типов (@type, @param). Эти типы показываются в автозавершении кода: в списке, в документации и в подсказках параметров (Ctrl-P). Возвращаемые типы также показываются в диалоговом окне автозавершения кода после имени функции, отделенные двоеточием.


автозавершение кода

Если метод помечен как @deprecated, он перечеркивается в навигаторе и в вызовах к нему автозавершения кода. Сопровождающее описание нерекомендуемого метода показывается в отдельном разделе документации автозавершения, с выделением фона.

IDE NetBeans также может определить   возвращаемые типы для многих функций. Это важно для поддержки JSQuery. Например, методы, возвращающие true или false, имеют тип возврата Boolean ("булево"), методы, возвращающие алгебраические числа, имеют тип возврата Number ("Число") и т. д. Среда IDE как логически выводит типы, так и прямо отслеживает заявленные типы через комментарии. Наиболее важное следствие из этого состоит в том, что среда IDE отслеживает типы, проходящие через вызовы.Если у нас есть вот такой код:

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

NetBeans сперва видит, что foo – это String, так что она ищет в классе String метод big(). Функция charCodeAt(50) в этой String принадлежит к типу Number, так что если здесь применить автозавершение кода к "to", можно будет увидеть только методы, доступные в Number. 

Примечание Поиск возвращаемых типов включает в себя переход к индексу, который может занять определенное время, поэтому во время анализа типа IDE  отслеживание времени по часам и после одной или двух прошедших секунд   вычисление типов прерывается. Это может быть актуально для больших функций, медленных компьютеров или быстрых компьютеров с большой рабочей нагрузкой.

Переход к объявлению

Нажмите Ctrl и наведите курсор на строку кода. Щелкните левой кнопкой мыши имя переменной. Если среда IDE не может точно определить тип переменной (и, следовательно, целевую функцию), она предлагает всплывающее меню со всеми объявлениями переменной в проекте:


всплывающее окно для перехода к объявлению переменных

Документирование

При автозавершении кода отображается документация по интерфейсам API как для основных интерфейсов API javascript, так и для интерфейсов API DOM. Можно также просмотреть документацию для собственноручно созданных функций. При щелчке вызова при удерживаемой клавише Ctrl также будет показана документация (в форме подсказки).


Подсказка по документации

Автозавершение встроенного кода

Автозавершение кода на идентификаторах элементов в HTML работает для функции Prototype.js $("..."). Чтобы увидеть автозавершение кода на идентификаторах элементов, нажмите Ctrl-Space внутри кавычек. Например, если добавить variable = $("f|") и нажать Ctrl-Space, когда курсор (|) находится сразу после f, автозавершение кода покажет все идентификаторы элементов HTML, начинающиеся с f.


завершение идентификатора элемента

Внедрение

Функции внедрения JavaScript работают для JavaScript, внедренного в файлы RHTML, HTML и JSP.

Открытие типа

Нажмите Ctrl-O/Command-O и быстро перейдите к одной из своих функций, в каком бы файле она ни находилась.


диалоговое окно 'Перейти к типу'

Поддержка JSDoc

Если добавить к методу аннотацию @private, он будет отображен в навигаторе со значком замка. Если добавить к функции аннотацию @constructor, она будет показана как конструктор (и включена в автозавершение кода после ключевого слова "new"). @class и @namespace можно использовать для прямого назначения функций определенным классам (хотя анализатор функций часто назначает эти функции автоматически). Функции, помеченные @ignore, не появляются в автозавершении кода, но входят в индекс и могут быть использованы в Go To Declaration.


Базовая фильтрация включения файлов

При автозавершении кода в HTML включается только код из файлов JavaScript, на которые установлены ссылки. Давайте рассмотрим проект, в котором файл foo.js определяет функцию foo(), а файл bar.js определяет функцию bar(). Если файл hello.html включает только функцию <script src="bar.js"></script>, то только функция bar() отображается в автозавершении кода для hello.html.



Дополнительные сведения

Дополнительные сведения об использовании IDE NetBeans для редактирования веб-языков, отличных от Java, см. следующие ресурсы:

Для отправки комментариев и предложений, получения поддержки и новостей о последних разработках, связанных с Java EE IDE NetBeans присоединяйтесь к списку рассылки .

get support for the NetBeans

Support


By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2018, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo