Технология Клиент-Сервер 2010'4
	Home Поиск Software Издания Работа k-press.ru

Продолжается подписка на наши издания! Вы не забыли подписаться?

Сравниваем инфраструктуры для разработки на JavaScript

Автор: Джо Леннон

Опубликовано: 28.12.2010
Версия текста: 1.1

Введение

JavaScript – это объектно-ориентированный язык сценариев, который уже давно используется в разработке Web-приложений для создания выполняемых на клиенте сценариев. JavaScript позволяет Web-разработчикам программным образом работать с находящимися на Web-странице объектами, предоставляя платформу для манипулирования этими объектами на лету. Когда JavaScript только появился, он, как правило, использовался для реализации довольно тривиальной функциональности, такой как часы на Web-странице или прокрутка текста в строке состояния браузера. Другой типичной функциональностью были "наводящиеся ссылки", в которых изображение или цвет текста ссылки менялись при наведении курсора мыши. Однако в последнее время JavaScript эволюционировал и стал гораздо более полезным, а концепция асинхронного JavaScript в сочетании с XML - Ajax (Asynchronous JavaScript and XML) - вывела возможности реализации интерактивности Web-приложений на новый уровень. До Ajax любая обработка данных на сервере или операция с базой данных требовала обновления всей страницы целиком или отображения новой страницы. Такой подход не только был медленным и недружелюбным по отношению к пользователю, но и тратил впустую пропускную способность сетевого канала и ресурсы компьютера.

Ajax расшифровывается как Asynchronous JavaScript and XML, хотя сейчас запросы Ajax могут возвращать данные и в отличных от XML форматах, например, JSON (JavaScript Object Notation). Ajax позволяет из кода JavaScript асинхронно посылать HTTP-запросы на Web-сервер, а затем отображать его результат без обновления существующей страницы или отрисовки новой. Чтобы отразить изменения или данные, возвращенные в HTTP-ответе, изменяют лишь часть Web-страницы посредством манипуляций с моделью DOM (Document Object Model - объектная модель документа).

Что такое инфраструктура JavaScript?

JavaScript сам по себе очень мощный язык, и, вообще говоря, на нем можно создавать приложения с насыщенным пользовательским интерфейсом без помощи дополнительных инфраструктур. Однако использовать JavaScript напрямую – работа не из легких. В первую очередь это связано со сложностями, возникающими при попытках обеспечить работу приложения в различных Web-браузерах. Как и в случае HTML и CSS, каждый браузер имеет свою собственную реализацию JavaScript, поэтому обеспечение кросс-браузерной совместимости приложения может стать настоящим кошмаром.

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

Помимо обеспечения кросс-браузерной совместимости, инфраструктуры JavaScript облегчают написание кода для извлечения, навигации и манипуляции с DOM-элементами. Они не только предоставляют простые функции для получения ссылок на элементы модели DOM, но и позволяют записывать цепочки вызовов функций обхода дерева DOM для поиска на любой глубине предков, потомков или братьев элемента. Наконец, инфраструктуры предоставляют ряд функций, облегчающих манипулирование этими объектами, позволяя изменять, добавлять или удалять непосредственно содержимое элементов, или манипулировать стилями CSS для изменения внешнего вида элемента.

Другой важной функциональностью инфраструктур JavaScript является улучшенная поддержка обработки событий. Кросс-браузерная обработка событий может оказаться кошмаром в связи с различными реализациями событий в разных браузерах, поэтому инфраструктуры JavaScript обычно оборачивают события браузера в набор функций, которые корректно работают в различных браузерах. Некоторые инфраструктуры также предоставляют набор стандартизованных кодов клавиш, которые представляют связанные с клавиатурой события (такие как нажатие клавиш Escape, Return, клавиш курсора и т.д.).

Вся эта функциональность очень важна, но, пожалуй, главным фактором недавнего роста популярности инфраструктур JavaScript стала поддержка Ajax. Как и другие аспекты JavaScript, технология Ajax в каждом Web-браузере реализована особенным образом, что делает утомительной работу по поддержке совместимости приложения с разными браузерами. Почти все инфраструктуры JavaScript включают в себя какую-либо библиотеку, поддерживающую Ajax, которая обычно предоставляет объекты для работы с запросами и ответами Ajax, вспомогательные функции для анализа ответов, обновления DOM-элементов и периодического опроса сервера.

Типичная функциональность инфраструктур JavaScript

