Что это?

На случай, если вы ни разу не пользовались, prototype.js — это JavaScript библиотека, написанная Сэмом Стефенсеном (Sam Stephenson).

Этот потрясающе продуманный и написанный в соответствии со стандартам код берет на себя немалую часть работы, связанной с созданием функционально-богатых интерактивных страниц, которые характерны для Web 2.0.

Если вы уже пытались использовать эту библиотеку, наверняка заметили, что документация не является ее сильной стороной. Как и многие разработчики до меня я разобрался с prototype.js путем чтения кода и экспериментов. Я подумал, что неплохо было бы, учась, делать заметки, и потом поделиться ими со всеми.

Так же я предлагаю неофициальную справку по объектам, классам, функциям и расширениям, предоставляемым этой библиотекой.

Вспомогательные функции

Библиотека располагает множеством предопределенных объектов и вспомогательных функций. Очевидная польза этих функций в сокращении необходимости набирать часто повторящиеся куски кода.

Использование функции $()

Функция $() — это короткая запись для очень часто используемой функции DOM document.getElementById(). Как и функция DOM, она возвращает элемент, который имеет id, переданный в агрументе.

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

 
<script>
 
 
function test1(){
 
<span class="highlite">var d = $('myDiv');</span>
 
alert(d.innerHTML);
 
 
}
 
 
 
function test2()
{
 
<span class="highlite">var divs = $('myDiv','myOtherDiv');</span>
 
for(i=0; i<divs.length; i++)
 
{
 
alert(divs[i].innerHTML);
}
 
}
 
</script>
 
 
 
<div id="myDiv">
 
<p>This is a paragraph</p>
 
 
</div>
 
 
<div id="myOtherDiv">
 
 
<p>This is another paragraph</p>
 
 
</div>
 
 
 
<input type="button" onclick="test1();" value="Test1" />
 
 
<input type="button" onclick="test2();" value="Test2" />
 
 
 
 

Другая примечательная особенность этой функции заключается в том, что вы можете передать ей как строку с id, так и сам элемент, что делает эту функцию очень удобной для создания других функций, принимающих тот или иной тип параметра.

Использование функции $F()

Функция $F() — это еще одно удобное сокращение. Она возвращает значение полей ввода, таких как текстовые поля или выпадающие списки. Функция принимает в качестве параметра как id элемента, так и сам элемент.

 
<script>
function test3()
{
alert( <span class="highlite">$F('userName')</span>  );
 
}
 
</script>
 
 
 
<input type="text" value="Joe Doe" id="userName" />
 
 
<input type="button" onclick="test3();" value="Test3" />
 
 

Использование функции Try.these()

Функция Try.these() позволяет легко попробовать вызвать несколько функций, до тех пор пока какая-нибудь из них сработает.Она принимает в качестве параметров несколько функций и вызывает их одну за другой по порядку, пока какая-нибудь не заработает, и возвращает результат сработавшей функции.

В примере, приведенном ниже, функция xmlNode.text работает в одних браузерах,а xmlNode.textContent работает в других. Используя функцию Try.these() мы можем получить результат работающей.

 
<script>
 
function getXmlNodeValue(xmlNode){
return <span class="highlite">Try.these</span>(
function() {return xmlNode.text;},
 
function() {return xmlNode.textContent;)
 
);
 
}
 
</script>
 
 

Объект Ajax

Вспомогательные функции упомянутые здесь хороши, но не слишком сложны, не так ли? Вы, возможно, уже делали это сами и даже имеете похожие функции в своих скриптах. Но эти функции — только верхушка айсберга.

Я уверен, что ваш интерес к prototype.js вызван в основном его возможностями, связанными с AJAX. Давайте выясним, как эта библиотека может облегчить вам жизнь при реализации AJAX логики.

Объект Ajax — это предопределенный объект, созданный библиотекой, для сокрытия и упрощения кода, в котором требуется AJAX функциональность. Этот объект содержит несколько классов, содержащих инкапсулированную AJAX логику. Давайте взглянем на некоторые из них.

Использование класса Ajax.Request

Если вы не используете вспомогательных библиотек, то, вероятно, пишете много кода для создания объекта XMLHttpRequest, потом асинхронно отслеживаете его работу, извлекаете ответ сервера и обрабатываете его. И счастливы, что вам не требуется поддержка нескольких браузеров.

Чтобы помочь с реализацией AJAX функциональности, библиотека определяеткласс Ajax.Request.

Допустим, у вас есть приложение, которое соединяется с сервером по адресу http://yoursever/app/get_sales?empID=1234&year=1998,который возвращает следующий ответ в формате XML:

 
<?xml version="1.0" encoding="utf-8" ?> 
 
<ajax-response>
<response id="productDetails" type="object">
 
