Представляем библиотеку Microsoft Ajax (6-ю версию для предварительного ознакомления) и утилиту Microsoft Ajax Minifier

  • Article

Сегодня команда ASP.NET выпустила существенное обновление библиотеки Microsoft Ajax (6-ю версию для предварительного ознакомления). Это обновление включает целый ряд новых возможностей и улучшений нашей библиотеки AJAX; оно может использоваться с любой версией ASP.NET (включая ASP.NET 2.0, 3.5 и 4.0), а также в проектах ASP.NET Web Forms и ASP.NET MVC. Сегодняшний выпуск включает следующие функциональные улучшения:

  • Улучшенный императивный синтаксис: новый упрощенный синтаксис кода для создания элементов управления, выполняемых на клиенте.
  • Загрузчик клиентских скриптов: новый загрузчик скриптов, выполняемых на стороне клиента, который динамически загружает все файлы JavaScript, необходимые для клиентского элемента управления или библиотеки, а также выполняет скрипты в нужной последовательности.
  • Улучшенная интеграция с jQuery: теперь все элементы управления Microsoft Ajax автоматически представляются как плагины jQuery.

В дополнение к улучшению библиотеки мы также выпустили новую беплатную утилиту - Microsoft AJAX Minifier. Эта утилита позволит вам существенно улучшить производительность ваших веб-сайтов за счет уменьшения размера ваших файлов JavaScript. Утилита может запускаться и из командной строки, и как задание MSBuild в Visual Studio, которое вы можете настроить для ваших проектов VS, чтобы автоматически уменьшать размер ваших файлов JavaScript при каждой сборке проекта.

Использование библиотеки Microsoft AJAX (6-й версии для предварительного ознакомления)

Начасть создавать приложения с вышедшей версией библиотеки Microsoft Ajax вы можете двумя путями:

1) Посетите ASP.NET CodePlex и скачайте файлы библиотеки (туда также входит обширный набор примеров кода).

2) Получите скрипты библиотеки Microsoft Ajax напрямую из сети доставки контента Microsoft Ajax (Content Delivery Network, CDN). Для этого вам всего лишь нужно добавить следующий тег script в страницу .aspx или .html:

<script src=”https://ajax.microsoft.com/ajax/beta/0910/Start.js” type=”text/javascript”></script>

Чтобы узнать больше о Microsoft AJAX CDN, прочитайте сообщение, опубликованное в моем блоге в прошлом месяце, или посетите https://www.asp.net/ajax/cdn.

Улучшения императивного синтаксиса кода с этим выпуском

Команда ASP.NET получила отклики от сообщества разработчиков о том, что многие при написании кода создания элементов управления, выполняющихся на стороне клиента, предпочли бы использовать имеративный подход (в противовес подходу с декларативным синтаксисом). С сегодняшним выпуском библиотеки мы представляем простой императивный синтаксис кода для создания клиентских элементов управления и связывания их с элементами HTML на странице. Для этого синтаксиса полностью поддерживается JavaScript Intellisense как в VS 2008, так и в VS 2010.

Ниже приведен пример императивного кода, который вы теперь сможете писать для программного создания на стороне клиента элемента управления DataView, отображающего данные, получаемые от веб-сервиса на базе WCF:

Приведенный выше код создает экземпляр элемента управления Microsoft Ajax DataView и присоединяет его к HTML-элементу <div> с идентификатором “imageView”. URL веб-сервиса WCF указывается в свойстве “dataProvider”, а название вызываемого метода сервиса - в свойстве “fetchOperation”. Свойство “autoFetch” указывает, что элемент управления должен автоматически после загрузки привязываться к веб-сервису WCF.

Ниже приводится HTML-элемент <div> с идентификатором “imageView”, к которому присоединяется элемент управления DataView. Этот <div> содержит шаблон, который будет использоваться для отображения каждого элемента данных, получаемого от веб-сервиса (обратите внимание: возможность использовать шаблоны была представлена нами в вышедшей ранее версии Microsoft Ajax для предварительного ознакомления):

Выражения {{ Uri }} и {{ Name }} в приведенном шаблоне заменяются свойствами Name и Uri изображений, получаемых от веб-сервиса. Префикс пространства имен для атрибута “sys:src” элемента <img> используется для того, чтобы браузеры не попытались загрузить изображение по фактическому пути {Uri} . Значение атрибута sys:src попадает в атрибут src после загрузки шаблона.

