Prototype — JavaScript фреймворк , упрощающий работу с Ajax и некоторыми другими низкоуровневыми функциями. Prototype доступен в виде отдельной библиотеки , также он поставляется в составе Ruby on Rails , Tapestry , script.aculo.us и Rico .

Заявлено, что данный фреймворк совместим со следующими браузерами: Internet Explorer ( Windows ) 6.0+, Mozilla Firefox 1.5+, Apple Safari 2.0.4+ и Opera 9.25+, Google Chrome 1.0+. Поддержка данных браузеров подразумевает, что фреймворк совместим также с Camino , Konqueror , IceWeasel , Netscape 7+, SeaMonkey , Яндекс.Браузер и др., которые принадлежат этим же семействам.

Возможности

В Prototype присутствуют самые разные способы упрощения создания JavaScript приложений, от сокращённого вызова некоторых функций языка до сложных методов обращения к XMLHttpRequest . Ниже приведены некоторые примеры.

Функция $()

Для обращения к DOM элементу HTML страницы обычно используется функция document.getElementById :

document.getElementById("id_of_element")

Функция $() уменьшает код до:

$("id_of_element")

Но в отличие от функции DOM , функции $() можно передавать более одного аргумента и функция вернет массив ( ) объектов со всеми соответствующими элементами:

var ar = $('id_1', 'id_2', 'id_3');
for (i=0; i<ar.length; i++) {
  alert(ar[i].innerHTML);
}

Например, для указания цвета текста можно использовать следующий код:

$("id_of_element").style.color = "#ffffff";

Или, используя расширенные функции Prototype:

$("id_of_element").setStyle({color: '#ffffff'});

Код для версий ниже 1.5:

Element.setStyle("id_of_element", {color: "#ffffff"});

Функция $$()

Функция $$() будет полезна тем, кто часто разделяет CSS от контента. Она разбивает один или несколько CSS фильтров, которые поступают на вход в виде выражения подобного регулярному выражению и возвращает элементы которые соответствуют этим фильтрам. Например при выполнении данного скрипта:

var f = $$('div#block .inp');

получим массив, содержащий все элементы с классом .inp , которые находятся в контейнере div с идентификатором id="block" .

Замечание: в данный момент (в версии 1.5.0) реализация функции $$() в prototype.js не очень эффективна. Если вы планируете использовать данную функцию часто в работе с объёмными и сложными HTML документами, можете рассмотреть другие реализации и просто заменить саму функцию.

Функция $F()

Похожая на $() , функция $F() возвращает значение определённого элемента HTML формы. Для текстового поля функция будет возвращать данные, содержащиеся в элементе. Для элемента 'select' функция возвратит выбранное в текущий момент значение.

$F("id_of_input_element")

Замечание: знак доллара $ — нормальный разрешённый символ для идентификаторов JavaScript; он был специально добавлен в язык одновременно с поддержкой регулярных выражений для возможности использования Perl -совместимых метасимволов, таких как $` и $'.

Функция $A()

Функция $A() преобразует один аргумент, который она получает, в объект Array. Эта функция, в сочетании с расширениями для класса Array, облегчает конвертирование или копирование любых перечислимых списков в объект Array. Один из вариантов использования заключается в том, чтобы преобразовать DOM в регулярные массивы, которые могут быть более эффективно использованы.

Функция $H()

Функция $H() преобразовывает объекты в перечислимые хеш-объекты, которые похожи на ассоциативный массив.

//Допустим имеем объект:
var hash = {method: post, type: 2, flag: t};
//При использовании функции:
var h = $H(hash);
//Получим:
alert(h.toQueryString());
//method=post&type=2&flag=t

Объект Ajax

Объект Ajax предоставляет простые методы инициализации и работы с функцией XMLHttpRequest , без необходимости подстраивать код под нужный браузер. Существует два способа вызова объекта: Ajax.Request возвращает XML вывод AJAX-запроса, в то время как Ajax.Updater помещает ответ сервера в выбранную ветвь DOM.

Ajax.Request в примере ниже находит значения двух полей ввода, запрашивает страницу с сервера, используя значения в виде POST-запроса, а после завершения выполняет пользовательскую функцию showResponse() :

 
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
   });

Класс Element

Методы класса предназначены для работы с элементами HTML. Для создания HTML элемента используется конструктор класса

new Element(tagName[,{attributes}])

В конструктор передаётся HTML-тег в строковом виде и, если необходимо, атрибуты тега.

Пример создания нового элемента:

// Создаём элемент <div> в памяти и указываем атрибуты id, class.
var newElement = new Element('div',{id: 'childDiv', class: 'divStyle'});
// Включаем созданный элемент в DOM браузера, а именно в существующий <div>,
// с помощью метода Element.insert
Element.insert($('parrentDiv'),newElement);

Объектно-ориентированное программирование

Prototype также добавляет поддержку более традиционного объектно-ориентированного программирования .

Для создания нового класса используется метод Class.create() . Классу присваивается прототип prototype , который выступает в качестве основы для каждого экземпляра класса. Старые классы могут быть расширены новыми с помощью Object.extend .

// создания нового класса в стиле 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);

См. также

• jQuery
• Ruby on Rails
• script.aculo.us

Примечания

Ссылки

• (англ.)
• (англ.)
• (англ.)
• от 28 сентября 2007 на Wayback Machine (англ.)
• (англ.)
• (рус.)