Подключаюсь к разработке проекта, в котором используется этот замечательный js-фреймворк. До этого использовал только jQuery, поэтому пришлось изучать эту новую для меня библиотеку.
Второе место, куда я пошел за информацией, после Википедии, был Хабр. С удивлениемобнаружил не обнаружил здесь блога, посвященного Prototype и более того, никакой информации «для новичков». Решил исправить этот недостаток.
Все заинтересованных — прошу под кат
Для начала, хочу отметить, что данный топик — не место для холивара, вида «X круче, чем Y». Я хочу рассказать только о возможностях данного фреймворка, не затрагивая другие.
Данный фреймоворк поддерживается Internet Explorer 6.0+, Mozilla Firefox 1.5+, Apple Safari 2.0+ и Opera 9.25+. Соответственно, его можно использовать в 99% проектов.
На текущий момент, последняя версия — 1.7, выпущена 22 ноября 2010.
Итак, мы скачали исходный код библиотеки и подключили её в нашем html-документе
Теперь рассмотрим возможности, которые нам стали доступны
Собственно, вся соль фреймворка изложена в 5-ти функциях. О них ниже.
$()
Здесь всё просто. Теперь
можно заменить на
Более того, если функции передать несколько параметров, то она вернет массив элементов
Этот массив можно обработать в цикле, например
$$()
Функция разбивает один или несколько CSS-cелекторов, которые поступают на вход, и возвращает элементы которые соответствуют этим фильтрам
Данный код выведет:
My name
pass
Рассмотрим пример по-сложнее, когда на вход функции будет подано несколько фильтров
Здесь мы увидим следующий результат:
My name
pass
Password
$F()
Для кода выше, мы могли получить значения элементов формы следующим образом:
Как вы, наверное, уже догадались, результатом будет
My name
pass
Для лучшего понимания, следующие три конструкции аналогичны
Значения a, b, c будут равны
$A()
Функция $A() преобразует один аргумент, который она получает в объект Array.
Получаем
3: Test 1
2: Test 2
4: Test 3
$H()
Функция $H() преобразовывает объекты в перечислимые Hash-объекты, которые похожи на ассоциативный массив.
Каждый элемент hash-объекта — это массив из двух элементов: ключ и значение. Помимо этого, объект обладает 5-ю методами
keys() — возвращает массив из всех ключей
values() — возвращает массив из всех значений
merge(Hashes) — принимает объекты типа Hash, возвращает только один объект, результат их объединения
toQueryString() — преобраовывает объект в строку query-string. Т.е строку вида «key1=value1&key2=value2&key3=value3»
inspect() — возвращает объект в формате массива, вида «ключ: значение»
Круто, не так ли?
И рассмотрим еще несколько функций, без которых жизнь не была бы столь прекрасна
getElementsByClassName()
Работает аналогично функции getElementsByTagName(). Отличие лишь в том, что необходимо подавать не имя тега, а название класса. В массиве возвращаются все элементы, которые соответствуют указанному классу. Функция работает даже в том случае, если для элемента определено несколько классов.
Думаю, и без примера всё ясно.
Try.these()
В итоге, напечатается
первый
второй
А сама функция вернет 2.
Думаю, здесь всё понятно. Незаменимый инструмент при отладке
Еще одной полезной возможностью библиотеки, является работа с текстовыми шаблонами.
Получим:
Вы заказываете 1шт. товара Книга по 24.50р. каждая
Вы заказываете 3шт. товара Ручка по 5.44р. каждая
Вы заказываете 4шт. товара Тетрадь по 10.00р. каждая
Ну и разумеется, в современном мире нельзя закончить, не сказав об AJAX. Теперь AJAX-запрос можно выполнить следующим образом:
Метод — get или post.
Параметры — вида ключ=значение, объединённые в Query-string.
OnComplete — функция, которая будет вызвана, после завершения AJAX-запроса
Пример:
В библиотеке prototype.js множество замечательных возможностей, которые могут облегчить жизнь разработчику и которые просто нельзя описать в небольшой статье.
Спасибо, если вы дочитали до этого места.
Официальный сайт проекта. Здесь вы можете скачать последнюю версию фреймворка и ознакомиться с официальной документацией
Для всего остального есть Google
Второе место, куда я пошел за информацией, после Википедии, был Хабр. С удивлением
Все заинтересованных — прошу под кат
Введение
Для начала, хочу отметить, что данный топик — не место для холивара, вида «X круче, чем Y». Я хочу рассказать только о возможностях данного фреймворка, не затрагивая другие.
Данный фреймоворк поддерживается Internet Explorer 6.0+, Mozilla Firefox 1.5+, Apple Safari 2.0+ и Opera 9.25+. Соответственно, его можно использовать в 99% проектов.
На текущий момент, последняя версия — 1.7, выпущена 22 ноября 2010.
Итак, мы скачали исходный код библиотеки и подключили её в нашем html-документе
<script src="prototype.js" type="text/javascript"></script>
Теперь рассмотрим возможности, которые нам стали доступны
Базовые возможности
Собственно, вся соль фреймворка изложена в 5-ти функциях. О них ниже.
$()
Здесь всё просто. Теперь
document.getElementById('elementId');
можно заменить на
$("elementId");
Более того, если функции передать несколько параметров, то она вернет массив элементов
var array = $('elementId-1', 'elementId-2', 'elementId-3');
Этот массив можно обработать в цикле, например
for (i=0; i<array.length; i++)
{
alert(array[i].innerHTML);
}
$$()
Функция разбивает один или несколько CSS-cелекторов, которые поступают на вход, и возвращает элементы которые соответствуют этим фильтрам
<div id='loginForm'>
<div class='field'>
<label class='black'>User name:</label>
<input type='text' id='name' value='My name'/>
</div>
<div class='field'>
<label class='red'>Password:</label>
<input type='password' id='pass' value='pass' />
</div>
<input type='submit' value='login' />
</div>
var array = $$('div#loginForm .field input');
for(var i=0; i<array.length; i++){
alert(array[i].value);
}
Данный код выведет:
My name
pass
Рассмотрим пример по-сложнее, когда на вход функции будет подано несколько фильтров
array = $$('div#loginForm .field input', 'div#loginForm .red');
s = '';
for(var i=0; i<array.length; i++){
s = ( array[i].value ? array[i].value : array[i].innerHTML );
alert(s);
}
Здесь мы увидим следующий результат:
My name
pass
Password
$F()
Для кода выше, мы могли получить значения элементов формы следующим образом:
alert($F('name'));
alert($F('pass'));
Как вы, наверное, уже догадались, результатом будет
My name
pass
Для лучшего понимания, следующие три конструкции аналогичны
var a = document.getElementById('name').value;
var b = $('name').value;
var c = $F('name');
Значения a, b, c будут равны
$A()
Функция $A() преобразует один аргумент, который она получает в объект Array.
<select id="list" >
<option value="3">Test 1</option>
<option value="2">Test 2</option>
<option value="4">Test 3</option>
</select>
var someNodeList = $('list').getElementsByTagName('option');
var nodes = $A(someNodeList);
//Теперь вместо массива работаем с объектом
nodes.each(function(node){
alert(node.nodeName + ': ' + node.innerHTML);
});
Получаем
3: Test 1
2: Test 2
4: Test 3
$H()
Функция $H() преобразовывает объекты в перечислимые Hash-объекты, которые похожи на ассоциативный массив.
Каждый элемент hash-объекта — это массив из двух элементов: ключ и значение. Помимо этого, объект обладает 5-ю методами
keys() — возвращает массив из всех ключей
values() — возвращает массив из всех значений
merge(Hashes) — принимает объекты типа Hash, возвращает только один объект, результат их объединения
toQueryString() — преобраовывает объект в строку query-string. Т.е строку вида «key1=value1&key2=value2&key3=value3»
inspect() — возвращает объект в формате массива, вида «ключ: значение»
//Создаем объект
var a = {
first: 10,
second: 20,
third: 30
};
//получаем hash
var h = $H(a);
alert(h.toQueryString()); //выведет "first=10&second=20&third=30"
Круто, не так ли?
Полезные функции
И рассмотрим еще несколько функций, без которых жизнь не была бы столь прекрасна
getElementsByClassName()
Работает аналогично функции getElementsByTagName(). Отличие лишь в том, что необходимо подавать не имя тега, а название класса. В массиве возвращаются все элементы, которые соответствуют указанному классу. Функция работает даже в том случае, если для элемента определено несколько классов.
Думаю, и без примера всё ясно.
Try.these()
return Try.these(
function() {
alert("первый");
jkgjhgjhg //преднамеренная ошибка
alert("первая ошибка");
return 1;
},
function() {
alert("второй");
return 2;
}
);
В итоге, напечатается
первый
второй
А сама функция вернет 2.
Думаю, здесь всё понятно. Незаменимый инструмент при отладке
Еще одной полезной возможностью библиотеки, является работа с текстовыми шаблонами.
//Создаем объект
var cart = new Object();
cart.items = [ ];
//Помещаем данные
cart.items.push({product: 'Книга', price: 24.50, quantity: 1});
cart.items.push({product: 'Ручка', price: 5.44, quantity: 3});
cart.items.push({product: 'Тетрадь', price: 10.00, quantity: 4});
//Создаем объект Template
var itemFormat = new Template(
'Вы заказываете #{quantity} шт. ' +
'товара #{product} по #{price}р. каждая'
);
for(var i=0; i<cart.items.length; i++){
var cartItem = cart.items[i];
alert(itemFormat.evaluate(cartItem));
}
Получим:
Вы заказываете 1шт. товара Книга по 24.50р. каждая
Вы заказываете 3шт. товара Ручка по 5.44р. каждая
Вы заказываете 4шт. товара Тетрадь по 10.00р. каждая
Ну и разумеется, в современном мире нельзя закончить, не сказав об AJAX. Теперь AJAX-запрос можно выполнить следующим образом:
var myAjax = new Ajax.Request(
url,
{method: 'post', parameters: data, onComplete: ajax_response}
);
Метод — get или post.
Параметры — вида ключ=значение, объединённые в Query-string.
OnComplete — функция, которая будет вызвана, после завершения AJAX-запроса
Пример:
var url = 'http://yourserver/app/get_sales';
var pars = 'id=123&value=456';
var myAjax = new Ajax.Request(
url,
{
method: 'get',
parameters: pars,
onComplete: showResponse
});
}
function showResponse(originalRequest)
{
alert(originalRequest.responseText);
}
Заключение
В библиотеке prototype.js множество замечательных возможностей, которые могут облегчить жизнь разработчику и которые просто нельзя описать в небольшой статье.
Спасибо, если вы дочитали до этого места.
Полезные ссылки
Официальный сайт проекта. Здесь вы можете скачать последнюю версию фреймворка и ознакомиться с официальной документацией
Для всего остального есть Google