Когда страница отрендерится в браузере, мы получим простую фотогалерею, как на рисунке ниже:

Если же вы не хотите использовать в шаблонах декларативный синтаксис, то можете модифицировать его, остатвив лишь HTML-разметку, как показано ниже (больше никаких выражений в {{ }}):

Затем при создании элемента управления DataView вы можете указать обработчик события itemRendered:

Вы можете реализовать обработчик события “imageRendered”, как показано ниже, и использовать метод Sys.bind() для программного задания значений параметров тегов <img> и <span> в шаблоне:

За счет этого вы сможете оставить в шаблоне исключительно HTML-код и все равно отображать во время выполнения ту же фотогалерею.

Использование загрузчика клиентских скриптов Microsoft Ajax

Библиотека клиентских скриптов Microsoft AJAX теперь разделена на несколько файлов JavaScript, за счет чего вы можете загружать и использовать лишь те файлы скриптов, которые вам на самом деле нужны, тем самым сокращая объем загружаемых данных.

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

К примеру, приведенная ниже страница использует этот загрузчик для загрузки всех файлов скриптов, необходмых для работы элемента управления “watermark” (“водяной знак”), а затем связывает этот элемент управления с текстовым полем ввода <input>:

Обратите внимание на вызов метода Sys.require(). Когда вы вызываете Sys.require(), вы указываете название клиентского компонента (либо массив клиентских компонентов), который хотите загрузить. Затем клиентский загрузчик sys.require() автоматически скачивает все необходимые файлы скриптов, распараллеливая этот процесс (что позволяет быстрее загрузить ваши скрипты и избежать блокирования рендеринга страницы). Когда все необходимые для элемента управления скрипты будут загружены, происходит вызов метода Sys.onReady() и создается элемент управления watermark.

В примере выше мы связываем элемент управления “watermark” с текстовым полем ввода <input> с идентификатором “name”. Во время выполнения этот элемент управления приводит к появлению у поля ввода "водяного знака", автоматически исчезающего, как только пользователь установит фокус на это поле и начнет вводить текст:

У загрузчика клиентских скриптов есть множество расширенных возможностей, включая автоматическое комбинирование скриптов и отложенную загрузку. Он также “понимает”, надо ли загружать рабочую или отладочную версию библиотеки. Кроме того, он позволяет вам зарегистрировать ваши собственные библиотеки и также автоматически загружать их с использованием синтаксиса Sys.require().

Использование элементов управления библиотеки Microsoft Ajax совместно с jQuery

jQuery поставляется Microsoft как часть стандартной поставки ASP.NET MVC, а также по умолчанию добавляется в новые проекты ASP.NET Web Forms, создаваемые в Visual Studio 2010.

С сегодняшним выпуском для предварительного ознакомления мы существенно облегчили интеграцию jQuery с элементами управления Microsoft Ajax, что позволит разработчиками, применяющим jQuery, использовать элементы управления Microsoft Ajax в привычном синтаксисе API плагинов для jQuery. Это достигается за счет того, что теперь все элементы управления Microsoft Ajax автоматически доступны и как плагины jQuery. Иными словами, когда вы добавляете на страницу jQuery, вы можете использовать элементы управления Microsoft Ajax так же, как и любые другие jQuery-плагины.

Приведенный ниже код демонстрирует, как вы можете использовать jQuery для создания DataView, отображающего данны от веб-сервиса WCF (используя синтаксис плагинов jQuery):

Обратите внимание, что в приведенном примере я загружаю jQuery с использованием API клиентского загрузчика Sys.require(). Вы можете загружать jQuery с помощью нового клиентского загрузчика или же можете просто включить библиотеку jQuery в код страницы с помощью стандартного тега <script>.

После загрузки jQuery элементы управления библиотеки Microsoft Ajax автоматически становятся доступны как плагины jQuery. Это означает, что вы можете создавать и присоединять элементы управления Microsoft Ajax, используя стандартный синтаксис для плагинов jQuery (как в примере выше), а также получаете полную интеграцию с синтаксисисом jQuery selector.

Сокращение размера файлов JavaScript с помощью Microsoft Ajax Minifier

Есть два основных способа сокртить размер загружаемых файлов JavaScript: сжатие и уменьшение самих файлов (minification).