<monthly-sales>
 
<employee-sales>
 
<employee-id>1234</employee-id> 
<year-month>1998-01</year-month> 
<sales>$8,115.36</sales> 
 
</employee-sales>
 
<employee-sales>
 
<employee-id>1234</employee-id> 
 
<year-month>1998-02</year-month> 
 
<sales>$11,147.51</sales> 
 
</employee-sales>
 
</monthly-sales>
 
</response>
 
</ajax-response>
 

Обратиться к серверу для получения этого XML с использованием Ajax.Request очень легко. Пример ниже показывает, как это может быть сделано.

 
<script>
 
function searchSales()
{
var empID = $F('lstEmployees');
 
var y = $F('lstYears');
 
var url = 'http://yoursever/app/get_sales';
 
var pars = 'empID=' + empID + '&year=' + y;
 
<div class="highlite">
 
var myAjax = new Ajax.Request(
 
url, 
 
{method: 'get', parameters: pars, onComplete: showResponse}
);
 
</div>
 
}
 
 
function showResponse(originalRequest)
 
{
 
//put returned XML in the textarea
 
$('result').value = originalRequest.responseText;
 
}
 
</script>
 
 
 
<select onchange="searchSales()" size="10" id="lstEmployees">
<option value="5">Buchanan, Steven</option>
<option value="8">Callahan, Laura</option>
<option value="1">Davolio, Nancy</option>
</select>
 
<select onchange="searchSales()" size="3" id="lstYears">
<option value="1996" selected="selected">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
</select>
 
 
 
<textarea rows="10" cols="60" id="result"></textarea>

Видите второй параметр, переданный конструктору Ajax.Request? Параметр {method: 'get', parameters: pars, onComplete: showResponse} представляет собой анонимный объект. Это значит, что мы передаем объект, который имеет свойство method, содержащее строку 'get', свойство parameters, содержащее строку параметров HTTP запроса и свойство/метод onComplete, содержащее функцию showResponse.

Есть еще несколько свойств, которые вы можете определить и использовать в этом объекте, например, свойство asynchronous, которое может принимать значения true или false, и определяет будет ли запрос к серверу асинхронным (значение по умолчанию true.)

Этот параметр определяет опции AJAX запроса. В нашем примере мы запрашиваем URL, указанный в первом аргументе, с помощью HTTP команды GET передавая строку запроса, указанную в переменной pars, и объект Ajax.Request вызовет функцию showResponse, когда получит ответ сервера.

Как вы, возможно, знаете, XMLHttpRequest сообщает о прогрессе во время HTTP запроса. Есть четыре различных состояния: Loading, Loaded, Interactive, или Complete. Вы можете указать объекту Ajax.Request вызывать различные собственные функции на разных стадиях, чаще всего это используется для состояния Complete. Чтобы сообщить объекту о своих функциях, просто передайте свойства/методы onXXXXX в опциях запроса, например onComplete, как в нашем примере. Функция, которую вы передадите, будет вызвана объектом с одним аргументом — объектом XMLHttpRequest. Вы можете использовать этот объект, чтобы получить данные, возвращенные сервером или проверить свойство status, которое содержит HTTP код ответа.

Две других интересных опции могут быть использованы для обработки результата. Свойство onSuccess — это функция, которая будет вызвана, если AJAX запрос выполнится без ошибок, а наоборот свойство onFailure может содержать функцию, которая будет вызвана, если случится ошибка на сервере. Как и опции-функции onXXXXX, эти две также будут вызваны с объектом XMLHttpRequest, который обслуживал запрос, в качестве аргумента.

Наш пример не делал ничего интересного с XML ответом. Мы просто выводили XML в текстовое поле. Типичным использованием ответа, наверное, является нахождение требуемой информации в XML и обновление некоторых элементов страницы, или даже применение XSLT трансформации, чтобы получить HTML на странице.

Для более полного объяснения смотрите справку по Ajax.Request и options.

Использование класса Ajax.Updater

Если ваш сервер может возвращать информацию, уже сформатированную в HTML, библиотека может сделать вашу жизнь еще легче с помощью класса Ajax.Updater. С ним вам надо только указать, в какой элемент должен быть вставлен HTML, возвращенный AJAX запросом. Пример все расскажет лучше, чем я смогу написать.

<script>
function getHTML()
{
var url = 'http://yourserver/app/getSomeHTML';
var pars = 'someParameter=ABC';
<div class="highlite">
var myAjax = new Ajax.Updater('placeholder', url, {method: 'get', parameters: pars});
</div>
}
</script>
 
<input type="button" onclick="getHTML()" value="GetHtml" />
<div id="placeholder"> </div>

