Насколько хорошо вы знаете Prototype

или разговор о преимуществе этих дополнительных 100 KB на вашей странице

Давайте будем честными - Я пытался отвечать на похожие вопросы снова и снова. Prototype.js - широко используемая js библиотека с не очень удачной online-документацией. Я лично считаю справочник API превосходным ресурсом (хоть и не без погрешностей), но он далёк от того, чтобы быть понятным новичкам. Я работал с prototyp-ом почти уже год и проводил уйму времени на IRC канале. Сложно объяснить насколько абсурдные вопросы порой задают люди. Мне кажется, что в большинстве случаев используется prototype на 15%, не больше. Я не удивлюсь, если увижу Ajax.Request использованную с document.getElementById в одной строке.

Дополнение: Насколько хорошо вы знаете Prototype :: часть II (перевод будет позже)

Здесь я собрал наиболее частые примеры, НЕ использующие всех возможностей prototyp-а. Я надеюсь эо будет базовой точкой отсчета для разработок в ваших следующих проектах. Ну... начнём:

document.getElementById('foo')

$('foo')

К удивлению некоторые люди фактически не знают об этом (подключают ~100KB файл лишь для использования вещей типа Ajax.Request)

var woot = document.getElementById('bar').value

var woot = $('bar').value

var woot = $F('bar')

Удобный способ чтения значений контролов формы

$('footer').style.height = '100px';
$('footer').style.background = '#ffc';

$('footer').setStyle({
	height: '100px',
	background: '#ffc'
})

Мечтаете о том что IE будет соответствовать W3C стандартам? Не надейтесь! (но прототайп позволит вам забыть о проблемах кросс-браузерности)

$('coolestWidgetEver').innerHTML = 'какой-то полезный контент'

$('coolestWidgetEver').update('какой-то полезный контент')

Это один из тех простых довольно часто забываемых случаев. Да, я знаю, что это почти тоже самое, но я хочу видеть как вы сделаете тоже самое в первом варианте (ну разве chaining не крут?)

$('coolestWidgetEver').update('some nifty content').addClassName('highlight').next().hide()

new Ajax.Request('ninja.php?weapon1=foo&weapon2=bar')

new Ajax.Request('ninja.php', {
	parameters: {
		weapon1: 'foo',
		weapon2: 'bar'
	}
})

Более чистое и лучше структурированное определение параметров

new Ajax.Request('blah.php', {
	method: 'POST',
	asynchronous: true,
	contentType: 'application/x-www-form-urlencoded',
	encoding: 'UTF-8',
})

new Ajax.Request('blah.php')

Все это опции в Ajax.Request выставляются по умолчанию! "method: 'POST'" присутствует на каждой второй выложенной для проверки странице, которую я вижу
(Всё ещё не веришь в наследование в JS? Не получается реализовать это? Просто используй преимущества Prototyp-а)

Event.observe('myContainer', 'click', doSomeMagic)

$('myContainer').observe('click', doSomeMagic)

Этот случай спорный, но второй вариант более Обьектно Ориентированный (ну... или того рода) и легче для усвоения (Так что решайте за себя сами)

$$('div.hidden').each(function(el){
	el.show();
})

$$('div.hidden').invoke('show')

Вот типичный случай "злоупотребления each". Существует invoke для подобных целей! Досадно, что немногие люди знают о ней.

$$('div.collapsed').each(function(el){
	el.observe('click', expand);
})

$$('div.collapsed').invoke('observe', 'click', expand)

Пользуйтесь этим! Invoke также может быть использован для обработки событий когда обходите коллекции элементов. Это реально просто, разве не так?

$$('input.date').invoke('observe', 'focus', onFocus);
$$('input.date').invoke('observe', 'blur', onBlur);

$$('input.date')
	.invoke('observe', 'focus', onFocus)
		.invoke('observe', 'blur', onBlur)

Некоторые люди склонны забывать о "нирване chaining-а". Не нравится, как оно выглядит? Думай о сохранении некоторого времени, не вызывая $$ дважды!

$('productTable').innerHTML = 
	$('productTable').innerHTML + 
	'<tr><td>' + productId + ' '
	+ productName + '</td></tr><tr><td>' 
	+ productId + ' ' + productPrice + 
	'</td></tr>'

var rowTemplate = new Template('<tr><td>#{id} #{name}</td></tr><tr><td>#{id} #{price}</td></tr>');
$('productTable').insert(
	rowTemplate.evaluate({
		id: productId,
		name: productName,
		price: productPrice
	}))
)

Нет, я не шучу. Это было выложено на #prototype и там было кое-что неправильно (хмм... Интересно что же...)
Templates - отличное решения для этих отвратительных HTML строк. Меня тошнит от этих огромных конкатенаций строк. evaluate решает проблемму организации структурированного подхода.

На этом всё. Оставайся на волне!