Рассмотрим полезную функциональность, типичную для большинства инфраструктур JavaScript. Вот эта функциональность:

• Селекторы
• Обход дерева DOM
• Манипуляция моделью DOM
• Функции-утилиты
• Обработка событий
• Ajax

При рассмотрении функциональности я буду приводить примеры из одной или нескольких следующих инфраструктур JavaScript: Prototype, jQuery, YUI, ExtJS и MooTools. Хотя реализация и синтаксис разных инфраструктур различны, основные концепции остаются одинаковыми. Каждая инфраструктура предоставляет подробный справочник по API, к которому можно обращаться, чтобы понять, как использовать данную функциональность в той или иной библиотеке.

Селекторы

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

Например, с помощью обычного JavaScript можно выбрать DOM-элемент по ID с помощью следующего кода:

      var theElement = document.getElementById('the_element');

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

      var theElement = $('the_element');

Показанная выше функция $ доступна в нескольких (но не всех) популярных инфраструктурах JavaScript. Библиотека Prototype, кроме этого, позволяет выбирать по ID несколько элементов, возвращая массив элементов. Как и в MooTools, возможности этих элементов расширяются рядом дополнительных функций Prototype. Для одновременного выбора нескольких элементов в Prototype используется следующий синтаксис:

      var elementArray = $('element_one', 'element_two', 'element_three');

В разделе Служебные функции вы узнаете о ряде предоставляемых инфраструктурами JavaScript функций, облегчающих итеративный обход коллекций объектов.

В предыдущих примерах поиск осуществлялся по ID конкретного элемента. Что делать, если мы хотим найти несколько элементов, например, все картинки или все строки таблицы с определенным именем CSS-класса? MooTools (и некоторые другие библиотеки) предоставляет для этого очень простой метод - функцию $$. Она работает по аналогии с функцией $, за исключением того, что вместо ID элемента она может принимать в качестве аргумента имя CSS-элемента, имя класса или псевдоселектор. Например, чтобы выбрать все изображения с Web-страницы с помощью MooTools, следует использовать следующий код:

      var allImages = $$('img');

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

Выбор элементов по имени тега - это полезная функциональность, но что если мы хотим выбрать некое подмножество элементов по имени CSS-класса? Это тоже очень просто. В следующем примере MooTools выберет все строки таблицы с CSS-классом "odd". Это может быть полезно для реализации чередования цвета фона в строках таблицы:

      var allOddRows = $$('tr.odd');

На самом деле MooTools предлагает еще лучший способ реализации чередования фона строк. В предыдущем примере предполагалось, что каждая нечетная строка таблицы принадлежит к CSS классу с именем "odd". Следующий код не требует определения какого-либо CSS-класса для строк таблицы:

      var allOddRows = $$('tbody:odd');

Здесь представлен пример псевдоселектора, который возвращает все объекты, удовлетворяющие спецификации, - в данном случае каждый нечетный элемент, являющийся потомком элемента tbody (тело таблицы). Вот еще несколько примеров псевдоселекторов MooTools:

• checked — выбирает все помеченные элементы (например, все помеченные флажки)
• enabled — выбирает все активные элементы
• contains — выбирает все элементы, содержащие текст, переданный в селектор в качестве аргумента (например, contains('this text'))

Как упоминалось ранее, не все инфраструктуры JavaScript используют функцию $ для выбора элементов модели DOM. В библиотеке YUI (Yahoo! User Interface) версии 3 для выбора элемента по ID используется следующий код (обратите внимание, что в YUI 3 перед ID элемента необходимо указывать символ #):

      var theElement = Y.one('#the_element');

Аналогичным образом вместо использования функции $$ для извлечения элементов по имени тега или класса в YUI применяется функция Y.all:

      var allOddRows = Y.all('tr.odd');

ExtJS работает схожим образом. Для выбора элемента по ID в нем используется следующий синтаксис:

      var theElement = Ext.get('the_element');

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

      var allOddRows = Ext.select('tr.odd');

В следующем разделе мы увидим, как инфраструктуры JavaScript позволяют осуществлять обход дерева DOM, или, другими словами, находить элементы, являющиеся родственными (например, родителем, потомком или братом) определенному элементу. Также мы узнаем, как инфраструктуры позволяют манипулировать моделью DOM, чтобы изменять ее элементы.

...

Ваши предложения и комментарии мы ожидаем по адресу: mag@rsdn.ru
Copyright © 1994-2002 Оптим.ру