- Prototype
-
Prototype
Prototype JavaScript Framework Тип JavaScript-библиотека Разработчик Prototype Core Team ОС Кроссплатформенное ПО Версия 1.6.1 (1 сентября, 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
: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 = "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);
См. также
Ссылки
- Официальная страница (англ.)
- Официальная документация Prototype API (англ.)
- Введение в Prototype (рус.)
- Prototype JavaScript Framework по-русски (лента новостей) (рус.)
- Документация Prototype API от Sergio Pereira (англ.)
- Функции Prototype для работы с окнами (англ.)
- Работа с событиями в Prototype (англ.)
- Rico — библиотека на основе Prototype (англ.)
- Protochart — библиотека на основе Prototype для создания графиков и диаграмм (англ.)
Веб-фреймворки ASP.NET DotNetNuke • ASP.NET MVC • MonoRail
ColdFusion ColdSpring • Fusebox • Mach-II • Model-Glue
Java Apache Cocoon • Apache Struts • AppFuse • Aranea framework • Eclipse • Facelets • Flexive • FreeMarker • Google Web Toolkit • Grails • Hamlets • ItsNat • Jakarta Velocity • JavaServer Faces • Jspx • JBoss Seam • jZeno • Makumba • OpenLaszlo • OpenXava • Reasonable Server Faces (RSF) • Restlet • RichFaces • RIFE • Shale Framework • SmartClient • Spring Framework • Stripes • Tapestry • ThinWire • Vaadin • WebWork • WebObjects • WebWork • Wicket Framework • ZK Framework
JavaScript AJILE • Clean AJAX • Dojo Toolkit • Echo • Ext JS • jQuery • jMaki • Microsoft AJAX Library • MochiKit • MooTools • Prototype JavaScript Framework • qooxdoo • Rialto Toolkit • Rico • script.aculo.us • SmartClient • Spry framework • Yahoo! UI Library
Perl Catalyst • Interchange • Titanium • Maypole • Mason
PHP Acode Framework • Akelos PHP Framework • BlueShoes • CakePHP • Canvas • CodeIgniter • DIY Framework • Drupal • FUSE • Horde • Kohana • Livestreet • PHP For Applications • PHPOpenbiz • PRADO • Qcodo • Seagull Framework • Solar Framework • Symfony • Zend Framework • Zoop Framework • Joomla
Python Ruby Camping • Nitro • IOWA • Ramaze • Cerise • Merb • Ruby on Rails • Sinatra • Padrino
Прочие
языкиAlpha Five • Fusebox (ColdFusion и PHP) • Helma Object Publisher (Server-side) • Lift (Scala) • Magic (Scheme) • OpenACS (Tcl) • Seaside (Smalltalk) • UnCommon Web (Common Lisp) • Yaws (Erlang) • Oracle Application Express (PL/SQL)
Wikimedia Foundation. 2010.