Prototype.js: введение

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

Где брать, что читать.

Официальный сайт — http://prototypejs.org/. В верхнем меню ссылка «Download», что делать дальше, разберётесь сами.

Там же в меню пункт «API Docs», который ведёт на автоматически сгенерированную документацию, по которой изучать библиотеку — себя не уважать. Нормальная документация лежит в http://prototypejs.org/api и ссылки с главной страницы на неё с главной страницы хрен знает почему нет. Там же можно скачать удобный CHM.
UPD: Как подсказывают знающие люди, на этой странице уже несколько устаревшая документация. Актуальная, именно на api.prototypejs.org. Однако, что-то слишком она для роботов.

Как работает

В дистрибутиве один файл: prototype.js, который и следует подключить на странице. Существуют крупные библиотеки, написанные поверх прототайпа, например, script.aculo.us, однако, такой системы плагинов, как у jQuery или подгружаемых по необходимости модулей не наблюдается. Всё в одном.

От того же jQuery, prototype существенно отличается и в подходе написания кода. jQuery делает упор на цепочки вида $("p.neat").addClass("ohmy").show("slow"), по поводу чего, особенно рьяные его поклонники захлёбываются в соплях о «новом революционном синтаксисе» и о «значительном упрощении программирования». Prototype же изначальный синтаксис яваскрипта не насилует, что мне, как упёртому консерватору нравится больше.

Рассмотрим основные вещи, которые предоставляет prototype.js.

Расширение встроенных типов

String, Array, Object, Function дополняются новыми методами.

['Ruby', 'Php', 'Python'].last() // -> 'Python' 
' hello world! '.strip();        // -> 'hello world!'
'Some random text'.truncate(10); // -> 'Some ra...'

Расширение DOM

DOM-элементы аналогично расширяются новыми методами.

element.hide();          // скрыть element
element.setOpacity(0.5); // указать прозрачность

Некоторые методы, вроде getElementsByClassName() реализованные не во всех браузерах или реализованные по разному, реализуются одинаково для всех.

В отличии от расширения встроенных типов, здесь есть ньюансы в Internet Explorer, в котором DOM-объекты не считаются вообще за нормальные объекты и не имеют прототипов. На этом остановимся более подробно в соответствующей заметке.

AJAX

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

Prototype не даёт ничего революционного, просто делает всё кроссбраузерно и скрывает ненужные этапы.

new Ajax.Request(
	'/your/url', {
	onSuccess: function(transport) {
		// ...
	}}
);

События

Здесь всё аналогично положению с аяксом. В нативном JavaScript работа с событиями не так чтобы сложна, но рутинна: разные реализации, асинхронность, учёт контекстов исполнения. В prototype.js всё чуточку проще:

/* При клике на element будет выполнен handler, в контексте текущего объекта */
element.observe("click", handler.bindAsEventListener(this));

«Классы»

ОО(П) в JavaScript, это главная причина эпических разборок в темах посвящённых JS. Классов, как известно там нет, есть прототипы. Некоторые после этого не считают JS вообще за язык, другие его просто обожают. Некоторые пишут обёртки, эмулирующие классы, некоторые их за это с пеной у рта чмырят.

На самом деле, если понимать, как работают прототипы в языке и как поверх них работает обёртка от prototype.js, то ничего плохого в её использовании нет. Она позволяет избежать некоторых рутинных операций, привносит в построение иерархии объектов некоторый порядок, которого иногда не хватает. И при этом ни разу не запрещает работать с прототипами напрямую.

var Animal = Class.create({   
	initialize: function(name, sound) {     
		this.name = name;     
		this.sound = sound;   
	},   
	speak: function() {     
		alert(this.name + " says: " + this.sound + "!");   
	}
}); 
 
// subclassing Animal 
var Snake = Class.create(Animal, {   
	initialize: function($super, name) {
		$super(name, 'hissssssssss');   
	} 
});

Дополнительные возможности

Так же есть несколько дополнительных «классов», таких, как:

/* Итераторы */
A.each(function(value, key) {alert(key + "=>" + value);});
 
/* Хэши */
var query = $H({'x': 1, 'y': 2}).toQueryString(); // x=1&y=2

И ещё несколько других, в частности для упрощения работы с формами.

Кроссбраузерность

Ну и при описании js-библиотек многие любят вставлять такое понятие, как «кроссбраузерность». На мой взгляд, это бессмысленный злоебучий маркетинг. Это как в достоинствах PHP-шной CMS отдельным пунктом написать про защиту от SQL-инъекций. Кроссбраузерность, это вещь, которая должна по умолчанию подразумеваться для подобных продуктов.

Итоги

Prototype.js не делает ничего сверхнового. Каждый, кто более или менее плотно работал с JS, делал обёртки над аяксом, обработкой событий и дополнял массивы со строками нужными ему методами.

Однако, в prototype.js всё это собрано вместе, достаточно неплохо и компактно. Возможно, оно не такое и говно.