Когда ваш сайт работает под управлением IIS 7.0 на Windows Server, вы можете настроить IIS для автоматического сжатия ваших файлов JavaScript с использованием GZIP, что дает существенное повышение производительности сайта и сокращает размер загружаемых данных. Однако, вы можете получить дополнительный выйгрыш в производительности за счет использования как сжатия данных, так и уменьшения (minification) ваших файлов JavaScript. Эти дополнительные преимущества описываются в великолепной книге Стива Саундерса (Steve Sounders) High Performance Web Sites (Высокопроизводительные веб-сайты) .

Помимо новой версии библиотеки Microsoft Ajax мы сегодя также выпустили новую бесплатную утилиту Microsoft Ajax Minifier, которая может помочь существенно сократить размер ваших файлов JavaScript. Она была создана Роном Логоном (Ron Logon), работающим в команде MSN. Вы можете бесплатно загрузить Microsoft Ajax Minifier с сайта ASP.NET на CodePlex.

Приведенный ниже скриншот показывает результаты уменьшения размера стандартной библиотеки jQuery с помощью различных подобных утилит, таких как JSMin Дугласа Крокфорда (Douglas Crockford), Packer Дина Эдварда (Dean Edward) и YUI Compressor. Два файла в конце списка были уменьшены с помощью утилиты Microsoft Ajax Minifier. Обратите внимание, что эта она уменьшила размер jQuery со 125 KB до всего 53 KB.

Microsoft Ajax Minifier поддерживает два уровня уменьшения: обычный (normal) и гиперсжатие (hypercrunched). При обычном уменьшении Microsoft Ajax Minifier удаляет все незначащие пробелы, комментарии, фигурные скобки и точки с запятой. В режиме гиперсжатия утилита становится более агрессивна в уменьшении размера файлов JavaScript, минимизируя названия локальных переменных и удаляя код, который никогда не получит управления.

Вот пример файла JavaScript:

А вот как этот файл будет выглядет после обработки с помощью Microsoft Ajax Minifier (с включенным гиперсжатием):

Обратите внимание, что все незначащие пробелы были удалены, а параметры функции firstValue и secondValue были переименованы в b и a.

В поставку Microsoft Ajax Minifier входят следующие компоненты:

  • ajaxmin.exe – утилита командной строки для уменьшения файлов JavaScript.
  • ajaxmintask.dll – задание MSBuild для уменьшения файлов JavaScript в проектах Visual Studio.
  • ajaxmin.dll – компонент, который вы можете использовать в ваших приложениях C# или VB.NET для уменьшения файлов JavaScript.

После установки Microsoft Ajax Minifier вы можете воспользоваться утилитой командной строки для “ручного” запуска уменьшения файлов JavaScript.

Вы также можете выбрать опцию добавления Microsoft Ajax Minifier как задания MSBuild в Visual Studio. Это позволит вам автоматически уменьшать ваши файлы JavaScript каждый раз, когда вы выполняете сборку вашего проекта Visual Studio.

Резюме

В выпущенной сегодня версии библиотеки Microsoft Ajax реализовано несколько впечатляющих новых возможностей для разработчиков кода, выполняющегося на стороне клиента. Новый упрощенный императивный синтаксис должен понравиться разработчикам JavaScript. Загрузчик клиентских скриптов позволит намного проще создавать элементы управления, выполняющиеся на стороне клиента, и оптимизировать загрузку файлов скриптов. А интеграция с jQuery даст разработчикам возможность, использующим эту библиотеку, получить преимущества от использования клиентских элементов управления, шаблонов и возможностей доступа к данным, реализованным в библиотеке Microsoft Ajax, без необходимости менять свой стиль программирования.

Наконец, новая утилита Microsoft Ajax Minifier позволит существенно улучшить производительность ваших приложений Ajax за счет сокращения размера файлов JavaScript. Вы можете использовать эту утилиту как вручную из командной строки, так и автоматически при сборке проектов в Visual Studio.

Чтобы узнать еще больше подробностей, прочитайте статью в блоге Бертрана Ле Роя (Bertrand Le Roy). Щелкните здесь, чтобы загрузить 6-ю версию для предварительного ознакомления библиотеки Microsoft Ajax и новую утилиту Microsoft Ajax Minifier.

Надеюсь, вы нашли для себя что-то полезное,

Скотт

P.S. Помимо блога, я в последнее время еще использую Twitter, чтобы публиковать краткие заметки и новые ссылки. Следить за моими публикациями на Twitter вы можете здесь: https://www.twitter.com/scottgu (@scottgu - это мой псевдоним на twitter)

оригинал статьи.