Прототип JavaScript Framework

Prototype JavaScript Framework — это JavaScript- фреймворк, созданный Сэмом Стивенсоном в феврале 2005 года как часть поддержки Ajax в Ruby on Rails . Он реализован в виде одного файла кода JavaScript, обычно называемого prototype.js. Prototype распространяется автономно, но также как часть более крупных проектов, таких как Ruby on Rails, script.aculo.us и Rico. ^{[обновлять]}По данным w3techs, по состоянию на март 2021 года Prototype используется на 0,6% всех веб-сайтов. ^[1]

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

Prototype также предоставляет библиотечные функции для поддержки классов и объектов на основе классов. ^[2] В JavaScript создание объектов основано на прототипах : функция создания объекта может иметь prototypeсвойство, и любой объект, назначенный этому свойству, будет использоваться в качестве прототипа для объектов, созданных с помощью этой функции. Фреймворк Prototype не следует путать с этой языковой функцией.

Функцию доллара , $(), можно использовать как сокращение для функции getElementById . Для ссылки на элемент в объектной модели документа (DOM) страницы HTML обычная функция, идентифицирующая элемент, выглядит так:

document.getElementById ( " id_of_element" ) . style.color = " #ffffff " ;  

Функция $() сокращает код до:

$ ( "id_of_element" ). setStyle ({ color : '#ffffff' }); 

Функция $() также может получать элемент в качестве параметра и возвращать, как и в предыдущем примере, прототип расширенного объекта.

var domElement = document . getElementById ( "id_of_element" ); // Обычная возвращаемая ссылка на объект var prototypeEnhancedDomElement = $ ( domElement ); // Прототип расширенной ссылки на объект        

Примечание : Как и подчеркивание ( _), этот $символ является допустимым «словесным символом» в идентификаторах JavaScript и не имеет другого значения в языке. Он был добавлен в язык одновременно с поддержкой регулярных выражений , чтобы можно было эмулировать соответствующие переменные, подобные Perl$` , такие как и $'.

Основываясь на $()функции: $F()функция возвращает значение запрошенного элемента формы. Для ввода «текст» функция вернет данные, содержащиеся в элементе. Для элемента ввода «выбрать» функция вернет текущее выбранное значение.

$F ( "id_of_input_element" )

Функция доллар доллар — это селектор CSS Prototype . Она возвращает все соответствующие элементы, следуя тем же правилам, что и селектор в таблице стилей CSS. Например, если вы хотите получить все <a>элементы с классом "pulsate", вы должны использовать следующее:

$$ ( "a.pulsate" )

Это возвращает коллекцию элементов. Если вы используете расширение script.aculo.us основной библиотеки Prototype, вы можете применить эффект «пульсации» (мигания) следующим образом:

$$ ( "а.пульсация" ). каждый ( Эффект . Пульсация );

В попытке сократить объем кода, необходимого для запуска кросс-браузерной XMLHttpRequestфункции, Prototype предоставляет Ajaxобъект для абстрагирования различных браузеров. Он имеет два основных метода: Ajax.Request()и Ajax.Updater(). Существует две формы объекта Ajax. Ajax.Requestвозвращает необработанный вывод XML из вызова AJAX, в то время как Ajax.Updaterвставляет возврат внутрь указанного объекта DOM. Ajax.RequestНиже находит текущие значения двух элементов ввода HTML-формы, отправляет запрос HTTP POST на сервер с этими парами имя/значение элемента и запускает пользовательскую функцию (называемую showResponseниже) при получении ответа HTTP от сервера:

новый Ajax.Request ( "http://localhost/server_script" , { параметры : { значение1 : $F ( " form_element_id_1 " ), значение2 : $F ( "form_element_id_2" ) }, onSuccess : showResponse , onFailure : showError });             

Prototype также добавляет поддержку более традиционного объектно-ориентированного программирования. Class.create()Метод используется для создания нового класса. Затем классу назначается , prototypeкоторый действует как план для экземпляров класса.

var FirstClass = Class . create ( { // Метод инициализации служит конструктором initialize : function () { this . data = "Hello World" ; } });             

Расширение другого класса:

Ajax.Request = Class.create ( Ajax.Base , { // Переопределяем метод инициализации initialize : function ( url , options ) { this.transport = Ajax.getTransport ( ) ; this.setOptions ( options ) ; this.request ( url ) ; } , // ... добавляем больше методов ... } ) ;                

Функция фреймворка Object.extend(dest, src)принимает два объекта в качестве параметров и копирует свойства второго объекта в первый, имитируя наследование. Объединенный объект также возвращается как результат функции. Как в примере выше, первый параметр обычно создает базовый объект, тогда как второй является анонимным объектом, используемым исключительно для определения дополнительных свойств. Все объявление подкласса происходит в скобках вызова функции.

В отличие от других библиотек JavaScript, таких как jQuery , Prototype расширяет DOM. Планируется изменить это в следующей основной версии библиотеки. ^[3]

В апреле 2010 года блоггер Юрий «kangax» Зайцев (из Prototype Core) подробно описал проблемы, которые могут возникнуть из-за обезьяньего патчинга новых методов и свойств в объектах, определенных W3C DOM. ^[3] Эти идеи перекликаются с мыслями, опубликованными в марте 2010 года разработчиком Yahoo! Николасом С. Закасом ^[4]. Они были обобщены следующим образом ^[5]

• Проблемы с совместимостью с другими браузерами: объекты хоста не подчиняются правилам, поведение DOM не соответствует требованиям IE и т. д.
• Вероятность совпадений имен
• Накладные расходы на производительность

К 2008 году определенные проблемы с использованием методов расширения DOM в старых версиях Prototype, в сочетании с новыми версиями текущих браузеров, уже были задокументированы. ^[6] Вместо того, чтобы добавлять новые методы и свойства к уже существующим «хостовым» объектам DOM, таким как Element, например element.hide(), решением этих проблем является предоставление объектов-оболочек вокруг этих хостовых объектов и реализация новых методов в них. jQueryявляется ли такой объект-оболочка в библиотеке с таким именем. ^[3]

• Ajax (программирование)
• Сравнение фреймворков JavaScript
• JavaScript-фреймворк Mootools
• jQuery
• JavaScript-фреймворк
• Библиотека JavaScript

• Официальный сайт