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% всех веб-сайтов. [1]
Автор (ы) оригинала | Сэм Стивенсон |
---|---|
Разработчики) | Основная команда прототипа |
Первый выпуск | Февраль 2005 г . |
Стабильный выпуск | 1.7.3 / 22 сентября 2015 г . |
Репозиторий | |
Написано в | JavaScript |
Тип | Библиотека JavaScript |
Лицензия | Лицензия MIT |
Веб-сайт | prototypejs |
Функции
Prototype предоставляет различные функции для разработки приложений JavaScript. Возможности варьируются от ярлыков программирования до основных функций для работы с XMLHttpRequest .
Prototype также предоставляет библиотечные функции для поддержки классов и объектов на основе классов . [2] В JavaScript создание объекта вместо этого основано на прототипе : функция создания объекта может иметь свойство прототипа , и любой объект, назначенный этому свойству, будет использоваться в качестве прототипа для объектов, созданных с помощью этой функции. Фреймворк Prototype не следует путать с этой функцией языка.
Примеры служебных функций
Функция $ ()
Функция доллара , $ (), может использоваться как сокращение для функции getElementById . Для ссылки на элемент в объектной модели документа (DOM) HTML- страницы обычная функция, идентифицирующая элемент:
документ . getElementById ( "id_of_element" ). стиль . цвет = "#ffffff" ;
Функция $ () сокращает код до:
$ ( "id_of_element" ). setStyle ({ цвет : '#ffffff' });
Функция $ () также может принимать элемент в качестве параметра и возвращать, как в предыдущем примере, расширенный объект прототипа.
var domElement = документ . getElementById ( "id_of_element" ); // Возвращена обычная ссылка на объект var prototypeEnhancedDomElement = $ ( domElement ); // Ссылка на расширенный объект прототипа
- Примечание . Как и подчеркивание (
_
), этот$
символ является допустимым «словесным символом» в идентификаторах JavaScript и не имеет другого значения в языке. Он был добавлен в язык одновременно с поддержкой регулярных выражений , чтобы можно было эмулировать соответствующие Perl- подобные переменные, такие как$`
и$'
.
Функция $ F ()
Основываясь на $()
функции: $F()
функция возвращает значение запрошенного элемента формы. Для ввода «текста» функция вернет данные, содержащиеся в элементе. Для элемента ввода 'select' функция вернет текущее выбранное значение.
$ F ( "id_of_input_element" )
Функция $$ ()
Функция доллар доллар - это механизм выбора CSS от Prototype . Он возвращает все совпадающие элементы, следуя тем же правилам, что и селектор в таблице стилей CSS. Например, если вы хотите получить все элементы с классом «пульсирующий», вы должны использовать следующее:
$$ ( "а.пульсат" )
Это возвращает коллекцию элементов. Если вы используете расширение script.aculo.us основной библиотеки Prototype, вы можете применить эффект «пульсации» (мигание) следующим образом:
$$ ( «а.пульсат» ). каждый ( Эффект . Пульсировать );
Объект Ajax
Чтобы уменьшить количество кода, необходимого для запуска кроссбраузерной XMLHttpRequest
функции, Prototype предоставляет Ajax
объект для абстрагирования различных браузеров. У него есть два основных метода: Ajax.Request()
и Ajax.Updater()
. Есть две формы Ajax
объекта. Ajax.Request
возвращает необработанный вывод XML из вызова AJAX, в то время Ajax.Updater
как возврат будет вставлен в указанный объект DOM. Ниже Ajax.Request
приводится поиск текущих значений двух элементов ввода HTML-формы, выдает HTTP-запрос POST на сервер с этими парами имя / значение элемента и запускает настраиваемую функцию (называемую showResponse
ниже) при получении HTTP-ответа от сервера:
новый Ajax . Запрос ( "http: // localhost / server_script" , { параметры : { значение1 : $ F ( "form_element_id_1" ), значение2 : $ F ( "form_element_id_2" ) }, onSuccess : showResponse , onFailure : showError });
Объектно-ориентированное программирование
Prototype также добавляет поддержку более традиционного объектно-ориентированного программирования. Class.create()
Метод используется для создания нового класса. Затем классу присваивается a, prototype
который действует как образец для экземпляров класса.
var FirstClass = Класс . create ( { // Метод инициализации служит конструктором initialize : function () { this . data = "Hello World" ; } });
Расширение другого класса:
Аякс . Запрос = Класс . create ( Ajax . Base , { // Переопределить метод инициализации initialize : function ( url , options ) { this . transport = Ajax . getTransport (); this . setOptions ( options ); this . request ( url ); }, // ... дополнительные методы добавить ... });
Функция framework Object.extend(dest, src)
принимает два объекта в качестве параметров и копирует свойства второго объекта в первый, моделируя наследование. Комбинированный объект также возвращается в результате функции. Как и в приведенном выше примере, первый параметр обычно создает базовый объект, а второй - анонимный объект, используемый исключительно для определения дополнительных свойств. Объявление всего подкласса происходит в круглых скобках при вызове функции.
Проблемы
В отличие от других библиотек JavaScript, таких как jQuery , Prototype расширяет DOM. Есть планы изменить это в следующей основной версии библиотеки. [3]
В апреле 2010 года блогер Юрий 'kangax' Зайцев (из Prototype Core) подробно описал проблемы, которые могут возникнуть из-за того, что обезьяна исправляет новые методы и свойства в объектах, определенных W3C DOM. [3] Эти идеи перекликаются с мыслями, опубликованными в марте 2010 г. компанией Yahoo! разработчик Николас Закас [4] Они были резюмированы следующим образом [5]
- Проблемы с кроссбраузерностью: объекты хоста не подчиняются правилам, несовместимое поведение IE DOM и т. Д.
- Вероятность коллизии имен
- Накладные расходы на производительность
К 2008 году конкретные проблемы с использованием методов расширения DOM в старых версиях Prototype в сочетании с новыми версиями текущих браузеров уже документировались. [6] Вместо добавления новых методов и свойств к уже существующим «хостовым» объектам DOM, таким как Element
, например element.hide()
, решение этих проблем состоит в том, чтобы предоставить объекты-оболочки вокруг этих хост-объектов и реализовать на них новые методы. jQuery
такой объект-оболочка в библиотеке с таким именем. [3]
Сейчас широко ожидается, что большинство этих идей и проблем будут рассмотрены в выпуске Prototype 2.0, но разработчикам прототипов придется научиться работать с измененным синтаксисом, и большая часть существующего кода Prototype устареет. [5]
Смотрите также
- Ajax (программирование)
- Сравнение фреймворков JavaScript
- script.aculo.us
- JavaScript-фреймворк Mootools
- jQuery
Рекомендации
- ^ «Статистика использования и рыночная доля библиотек JavaScript для веб-сайтов, март 2021 г.» . w3techs.com . Проверено 27 марта 2021 года .
- ^ «Прототип JavaScript Framework | Определение классов и наследования» . prototypejs.org . Дата обращения 5 июня 2020 .
- ^ а б в kangax (5 апреля 2010 г.). «Что не так с расширением DOM» . Проверено 6 апреля 2010 года .
- ^ Закас, Николас К. (2 марта 2010 г.). «Поддерживаемый JavaScript: не изменяйте объекты, которыми вы не владеете» . Проверено 6 апреля 2010 года .
- ^ а б Алмаер, Дион (6 апреля 2010 г.). «Прототип 2.0 не расширяет DOM» . Проверено 6 апреля 2010 года .
- ^ Ресиг, Джон (26 марта 2008 г.). "getElementsByClassName до прототипа 1.6" . Проверено 6 апреля 2010 года .
Библиография
- Орчард, Лесли М .; Пехливанян, Ара; Кун, Скотт; Джонс, Харли (31 августа 2009 г.). Профессиональные фреймворки JavaScript: Prototype, YUI, ExtJS, Dojo и MooTools (1-е изд.). Wrox Press . п. 888. ISBN 978-0-470-38459-6.
Внешние ссылки
- Официальный веб-сайт
- Официальная документация Prototype API
- Примеры прототипов