Библиотека prototype.js - знакомство

Prototype.js — довольно популярный фреймворк, способный облегчить жизнь JavaScript-разработчику.

На данный момент проект prototype.js располагается по адресу www.prototypejs.org, где вы сможете скачать последнюю стабильную версию или ознакомится с документацией.

Цель данной статьи — краткий обзор самых полезных возможностей библиотеки. К настоящему моменту (осень, 2008) последняя стабильная версия прототайпа — 1.6.0.2, и весит она совсем не мало — 130Кб. Однако, эти 130Кб занимает девелоперская версия кода с табуляцией и комментариями. При желании можно ужать её, удалив ненужные фрагменты.

Для подключения библиотеки достаточно скачать единственный js-файл и добавить его на вашу страницу:

Не все начинающие JavaScript-разработчики знают, но в JavaScript можно в именах переменных использовать знак доллара ($). Эту особенность используют разработчики prototytpe.js, начиная имена базовых методов с $

• $()
• $$()
• $F()
• $A() и $H()
• $w()

Функция $()

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

HTML:

JavaScript:

Функция "доллар" по сути является эквивалентом метода document.getElementById, но более продвинутым, т.к.:

1. более короткая и удобная в записи,
2. может принимать несколько аргументов,
3. может принимать в качестве аргумента ссылку на элемент и возвращать её же.

Последний момент можно проиллюстрировать дополнением к предыдущему примеру:

Функция $$()

Функция "доллар-доллар" является существенным расширением предыдущей, т.к. в качестве аргументов принимает не только идентификаторы, но и в целом CSS-селекторы:

Как видно из примера, $$('div') аналогично вызову document.getElementsByTagName('div'). Однако, в prototype.js существует надстройка в виде метода select(), который также возвращает массив элементов по селектору, но ищет их в дочерних элементах из контекстного объекта:

HTML:

JavaScript:

Реализована поддержка атрибутов в селекторах (CSS 2.1):

Также, начиная с версии 1.5.1, заявлено о поддержке селекторов CSS3:

Функция "доллар-доллар" имеет все шансы вытеснить своего исторического предка, т.к. дает огромные возможности разработчику для получения доступа к узлам документа.

Функция $F()

Удобна для работы с полями форм — возвращает их значение. В качестве аргумента принимает либо ID элемента, либо сам элемент:

HTML :

JavaScript :

Функции $A() и $H()

В JavaScript есть базовые объекты, такие как Array, Date, Object и др. В некотором приближении их можно рассматривать в качестве классов (в терминах ООП). Библиотека prototype.js умеет создавать собственные классы и расширять уже имеющиеся.

В частности, класс Enumerable (перечисляемый) является расширением Array, а функция $A() приводит передаваемые ей массивы к виду экземпляра объекта Enumerable. Для примера, получим массив всех ДИВов на странице и изменим их внешний вид с помощью метода each() класса Enumerable:

HTML :

JavaScript :

Класс Hash является расширением класса Object. Экземпляры класса Object — это ассоциативные массивы, содержащие набор пар ключ=значение. К сожалению, в JavaScript всего один явный способ перебора ассоциативных массивов — конструкция for in. А к экземплярам класса Hash можно применить множество полезный методов, таких как keys(), values() и др.

Более подробно о классах и их реализации в prototype речь пойдет в следущей статье.

Функция $w()

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

Подведем итоги

Надеюсь, что знакомство с библиотекой prototype у вас состоялось. Данная статья является первой в цикле, посвященной работе с prototype.js. В ближайших сериях ждите описание работы с классами и AJAX-объектом.