Нашли ошибку или опечатку? Выделите текст и нажмите

Поменять цветовую

гамму сайта?

Поменять
Обновления сайта
и новые разделы

Рекомендовать в Google +1

IntelliSense для JavaScript и XAML в Visual Studio

117

IntelliSense для JavaScript

При разработке веб-приложений язык JavaScript позволяет обеспечить более широкие возможности для их клиентов. В отличие от языков C# и Visual Basic, которые являются компилируемыми, язык JavaScript является интерпретируемым, т.е. его синтаксические конструкции не проверяются, пока он не будет загружен в браузер. Несмотря на то что этот язык дает много гибких возможностей на этапе выполнения, он требует внимательности, опыта и глубокого тестирования, иначе неизбежны многочисленные ошибки.

Кроме того, при разработке компонентов на языке JavaScript для использования в браузере необходимо следить за большим количеством несопоставимых элементов. К ним относятся свойства самого языка JavaScript, элементы HTML DOM, а также собственные и внешние библиотеки. К счастью, система Visual Studio способна предоставить все достижения технологии IntelliSense для полноценного использования языка JavaScript, чтобы следить за всеми этими элементами и предупреждать разработчика о синтаксических ошибках.

Как только разработчик вводит в окно редактора кода текст на языке JavaScript, система Visual Studio перечисляет ключевые слова, функции, параметры, переменные, объекты и свойства так же, как она это делает для программ на языке C# или Visual Basic. Это относится как к встроенным функциям и объектам языка JavaScript, так и к функциям и объектам, определенным разработчиком в своем собственном сценарии или включенным во внешнюю библиотеку. Система Visual Studio позволяет также выявить и выделить синтаксические ошибки в программе на языке JavaScript.

Начиная с версии Internet Explorer 3.0 компания Microsoft поддерживает свой собственный вариант языка JavaScript, именуемый JScript. С формальной точки зрения средства JavaScript в системе Visual Studio разработаны для работы с диалектом Jscript, поэтому в командах меню и заголовках окон иногда встречается это название. На практике разница между этими двумя языками настолько мала, что программные средства одинаково успешно работают с любым из них.

Контекст JavaScript IntelliSense

Для того чтобы предотвратить случайные ссылки на несуществующие элементы в языке JavaScript, система Visual Studio 2013 использует понятие "контекст IntelliSense", основываясь на местоположении редактируемого блока конструкций на языке JavaScript. Этот контекст создается следующими элементами:

  • Текущий блок сценария. Включает в себя блоки сценариев для файлов .aspx, .ascx, .master, .html и .htm.

  • Любой файл сценариев, импортированный на текущую страницу с помощью элемента <script/> или элемента управления ScriptManager. В этом случае импортируемый файл должен иметь расширение .js.

  • Любой файл сценариев, на который есть ссылка в виде директивы ссылок (как описано в следующем разделе).

  • Любая ссылка на веб-службы XML.

  • Элементы библиотеки AJAX компании Microsoft (если требуется создать веб-приложение для платформы ASP.NET с возможностями библиотеки AJAX-enabled).

Ссылка на еще один файл JavaScript

Иногда один файл JavaScript создается на основе функциональных возможностей другого (например, если вы используете библиотеку jQuery). Когда это происходит, эти файлы обычно ссылаются друг на друга на какой-то странице, используя друг друга, но не имеют явно определенных прямых ссылок. Из-за отсутствия явных ссылок система Visual Studio не может добавить файл с базовыми функциональными возможностями в контекст JavaScript IntelliSense, и в таком случае разработчик не получает полной поддержки со стороны системы IntelliSense.

