Prototype (фреймворк)

Prototype — JavaScript фреймворк, який спрощує роботу з Ajax і деякими іншими функціями. Незважаючи на його доступність у вигляді окремої бібліотеки, він зазвичай використовується програмістами поряд з Ruby on Rails, і .

Prototype

Тип	JavaScript фреймворк
Розробник	Prototype Core Team
Стабільний випуск	1.7.3 (24 вересня 2015; 8 років тому (2015-09-24))
Версії	1.7.3 (23 вересня 2015)^[1]
Мова програмування	JavaScript
Ліцензія	MIT License
Репозиторій	https://github.com/prototypejs/prototype/tree/master
Вебсайт	prototypejs.org

Цей фреймворк підтримується такими браузерами: Internet Explorer (Windows) 6.0 +, Mozilla Firefox 1.5 +, Apple Safari 2.0.4 +, Google Chrome 1.0 + і Opera 9.25 +. Підтримка даних браузерів також означає, що фреймворк підтримується Camino, Konqueror, (IceWeasel), Netscape 7+, SeaMonkey, та іншими, які належать цим же сімействам.

Можливості

У Prototype присутні різні способи спрощення створення JavaScript застосунків - від скороченого виклику деяких функцій мови до складних методів звернення до XMLHttpRequest.

Також Prototype підтримує класи та об'єкти, засновані на класах.

Приклади функціоналу

Функція $()

Долар-функція $() дає доступ до DOM-елементу HTML сторінки за його ID.

Використовується як замінник document.getElementbyId із таким синтаксисом:

document.getElementById('<id_of_element>').

Долар-функція зменшує код до такого:

$('<id_of_element>')

Але на відміну від функції DOM, функції $() можна передавати більше одного аргументу й функція поверне масив об'єктів з усіма відповідними елементами:

const ar = new Array('id_1', 'id_2', 'id_3'); for (let 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 та повертає масив з елементів DOM, що відповідають цьому селектору.

Наприклад, при виконанні цього скрипту:

const f = $$('div#block .inp'); 

отримаємо масив, який містить усі елементи з класу inp, які перебувають у контейнері div з ідентифікатором id="block".

У версії 1.5.0 реалізація функції $$() в prototype.js не дуже ефективна. Якщо ви плануєте використовувати дану функцію часто в роботі з об'ємними й складними html-документами, можете розглянути інші вільні реалізації й просто замінити саму функцію.

Функція $F()

Долар-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  }); 

Об'єктно-орієнтоване програмування

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); 

1. Release 1.7.3 — 2015.