Как видите, код очень похож на код из предыдущего примера, за исключением функции onComplete, которой теперь нет, и id элемента, передаваемого конструктору. Изменим немного код, чтобы показать, как можно в клиенте обрабатывать ошибки сервера.

Мы добавим в запрос несколько опции, указывающих функцию, которая будет обрабатывать ошибочные состояния. Это делается с помощью опции onFailure. Мы также укажем, что элемент placeholder должен обновляться только в случае удачного запроса. Чтобы добиться этого, мы вместо простого id элемента первым параметром укажем объект с двумя свойствами, success (которое будет использовано, если все сработает) и failure (которое будет использовано, если случится ошибка). Мы не будем использовать свойство failure в нашем примере, а только функцию reportError в свойстве onFailure.

<script>
function getHTML()
{
var url = 'http://yourserver/app/getSomeHTML';
var pars = 'someParameter=ABC';
<div class="highlite">
var myAjax = new Ajax.Updater(
{success: 'placeholder'}, 
url, 
{method: 'get', parameters: pars, onFailure: reportError});
</div>
}
 
function reportError(request)
{
alert('Sorry. There was an error.');
}
</script>
 
<input type="button" onclick="getHTML()" value="GetHtml" />
<div id="placeholder"> </div>
 

Если ваш сервер возвращает JavaScript код вместо HTML Ajax.Updater может его исполнить этот код. Чтобы указать объект, что надо трактовать ответ как JavaScript, просто добавьте evalScripts: true; в список свойств в последнем аргументе конструктора.

Для более полного объяснения смотрите справку по Ajax.Updater и options.

Справка по prototype.js

Расширение классов JavaScript

Один из путей, которым библиотека prototype.js добавляет функциональность, — расширение существующих классов JavaScript.

Расширение класса Object

Расширение класса Number

Расширение класса Function

Давайте посмотрим на одно из этих расширений в действии.

 
<input type="checkbox" value="1" id="myChk" /> Test?
<script>
// Объявляем класс
var CheckboxWatcher = Class.create();
 
// Определяем остальную часть реализации класса
CheckboxWatcher.prototype = {
 
initialize: function(chkBox, message) {
this.chkBox = $(chkBox);
this.message = message;
// присоединяем наш метод к событию
<span class="highlite">this.chkBox.onclick = this.showMessage.bindAsEventListener(this);</span>
},
 
showMessage: function(evt) {
alert(this.message + ' (' + evt.type + ')');
}
};
 
 
var watcher = new CheckboxWatcher('myChk', 'Changed');
</script>
 

Расширение класса String

Расширение класса document DOM object

Расширение класса Event object

Рассмотрим, как воспользоваться этим объектом, чтобы добавить обработчик событию load объекта window.

<script>
<span class="highlite">Event.observe(window, 'load', showMessage, false);</span>
 
function showMessage() {
alert('Page loaded.');
}
</script>

Новые объекты и классы, определенные prototype.js

Еще одна полезная возможность библиотеки — предоставление множества объектов, реализующих поддержку объектно-ориентированного дизайна и общей функциональности.

Объект PeriodicalExecuter

Этот объект предоставляет способ периодического вызова функций через заданный интервал.

Объект Prototype

Объект Prototype не делает ничего особенного, кроме того, что объявляет используемую версию библиотеки.

Объект Class

Объект Class используется для объявления других классов библиотеки. Использование этого класса гарантирует, что новый класс будет поддерживать метод initialize(), который используется как конструктор.

Смотрите пример ниже.

// Объявляем класс
<span class="highlite">var MySampleClass = Class.create();</span>
 
// определяем остальные детали реализации класса
MySampleClass.prototype = {
 
initialize: function(message) {
this.message = message;
},
 
showMessage: function(ajaxResponse) {
alert(this.message);
}
};  
 
// теперь создаем и используем объект
var myTalker = new MySampleClass('hi there.');
myTalker.showMessage(); // показывает окно предупреждения
 

Объект Ajax

Этот объект используется как основа для многих других классов, предоставляющих AJAX функциональность.

Класс Ajax.Base

Этот класс используется как базовый для других классов, определенных в объекте Ajax.

Класс Ajax.Request

Наследуется от Ajax.Base

Содержит AJAX операции

Класс options argument object

Аргумент options является важной частью AJAX операций. Для этого нет класса options. Любой объект, имеющий требуемые свойства, может быть использован. Обычно используются анонимные объекты, созданные специально для AJAX запросов.

Класс Ajax.Updater

Наследуется от Ajax.Request

Используется, когда запрошенный URL возвращает HTML, который вы хотите напрямую вставить в определенный элемент на странице. Вы можете так же использовать этот объект, если URL возвращает блоки <script&qt;,которые должны быть выполнены после получения. Воспользуйтесь опцией evalScripts, чтобы эта функция работала.

Класс Ajax.PeriodicalUpdater

