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

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

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

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

Можливості

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

Функція $()

Для звертання до DOM елементу HTML сторінки звичайно використовується функція document.getelementbyid: document.getElementById(«id_of_element») Функція $()зменшує код до: $(«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-сумісних метасимволів, таких як

і
.

Функція $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.
This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.