Главная страница   /   24.1. Понимание скриптовых библиотек по умолчанию (ASP.NET MVC 4

ASP.NET MVC 4

ASP.NET MVC 4

Адам Фриман

24.1. Понимание скриптовых библиотек по умолчанию

Некоторые из функций, которые мы рассмотрим в этой главе, относятся к управлению файлами JavaScript. Когда вы создаете проект MVC на любом шаблоне, кроме Empty, Visual Studio добавляет набор библиотек JavaScript в папку Scripts. Эти библиотеки, которые наиболее широко используются для разработки расширенной клиентской функциональности для приложений на стороне клиента, описаны в таблице 24-1.

Таблица 24-1: Библиотеки разработки на стороне клиента в папке Scripts
Имя файла Описание
jQuery-1.7.1.js Библиотека jQuery, которая облегчает работу с элементами HTML в браузере, особенно по сравнению со встроенными API, которые являются частью стандартов HTML.
jQuery-ui-1.8.20.js Библиотека jQuery UI, которая создает удобные пользовательские элементы управления из элементов HTML, позволяя создавать красивые пользовательские интерфейсы для веб-приложений. jQuery UI построена на jQuery.
jQuery.mobile-1.1.0.js Библиотека jQuery Mobile создает удобные пользовательские элементы управления для мобильных устройств. jQuery Mobile построена на jQuery и будет добавлена только в проекты, которые созданы на шаблоне Mobile.
jQuery-validate.js Библиотека jQuery Validation выполняет проверку ввода для элементов HTML form.
knockout-2.1.0.js Knockout применяет шаблон Model-View-ViewModel к клиентской части приложения, который разделяет данные в клиентских приложениях и элементы, которые отображают их пользователю. Knockout часто называют «MVC для браузера».
modernizr-2.5.3.js Modernizr обнаруживает в браузерах поддержку HTML5 и CSS3; это позволяет использовать новейшие функции, когда они доступны, и использовать прежнюю функциональность, если нет.

Здесь мы не собираемся рассматривать, как использовать эти библиотеки, потому что, с одной стороны, эта книга посвящена платформе на стороне сервера, с другой – библиотеки jQuery являются достаточно серьезной самостоятельной темой. Мы рекомендуем с ними ознакомиться, потому что они предоставляют более простые и надежные техники для разработки веб-приложений.

Примечание

Признаем, что наше мнение предвзято. Стив создал библиотеку Knockout и Адам много писал об этой библиотеке (и о клиентской веб-разработке в целом) в своих книгах Pro jQuery (Apress, 2012) и Pro JavaScript for Web App Development (Apress, 2012). Для всех этих библиотек JavaScript существуют альтернативы. Несмотря на то, что мы так любим те, которые Microsoft включила в новые проекты MVC, мы уверены, что если вам не понравится одна из библиотек в таблице, вы сможете найти ей замену, которая вас удовлетворит.

В дополнение к популярным библиотекам, которые показаны в таблице 24-1, папка Scripts содержит дополнительные библиотеки, которые поддерживают функции, специфические для Visual Studio или MVC. Они описаны в таблице 24-2.

Таблица 24-2: Специфические библиотеки для Visual Studio и MVC в папке Scripts
Имя файла Описание
jQuery-1.7.1.intellisense.js С ее помощью Visual Studio завершает имена функций во время записа кода jQuery в файлах представлений.
jQuery.unobtrusive-ajax.js С ее помощью MVC Framework поддерживает функцию ненавязчивого Ajax, которая была описана в главе 21. Построена на jQuery.
jQuery.validate-vsdoc.js С ее помощью Visual Studio завершает имена функций во время записа кода jQuery, который использует библиотеку jQuery Validation.
jQuery.validate.unobtrusive.js С ее помощью MVC Framework поддерживает функцию ненавязчивой валидации, которую мы описали в главе 23. Построена на библиотеке jQuery Validation.

С файлами скриптов, которые поддерживают завершение кода в Visual Studio, не нужно делать ничего особенного. Когда они указаны в проекте приложения, Visual Studio находит и использует их автоматически. Ненавязчивый Ajax и библиотека валидации были описаны в главах 21 и 23. Эти скрипты как бы служат мостом между MVC Framework и функциональностью jQuery, на которой они построены.

В папке Scripts для многих из файлов, описанных в таблицах 24-1 и 24-2, есть две версии - обычная и минимизированная. Обычная версия содержит код JavaScript с комментариями, пробелами и значимыми именами функций и переменных. Они прекрасно подходят для отладки, так как вы можете прочитать исходный код и найти источник проблемы (одно из преимуществ JavaScript состоит в том, что его исходный код легко читается, потому что файлы JavaScript не компилируются до тех пор, пока не будут доставлены в браузер).

Проблема обычных файлов JavaScript в том, что они большие. Все полезные комментарии и значимые имена переменных и функций занимают место в файле, а следовательно, загрузка кода JavaScript займет больше времени и больше пропускной способности сервера.

Минимизированные файлы содержат ту же функциональность, что и соответствующие обычные файлы, но все читаемые имена, комментарии и пробелы были из них удалены, чтобы уменьшить размер файла. Чтобы вы лучше понимали эффект, отметим, что обычная библиотека jQuery, которую Visual Studio добавляет в новый проект, весит 252KB, уменьшенная версия - 92КБ. Вы можете удивиться, почему кого-то-то будет волновать разница в 160Кб, но если вы обслуживаете миллионов запросов в день, разница станет очевидна – как в количестве времени, которое пользователь будет ждать загрузки кода JavaScript, так и в пропускной способности, которая потребуется для серверов.

Подсказка

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

Недостатком минимизированных файлов является то, что они затрудняют поиск проблем, поэтому во время разработки, как правило, используются обычные файлы, которые затем заменяются минимизированными версиями во время развертывания приложения.

Минимизированные версии файлов, как правило, содержат в имени фрагмент .min; например, минимизированная версия jQuery-1.7.1.js – это файл jQuery-1.7.1.min.js. Однако не все библиотеки следуют этому соглашению; например, файл knockout-2.1.0.js является минимизированным, а knockout-2.1.0.debug.js содержит читаемый код.

MVC Framework содержит несколько полезных функций, которые помогут вам управлять файлами JavaScript, которые использует ваше приложение. Теперь, когда мы познакомились с файлами скриптов и тем, что они делают, перейдем к созданию примера приложения, в котором затем и продемонстрируем эти функции управления.