Prototype (фреймворк) | это... Что такое Prototype (фреймворк)? (original) (raw)

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

Prototype JavaScript Framework

Prototype logo.png
Тип JavaScript-библиотека
Разработчик Prototype Core Team
Операционная система Кроссплатформенное ПО
Последняя версия 1.7.1 (5 июня, 2012)
Лицензия MIT License
Сайт prototypejs.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, и др., которые принадлежат этим же семействам.

Содержание

Возможности

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

Функция $()

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

document.getElementById("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-совместимых метасимволов, таких как <span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi mathvariant="normal">‘</mi><mtext>и</mtext></mrow><annotation encoding="application/x-tex">` и </annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.6944em;"></span><span class="mord">‘</span><span class="mord cyrillic_fallback">и</span></span></span></span>'.

Функция $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-тег в строковом виде и, если необходимо, атрибуты тега.

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

// Создаём элемент

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

См. также

Ссылки

Просмотр этого шаблона Веб-фреймворки
ASP.NET DotNetNuke • ASP.NET MVC • MonoRail
ColdFusion ColdSpring • Fusebox • Mach-II • Model-Glue
Java Apache (Cocoon • Struts • Velocity • WebWork 2) • AppFuse • Aranea • Eclipse • Facelets • Flexive • FreeMarker • Google Web Toolkit • Grails • Hamlets • ItsNat • JavaServer Faces • Jspx • JBoss Seam • jZeno • Makumba • OpenLaszlo • OpenXava • Reasonable Server Faces (RSF) • Restlet • RichFaces • RIFE • Shale • SmartClient • Spring • Stripes • Tapestry • ThinWire • Vaadin • WebMacro • WebWork • WebObjects • Wicket • ZK
JavaScript node.js • AJILE • Clean AJAX • Dojo Toolkit • Echo • Ext JS • jQuery • jMaki • Microsoft AJAX Library • MochiKit • MooTools • Prototype • qooxdoo • Rialto Toolkit • Rico • script.aculo.us • SmartClient • Spry • SproutCore • Yahoo! UI Library • Underscore • PhoneGap
Perl Catalyst • Interchange • Titanium • Maypole • HTML:Mason
PHP Acode • Akelos • BlueShoes • CakePHP • Canvas • CodeIgniter • DIY • Drupal • Fuse • Horde • Kohana • LiveStreet • PHP For Applications • PHPOpenbiz • PRADO • Qcodo • Seagull • Solar • Symfony • W3Core • Yii • Zend • Zoop • Joomla
Python CherryPy • Django • GAE framework • Karrigell • Nevow • Porcupine • Pylons • Pyramid • Spyce • TurboGears • Twisted • Tornado • Webware • Zope
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)