Для того чтобы система Visual Studio могла найти базовый файл и добавить его в контекст, разработчик может вставить ссылку, используя директиву ссылок (references directive). Директива ссылок - это особая разновидность комментария, содержащего информацию о местоположении другого файла. С помощью директивы ссылок можно сослаться на любой из перечисленных ниже объектов:

  • Другие файлы языка JavaScript. К ним относятся файлы с расширением .js и файлы языка JavaScript, внедренные в сборки. Они не содержат абсолютных путей, поэтому файл, на который имеется ссылка, должен принадлежать текущему проекту.

  • Файлы веб-службы (.asmx). Они также должны быть частью текущего проекта, причем файлы веб-службы в проектах типа Web Application не поддерживаются.

  • Страницы, содержащие сценарии JavaScript. Так можно сослаться только на одну страницу. Наличие ссылки на любую страницу исключает возможность других ссылок.

Директиву ссылок обычно принято размещать в папке со скриптами, а файл называть _references.js. Рассмотрим несколько примеров директив ссылок. Они должны появляться для любого кода в файле на языке JavaScript:

// Файл JavaScript в текущей папке
/// <reference path="Toolbox.js" />

// Файл JavaScript в родительской папке
/// <reference path="../Toolbox.js" />

// Файл JavaScript на пути, заданном относительно корневой папки сайта
/// <reference path="~/Scripts/Toolbox.js" />

// Файл JavaScript, внедренный в сборку
/// <reference name="Ajax.js" path="System.Web.Extensions, ..." />

// Файл веб-службы
/// <reference path="MyService.asmx" />

// Стандартная страница
/// <reference path="Default.aspx" />

Существует несколько ограничений, наложенных на директивы ссылок. Во-первых, директивы ссылок, ссылающиеся на путь, внешний по отношению к проекту, игнорируются. Во-вторых, директивы ссылок не могут вычисляться рекурсивно, поэтому для создания контекста используются только те директивы, которые существуют в редактируемом файле. Директивы ссылок в других файлах в контексте не используются.

В Visual Studio файл _references.js можно подключить в диалоговом окне Options (Tools --> Options) в разделе Text Editor --> JavaScript --> IntelliSense --> References. Обратите внимание, что данный раздел содержит список из нескольких библиотек, которые Visual Studio подключает по умолчанию.

XAML и IntelliSense

Visual Studio поддерживает возможности IntelliSense с момента появления XAML. Конструктивно, XAML имеет синтаксис XML, поэтому Visual Studio обеспечивает одни и те же возможности для XAML-файла, как и для любого файла XML, в котором Visual Studio знает о схеме документа. Благодаря этому, разработчикам очень легко работать с кодом XAML - различные элементы и связанные с ними атрибуты легко доступны через подсказки IntelliSense. Единственным недостатком является проблема в отображении связанных данных. Это происходит потому, что IntelliSense не может динамически разобрать контекст данных для элементов управления, используемых в XAML.

В Visual Studio 2013, IntelliSense для связывания данных доступно, но с некоторыми оговорками. Основное требование заключается в том, что контекст данных для XAML документа должен быть определен в документе. Если установить контекст данных за пределами XAML документа, что является обычной практикой, если вы используете шаблон Model-View-ViewModel (MVVM), то вам необходимо установить контекст данных в теле документа XAML во время разработки. Это не оказывает никакого влияния на функциональность среды выполнения вашей страницы XAML, но позволяет IntelliSense получить необходимую информацию.

Другая проблема заключается в том, как IntelliSense обрабатывает привязки данных ресурсов, таких как шаблоны данных. Эти шаблоны данных могут быть определены во внешнем словаре ресурсов, что делает невозможным использование IntelliSense для определения контекста данных. Для решения этой проблемы, вы можете непосредственно установить контекст данных во время разработки шаблона во внешнем словаре ресурсов. С другой стороны, после того, как контекст данных определяется на странице XAML, вы можете использовать команду Go To Definition (F12) и Visual Studio автоматически скопирует контекст данных.

Возможности IntelliSense для XAML в основном аналогичны тем, что Visual Studio использует для языков программирования. XAML также включает в себя идею нечеткого соответствия. Как показано на рисунке ниже, выбран элемент StackPanel, хотя набранные символы StakPa только незначительно близки к правильному элементу:

Пример использования IntelliSense для XAML
Пройди тесты