Prototype и script.aculo.us — полезная JavaScript-связка

обзор Prototype и script.aculo.us

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

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

script.aculo.us использует Prototype в качестве фундамента

script.aculo.us — инструмент более высокоуровневый и использующий ко всему прочему Prototype в качестве фундамента. Здесь можно найти, например, усовершенствованные методы работы с AJAX-запросами, класс под названием Builder, которые предоставляют разработчику полноценный инструмент для любых манипуляций с DOM-элементами. Плюс к этому в состав script.aculo.us входят инструменты для создания специальных эффектов любой сложности. Сам же создатель проекта позиционирует свое детище как библиотеку для разработки в первую очередь пользовательского интерфейса в рамках веб-приложений, хотя возможностей в script.aculo.us, конечно же, больше. Но обо всем по порядку.

Prototype

Итак, знакомство с этим проектом лучше всего начинать с хэлперов для работы с DOM, ибо они являются, наверное, самым часто используемым элементом в Prototype. Первое, о чем хотелось бы упомянуть, это функция $(), которая, к слову, является очень распространенной и в других JavaScript-библиотеках. Начну сразу с примера. Как мы находим необходимый DOM-элемент?

node = document.getElementById("elementID");

С помощью же функции $() то же самое будет выглядеть следующим образом:

node = $("elementID");

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

allNodes  =  $("firstDiv",  "secondDiv");
for(i  =  0;  i  <  allNodes.length;  i++)  {
        alert(allNodes[i].innerHTML);
}

Следующая полезная функция в Prototype — это $F(), которая получает значение указанного элемента в форме на нашей веб-странице. Синтаксис такой же простой, как и в случае $(), однако стоит отметить, что с помощью $F() невозможно получить значение в группе radio buttons (только значение каждой отдельной кнопки), а также функция $F() в отличие от функции $() не понимает, когда ей сообщают id нескольких элементов сразу.

Еще одна полезность — это метод getElementsByClassName(), встроенный сразу в объект document. Работает он так же, как и getElementsByTagName(), но в качестве параметра для поиска использует значения атрибута class у DOM-элементов.

Prototype и script.aculo.us — полезная JavaScript-связка

Веб-сайт script.aculo.us сам по себе служит неплохим примером использования этого инструмента

С Prototype у веб-специалистов появляется еще один объект, содержащий огромное количество различных методов для работы с DOM-элементами, под названием Element. Лучше всего польза от него видна на примере, который приведен в официальной документации к продукту. Представим, что нам необходимо удалить значение атрибута class у определенного элемента. Делать это можно следующим образом:

element  =  $(element);
if  (!element)
        return;
var  newClassName  =  '';
var  a  =  element.className.split('  ');
for  (var  i  =  0;  i  <  a.length;  i++)  {
        if  (a[i]  !=  className)  {
                if  (i  >  0)
                        newClassName  +=  '  ';
                newClassName  +=  a[i];
        }
}
element.className  =  newClassName;

Но при использовании объекта Element то же самое осуществляется при помощи одной строчки:

Element.removeClassName("elementID", "red");

Prototype предоставляет функционал для полноценного ОО JavaScript-программирования

Кроме того, очень часто при разработке современных веб-приложений перед специалистами встает проблема совместимости их кода с браузерами от разных компаний и даже с разными версиями одного и того же браузера. Приходится писать некрасивые логические конструкции, в которых вначале определяется тип браузера, а затем в соответствии с полученной информацией выполняется тот или иной код. К слову, это еще не самый плохой вариант, но разработчик Prototype создал Try.these(), в которой мы можем прописать несколько функций для исполнения. Во время работы нашего веб-приложения они будут исполняться последовательно: если во время исполнения первой была выявлена ошибка, то движок автоматически запустит вторую (и так далее), если же ошибки не было, то вторая запускаться не будет. Разумеется, это лишь один из способов, но некоторым он пришелся очень по душе.

В заключение рассказа о Prototype добавим о специальном объекте для работы с AJAX, встроенном в этот продукт. С его помощью мы можем создавать и обрабатывать AJAX-запросы фактически в 1-2 строки кода. Также очень полезен объект PeriodicalExecuter, который вызывает необходимую функцию в указанный интервал времени, и все это опять же с приятным и понятным синтаксисом. Плюс к этому в Prototype встроено множество менее масштабных инструментов, которым можно найти применение практически в любом проекте.

