Веб-фреймворк
- 1 year ago
- 0
- 0
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 предоставляет простые методы инициализации и работы с функцией
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 });
Методы класса предназначены для работы с элементами 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);