Наследуется от Ajax.Base

Этот класс создается периодически и использует объект Ajax.Updater для обновления элементов на странице или для любых других действий, которые может делать Ajax.Updater. Смотрите справку для Ajax.Updater reference для дополнительной информации.

Объект Element

Этот объект предоставляет некоторые вспомогательные функции для работы с элементами в DOM.

Объект Abstract

Этот объект служит основой для других классов в библиотеке. У него нет никаких свойств или методов. Классы определенные в данном объекте также считаются традиционными абстрактными классами.

Класс Abstract.Insertion

Это класс используется как базовый для других классов, реализующих динамическую вставку данных. Этот класс используется как абстрактный.

Объект Insertion

Этот объект служит основой для других классов в библиотеке. Он не имеет никаких свойств или методов. Классы, определенные в этом объекте считаются традиционными абстрактными классами.

Класс Insertion.Before

Наследуется от Abstract.Insertion

Вставляет HTML перед элементом.

Следующий код

 
Hello, <span id="person" style="color:red;">Wiggum. How's it going?</span>
 
<script> <span class="highlite">new Insertion.Before('person', 'Chief ')</span>; </script>
 
<p>         Изменит HTML на       </p>
<pre class="code">
Hello, <span class="highlite">Chief </span><span style="color: red;" id="person">Wiggum. How's it going?</span>

Класс Insertion.Top

Наследуется от Abstract.Insertion

Вставляет HTML первым ребенком данного элемента. Данные будут вставлены сразу после открывающего тега элемента.

Следующий код

 
Hello, <span style="color: red;" id="person">Wiggum. How's it going?</span>
 
<script> <span class="highlite">new Insertion.Top('person', 'Mr. ')</span>; </script>

Изменит HTML на

 
Hello, <span style="color: red;" id="person"><span class="highlite">Mr. </span>Wiggum. How's it going?</span>  

Класс Insertion.Bottom

Наследуется от Abstract.Insertion

Вставляет HTML последним ребенком данного элемента. Данные будут вставлены перед закрывающим тегом элемента.

Следующий код

 
Hello, <span style="color: red;" id="person">Wiggum. How's it going?</span>
 
<script> <span class="highlite">new Insertion.Bottom('person', " What's up?")</span>; </script>

Изменит HTML на

 
Hello, <span style="color: red;" id="person">Wiggum. How's it going?<span class="highlite"> What's up?</span></span>

Класс Insertion.After

Наследуется от Abstract.Insertion

Вставляет HTML сразу за закрывающим тегом элемента.

Следующий код

 
Hello, <span style="color: red;" id="person">Wiggum. How's it going?</span>
 
<script> <span class="highlite">new Insertion.After('person', ' Are you there?')</span>; </script>

Изменит HTML на

 
Hello, <span style="color: red;" id="person">Wiggum. How's it going?</span><span class="highlite"> Are you there?</span>  

Объект Field

Этот объект предоставляет несколько вспомогательных функций для работы с полями ввода форм.

Объект Form

Этот объект предоставляет несколько вспомогательных функций для работы с формами и их полями ввода.

Объект Form.Element

Этот объект предоставляет несколько вспомогательных форм для работы с видимыми и невидимыми элементами формы.

Объект Form.Element.Serializers

Этот объект предоставляет несколько вспомогательных функций, которые используются внутри библиотеки для облегчения извлечения значений элементов форм.

Класс Abstract.TimedObserver

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

Производные классы могут быть созданы для отслеживания таких вещей, как например, изменение значения поля ввода или одного из свойств стиля или количества строк в таблице или чего-либо еще, что вам интересно отслеживать.

Класс Form.Element.Observer

Наследуется от Abstract.TimedObserver

Реализация Abstract.TimedObserver, которая отслеживает значения полей ввода. Используйте этот класс, если вы хотите следить за элементом, который не создает события при изменении значения. В противном случае вы можете воспользоваться классом Form.Element.EventObserver.

Класс Form.Observer

Наследуется от Abstract.TimedObserver

Реализация Abstract.TimedObserver, которая отслеживает изменения любого из полей формы. Используйте этот класс, если вы хотите следить за формой, которая содержит элементы, которые не создают события при изменении значения. В противном случае вы можете воспользоваться классом Form.EventObserver.

Класс Abstract.EventObserver

Этот класс используется как базовый для других классов, выполняющих функции при возникновении каких-либо событий изменяющих значения элемента.

К одному и тому же элементу можно быть присоединено несколько объектов типа Abstract.EventObserver без помех друг для друга. Они будут вызываться в порядке присоединения.

Событие, на котором срабатывает объект: onclick для радио-кнопок и чекбоксов и onchange для всех текстовых полей и списков.

Источник: http://myjoomla.ru/