script.aculo.us

Тем временем самое интересное начинается, когда в дополнение к Prototype мы начинаем использовать для наших веб-разработок еще один популярный и полезный JavaScript-инструмент под названием script.aculos.us. Его область применения несколько шире, чем у предыдущей библиотеки, но мы рассмотрим лишь ключевые моменты. Начнем же с метода подключения определенных библиотек, входящих в состав script.aculo.us. Если мы хотим получить доступ вообще ко всем возможностям продукта, то пишем следующее:

Но не в каждом проекте может понадобиться весь функционал script.aculo.us, поэтому разработчик предусмотрел возможность для нас подключать часть продукта выборочно. Всего на выбор предлагается пять частей:

builder;
effects;
dragdrop;
controls;
slider.

Drag'n'drop в script.aculo.us

Чтобы подключить те или иные компоненты, достаточно указать их название во время вызова основного скрипта. Выглядит это так:

Функционал для drag'n'drop в описываемом проекте реализован достаточно гибко и просто. Объекты в рамках нашей веб-страницы можно разделить на Draggables (элементы, которые можно перетаскивать) и Droppables (могут "принимать" перетащенные элементы).

Еще один момент, который многие пользователи script.aculo.us нашли весьма полезным, — это Sortables, элементы, содержащие в себе набор других элементов, которые затем могут сортироваться (сиречь получать drag'n'drop-команды) посетителем нашего веб-сайта в реальном времени. Создаются подобные контейнеры одной строчкой кода, а движок уже самостоятельно производит все остальные рутинные манипуляции.

Sortable.create('id_of_container',[options]);

В качестве options мы указываем необходимые дополнительные параметры, среди которых предусмотрены такие, как tag, overlap, constraint, containment, handle, hoverclass, ghosting и другие.

script.aculo.us позволяет легко работать со специальными эффектами

new Effect.EffectName('dom_id', {option:value, option:value});

Этой строчкой кода мы создали новый специальный эффект. Рассмотрим использованные методы и параметры. Effect — это объект script.aculo.us, который и отвечает вообще за весь функционал, связанный со специальными эффектами. EffectName — это название эффекта, который мы собираемся использовать. Всего в описываемом продукте есть пять базовых эффектов (Effect.Opacity, Effect.Scale, Effect.MoveBy, Effect.Highlight и Effect.Parallel) и пятнадцать комбинационных эффектов:

Effect.Appear;
Effect.Fade;
Effect.Puff;
Effect.DropOut;
Effect.Shake;
Effect.SwitchOff;
Effect.BlindDown;
Effect.BlindUp;
Effect.SlideDown;
Effect.SlideUp;
Effect.Pulsate;
Effect.Squish;
Effect.Fold;
Effect.Grow;
Effect.Shring.

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

Думаю, как раз по этим причинам разработчик script.aculo.us совсем недавно представил на суд общественности бету новой версии своего продукта. Главное качественное улучшение в ней — это совершенно иной подход к работе со специальными эффектами. Если раньше нам приходилось довольствоваться лишь манипуляциями с базовыми эффектами, то теперь мы можем производить любой морфинг с любыми DOM-элементами. Выглядит это следующим образом:

$('dom_id').morph('height:170px',{duration: 0.5});

Digg.com использует script.aculo.us

Этой простой строчкой кода мы указали движку, что необходимо поменять высоту DOM-элемента со значением атрибута id, равным dom_id до 170 пикселей за полсекунды. И таким образом можно работать с любым CSS-параметром у любого DOM-элемента. Правда, веб-браузеры все же накладывают некоторые ограничения, но не такие, чтобы они были в состоянии поставить крест на той или иной идее.

В качестве же итога материала можно еще раз упомянуть тот факт, что script.aculo.us и, соответственно, Prototype сегодня используются в таком большом количестве действительно серьезных и масштабных проектов, что порой поражаешься. В качестве примера можно привести всем нам хорошо известный веб-сервис Digg.com или AJAX framework под названием Ruby on Rails. Поэтому о стабильности работы описываемых продуктов говорить даже и не приходится.