Prototype
| Prototype JavaScript Framework | |
| Файл:Prototype logo.png | |
| Тип | JavaScript-библиотека |
| Разработчик | Prototype Core Team |
| ОС | Кроссплатформенное ПО |
| Версия | 1.6.1_rc2 (27 марта, 2009) |
| Лицензия | MIT License |
| Сайт | prototypejs.org |
Prototype — JavaScript фреймворк, упрощающий работу с Ajax и некоторыми другими функциями. Несмотря на его доступность в виде отдельной библиотеки, он обычно используется программистами вместе с Ruby on Rails, script.aculo.us и Rico.
Заявлено, что данный фреймворк поддерживается следующими браузерами: Internet Explorer (Windows) 6.0+, Mozilla Firefox 1.5+, Apple Safari 2.0+ и Opera 9.25+. Поддержка данных браузеров также подразумевает, что фреймворк поддерживается также Camino, Konqueror, IceWeasel, Netscape 7+, SeaMonkey, и др., которые принадлежат этим же семействам.
Возможности
В Prototype присутствуют самые разные способы упрощения создания JavaScript приложений, от сокращённого вызова некоторых функций языка до сложных методов обращения к XMLHttpRequest. Ниже приведены некоторые примеры.
Функция $()
Для обращения к DOM элементу HTML страницы обычно используется функция document.getElementById:
<source lang=javascript>document.getElementById("id_of_element")</source>
Функция $() уменьшает код до:
<source lang=javascript>$("id_of_element")</source>
Но в отличие от функции DOM, функции $() можно передавать более одного аргумента и функция вернет массив (Array) объектов со всеми соответствующими элементами:
<source lang=javascript>
var ar = $('id_1', 'id_2', 'id_3');
for (i=0; i<ar.length; i++)
{
alert(ar[i].innerHTML);
} </source>
Например, для указания цвета текста можно использовать следующий код: <source lang=javascript>$("id_of_element").style.color = "#ffffff";</source>
Или, используя расширенные функции Prototype: <source lang=javascript>$("id_of_element").setStyle({color: '#ffffff'});</source>
Код для версий ниже 1.5: <source lang=javascript>Element.setStyle("id_of_element", {color: "#ffffff"});</source>
Функция $$()
Функция $$() будет полезна тем, кто часто разделяет CSS от контента. Она разбивает один или несколько CSS фильтров, которые поступают на вход в виде выражения подобного регулярному выражению и возвращает элементы которые соответствуют этим фильтрам. Например при выполнении данного скрипта:
<source lang=javascript>var f = $$('div#block .inp');</source>
получим массив, содержащий все элементы с классом .inp, которые находятся в контейнере div с идентификатором id="block".
Замечание: в данный момент (в версии 1.5.0) реализация функции $$() в prototype.js не очень эффективна. Если вы планируете использовать данную функцию часто в работе с объёмными и сложными HTML документами, можете расмотреть другие свободные реализации и просто заменить саму функцию.
Функция $F()
Похожая на $(), функция $F() возвращает значение определённого элемента HTML формы. Для текстового поля функция будет возвращать данные, содержащиеся в элементе. Для элемента 'select' функция возвратит выбранное в текущий момент значение.
<source lang=javascript>$F("id_of_input_element")</source>
Замечание: знак доллара $ — нормальный разрешённый символ для идентификаторов JavaScript; он был специально добавлен в язык одновременно с поддержкой регулярных выражений для возможности использования Perl-совместимых метасимволов, таких как $` и $'.
Функция $A()
Функция $A() преобразует один аргумент, который она получает в объект Array. Эта функция, в сочетании с расширениями для класса Array, облегчает конвертирование или копирование любых перечислимых списков в объект Array. Один из вариантов использования заключается в том, чтобы преобразовать DOM NodeLists в регулярные массивы, которые могут быть более эффективно использованы.
Функция $H()
Функция $H() преобразовывает объекты в перечислимые Хэш объекты, которые похожи на ассоциативный массив.
<source lang=javascript>
//Допустим имеем объект:
var hash = {method: post, type: 2, flag: t};
//При использовании функции:
var h = $H(hash);
//Получим:
alert(h.toQueryString());
//method=post&type=2&flag=t
</source>
Объект Ajax
Объект Ajax предоставляет простые методы инициализации и работы с функцией XMLHttpRequest, без необходимости подстраивать код под нужный браузер. Существует два способа вызова объекта: Ajax.Request возвращает XML вывод AJAX-запроса, в то время как Ajax.Updater помещает ответ сервера в выбранную ветвь DOM.
Ajax.Request в примере ниже находит значения двух полей ввода, запрашивает страницу с сервера, используя значения в виде POST-запроса, а после завершения выполняет пользовательскую функцию showResponse():
<source lang=javascript>
var val1 = escape($F("name_of_id_1"));
var val2 = escape($F("name_of_id_2"));
var url = "http://yourserver/path/server_script";
var pars = {value1: val1, value2: val2};
var myAjax = new Ajax.Request(
url,
{
method: "post",
parameters: pars,
onComplete: showResponse
});
</source>
Класс Element
Методы класса предназначены для работы с элементами HTML. Для создания HTML элемента используется конструктор класса <source lang="javascript">new Element(tagName[,{attributes}])</source>. В конструктор передаётся HTML-тег в строковом виде и, если необходимо, аттрибуты тега. Пример создания нового элемента: <source lang="javascript">
// Создаём элемент
var newElement = new Element('div',{id: 'childDiv', class: 'divStyle'});
// Включаем созданный элемент в DOM браузера, а именно в существующий// с помощью метода Element.insert Element.insert($('parrentDiv'),newElement); </source>
Объектно-ориентированное программирование
Prototype также добавляет поддержку более традиционного объектно-ориентированного программирования.
Для создания нового класса используется метод Class.create(). Классу присваивается прототип prototype, который выступает в качестве основы для каждого экземпляра класса. Старые классы могут быть расширены новыми с помощью Object.extend.
<source lang=javascript> // создания нового класса в стиле prototype 1.6 var FirstClass = Class.create({
// Инициализация конструктора
initialize: function () {
this.data = "Hello World";
}
});
// создания нового класса в стиле prototype 1.5 var DataWriter = Class.create(); DataWriter.prototype = {
printData: function () {
document.write(this.data);
}
};
Object.extend(DataWriter, FirstClass); </source>
См. также
Ссылки
- Официальная страница (англ.)
- Официальная документация Prototype API (англ.)
- Введение в Prototype (рус.)
- Prototype JavaScript Framework по-русски (лента новостей) (рус.)
- Документация Prototype API от Sergio Pereira (англ.)
- Функции Prototype для работы с окнами (англ.)
- Работа с событиями в Prototype (англ.)
- Rico — библиотека на основе Prototype (англ.)
- Protochart — библиотека на основе Prototype для создания графиков и диаграмм (англ.)
ar:بروتوتيب (إطار عمل) de:Prototype (Framework) en:Prototype JavaScript Framework es:Prototype it:Prototype JavaScript Framework ja:Prototype JavaScript Framework ko:Prototype 자바스크립트 프레임워크 pl:Prototype JavaScript Framework ro:Prototype uk:Prototype vi:Prototype (Framework JavaScript) zh:Prototype JavaScript Framework
Если вам нравится SbUP.com Сайт, вы можете поддержать его - BTC: bc1qppjcl3c2cyjazy6lepmrv3fh6ke9mxs7zpfky0 , TRC20 и ещё....
