Прототип JavaScript-фреймворка

Другие варианты использования см. в разделе Программирование на основе прототипов .

Прототип

Оригинальный автор(ы)	Сэм Стивенсон
Разработчик(и)	Прототип основной команды
Первоначальный выпуск	февраль 2005 г ( 2005-02 )
Стабильная версия	1.7.3 / 22 сентября 2015 г ( 22 сентября 2015 )
Репозиторий	github .с /Сстифенсон /прототип
Написано в	JavaScript
Тип	библиотека JavaScript
Лицензия	МОЯ лицензия
Веб-сайт	прототип .org

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

Функции

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

Prototype также предоставляет библиотечные функции для поддержки классов и объектов на основе классов. Вместо этого в 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");  // Usual object reference returned
var prototypeEnhancedDomElement = $(domElement);            // Prototype extended object reference

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

Функция $F()

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

$F("id_of_input_element")

Функция $$()

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

$$("a.pulsate")

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

$$("a.pulsate").each(Effect.Pulsate);

Объект Аякса

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

new Ajax.Request("http://localhost/server_script", {
    parameters: {
        value1: $F("form_element_id_1"),
        value2: $F("form_element_id_2")
    },
    onSuccess: showResponse,
    onFailure: showError
});

Объектно-ориентированное программирование

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

var FirstClass = Class.create( {
    // The initialize method serves as a constructor
    initialize: function () {
        this.data = "Hello World";
    }
});

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

Ajax.Request = Class.create( Ajax.Base, {
    // Override the initialize method
    initialize: function(url, options) {
        this.transport = Ajax.getTransport();
        this.setOptions(options);
        this.request(url);
    },
    // ...more methods add ...
});

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

Проблемы

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

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

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

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

См. также

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

Библиография

• Орчард, Лесли М.; Пехливанян, Ара; Кун, Скотт; Джонс, Харли (31 августа 2009 г.). Профессиональные фреймворки JavaScript: Prototype, YUI, ExtJS, Dojo и MooTools (1-е изд.). Врокс Пресс . п. 888. ИСБН  978-0-470-38459-6 .

Внешние ссылки

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