Prototype (фреймворк)

Prototype JavaScript Framework
Тип	JavaScript-библиотека
Разработчик	[prototypejs.org/core Prototype Core Team]
Операционная система	Кроссплатформенное ПО
Последняя версия	1.7.3 (22 сентября, 2015)
Лицензия	MIT License
Сайт	[prototypejs.org/ pejs.org]

У этого термина существуют и другие значения, см. Прототип.

К:Википедия:Статьи без изображений (тип: не указан)

Prototype — JavaScript фреймворк, упрощающий работу с Ajax и некоторыми другими функциями. Несмотря на его доступность в виде отдельной библиотеки, он обычно используется программистами вместе с 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, Яндекс.Браузер и др., которые принадлежат этим же семействам.

Содержание

1 Возможности
2 Объектно-ориентированное программирование
3 См. также
4 Ссылки

Возможности

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

Функция `$()`

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

document.getElementById("id_of_element")

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

$("id_of_element")

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

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 NodeLists в регулярные массивы, которые могут быть более эффективно использованы.

Функция `$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 = "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);

См. также

Напишите отзыв о статье "Prototype (фреймворк)"

Ссылки

[www.prototypejs.org/ Официальная страница] (англ.)
[api.prototypejs.org/ Официальная документация Prototype API] (англ.)
[prototype-window.xilinus.com/ Функции Prototype для работы с окнами] (англ.)
[openrico.org/ Rico — библиотека на основе Prototype] (англ.)
[www.deensoft.com/lab/protochart/index.php Protochart — библиотека на основе Prototype для создания графиков и диаграмм] (англ.)
[www.prototypejs.ru/ Prototype JavaScript Framework по-русски (лента новостей)] (рус.)

Отрывок, характеризующий Prototype (фреймворк)

– Не было бы тяжело ему это свидание, chere Анна Михайловна, – сказал он. – Подождем до вечера, доктора обещали кризис.
– Но нельзя ждать, князь, в эти минуты. Pensez, il у va du salut de son ame… Ah! c'est terrible, les devoirs d'un chretien… [Подумайте, дело идет о спасения его души! Ах! это ужасно, долг христианина…]
Из внутренних комнат отворилась дверь, и вошла одна из княжен племянниц графа, с угрюмым и холодным лицом и поразительно несоразмерною по ногам длинною талией.
Князь Василий обернулся к ней.
– Ну, что он?
– Всё то же. И как вы хотите, этот шум… – сказала княжна, оглядывая Анну Михайловну, как незнакомую.
– Ah, chere, je ne vous reconnaissais pas, [Ах, милая, я не узнала вас,] – с счастливою улыбкой сказала Анна Михайловна, легкою иноходью подходя к племяннице графа. – Je viens d'arriver et je suis a vous pour vous aider a soigner mon oncle . J`imagine, combien vous avez souffert, [Я приехала помогать вам ходить за дядюшкой. Воображаю, как вы настрадались,] – прибавила она, с участием закатывая глаза.
Княжна ничего не ответила, даже не улыбнулась и тотчас же вышла. Анна Михайловна сняла перчатки и в завоеванной позиции расположилась на кресле, пригласив князя Василья сесть подле себя.
– Борис! – сказала она сыну и улыбнулась, – я пройду к графу, к дяде, а ты поди к Пьеру, mon ami, покаместь, да не забудь передать ему приглашение от Ростовых. Они зовут его обедать. Я думаю, он не поедет? – обратилась она к князю.
– Напротив, – сказал князь, видимо сделавшийся не в духе. – Je serais tres content si vous me debarrassez de ce jeune homme… [Я был бы очень рад, если бы вы меня избавили от этого молодого человека…] Сидит тут. Граф ни разу не спросил про него.
Он пожал плечами. Официант повел молодого человека вниз и вверх по другой лестнице к Петру Кирилловичу.

Пьер так и не успел выбрать себе карьеры в Петербурге и, действительно, был выслан в Москву за буйство. История, которую рассказывали у графа Ростова, была справедлива. Пьер участвовал в связываньи квартального с медведем. Он приехал несколько дней тому назад и остановился, как всегда, в доме своего отца. Хотя он и предполагал, что история его уже известна в Москве, и что дамы, окружающие его отца, всегда недоброжелательные к нему, воспользуются этим случаем, чтобы раздражить графа, он всё таки в день приезда пошел на половину отца. Войдя в гостиную, обычное местопребывание княжен, он поздоровался с дамами, сидевшими за пяльцами и за книгой, которую вслух читала одна из них. Их было три. Старшая, чистоплотная, с длинною талией, строгая девица, та самая, которая выходила к Анне Михайловне, читала; младшие, обе румяные и хорошенькие, отличавшиеся друг от друга только тем, что у одной была родинка над губой, очень красившая ее, шили в пяльцах. Пьер был встречен как мертвец или зачумленный. Старшая княжна прервала чтение и молча посмотрела на него испуганными глазами; младшая, без родинки, приняла точно такое же выражение; самая меньшая, с родинкой, веселого и смешливого характера, нагнулась к пяльцам, чтобы скрыть улыбку, вызванную, вероятно, предстоящею сценой, забавность которой она предвидела. Она притянула вниз шерстинку и нагнулась, будто разбирая узоры и едва удерживаясь от смеха.
– Bonjour, ma cousine, – сказал Пьер. – Vous ne me гесоnnaissez pas? [Здравствуйте, кузина. Вы меня не узнаете?]
– Я слишком хорошо вас узнаю, слишком хорошо.
– Как здоровье графа? Могу я видеть его? – спросил Пьер неловко, как всегда, но не смущаясь.
– Граф страдает и физически и нравственно, и, кажется, вы позаботились о том, чтобы причинить ему побольше нравственных страданий.
– Могу я видеть графа? – повторил Пьер.
– Гм!.. Ежели вы хотите убить его, совсем убить, то можете видеть. Ольга, поди посмотри, готов ли бульон для дяденьки, скоро время, – прибавила она, показывая этим Пьеру, что они заняты и заняты успокоиваньем его отца, тогда как он, очевидно, занят только расстроиванием.
Ольга вышла. Пьер постоял, посмотрел на сестер и, поклонившись, сказал:
– Так я пойду к себе. Когда можно будет, вы мне скажите.
Он вышел, и звонкий, но негромкий смех сестры с родинкой послышался за ним.
На другой день приехал князь Василий и поместился в доме графа. Он призвал к себе Пьера и сказал ему:
– Mon cher, si vous vous conduisez ici, comme a Petersbourg, vous finirez tres mal; c'est tout ce que je vous dis. [Мой милый, если вы будете вести себя здесь, как в Петербурге, вы кончите очень дурно; больше мне нечего вам сказать.] Граф очень, очень болен: тебе совсем не надо его видеть.
С тех пор Пьера не тревожили, и он целый день проводил один наверху, в своей комнате.
В то время как Борис вошел к нему, Пьер ходил по своей комнате, изредка останавливаясь в углах, делая угрожающие жесты к стене, как будто пронзая невидимого врага шпагой, и строго взглядывая сверх очков и затем вновь начиная свою прогулку, проговаривая неясные слова, пожимая плечами и разводя руками.
– L'Angleterre a vecu, [Англии конец,] – проговорил он, нахмуриваясь и указывая на кого то пальцем. – M. Pitt comme traitre a la nation et au droit des gens est condamiene a… [Питт, как изменник нации и народному праву, приговаривается к…] – Он не успел договорить приговора Питту, воображая себя в эту минуту самим Наполеоном и вместе с своим героем уже совершив опасный переезд через Па де Кале и завоевав Лондон, – как увидал входившего к нему молодого, стройного и красивого офицера. Он остановился. Пьер оставил Бориса четырнадцатилетним мальчиком и решительно не помнил его; но, несмотря на то, с свойственною ему быстрою и радушною манерой взял его за руку и дружелюбно улыбнулся.
– Вы меня помните? – спокойно, с приятной улыбкой сказал Борис. – Я с матушкой приехал к графу, но он, кажется, не совсем здоров.
– Да, кажется, нездоров. Его всё тревожат, – отвечал Пьер, стараясь вспомнить, кто этот молодой человек.
Борис чувствовал, что Пьер не узнает его, но не считал нужным называть себя и, не испытывая ни малейшего смущения, смотрел ему прямо в глаза.
– Граф Ростов просил вас нынче приехать к нему обедать, – сказал он после довольно долгого и неловкого для Пьера молчания.
– А! Граф Ростов! – радостно заговорил Пьер. – Так вы его сын, Илья. Я, можете себе представить, в первую минуту не узнал вас. Помните, как мы на Воробьевы горы ездили c m me Jacquot… [мадам Жако…] давно.

Prototype (фреймворк)

Содержание

Возможности

Функция `$()`

Функция `$$()`

Функция `$F()`

Функция `$A()`

Функция `$H()`

Объект Ajax

Класс Element

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

См. также

Напишите отзыв о статье "Prototype (фреймворк)"

Ссылки

Отрывок, характеризующий Prototype (фреймворк)

Навигация

Персональные инструменты

Поиск

Навигация

Инструменты

На других языках

Prototype (фреймворк)

Содержание

Возможности

Функция $()

Функция $$()

Функция $F()

Функция $A()

Функция $H()

Объект Ajax

Класс Element

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

См. также

Напишите отзыв о статье "Prototype (фреймворк)"

Ссылки

Отрывок, характеризующий Prototype (фреймворк)

Навигация

Поиск

Функция `$()`

Функция `$$()`

Функция `$F()`

Функция `$A()`

Функция `$H()`