Огляд бібліотек Mootols, JQuery, Prototype

Mootols

MooTools — це вільне ПЗ JavaScript фреймворк для розробки кросбраузерних веб-програм та веб-сервісів.

MooTools є модульним, об'єктно-орієнтованим фреймворком, створеним для допомоги досвідченим розробникам JavaScript. Він дозволяє писати потужний, гнучкий і кросбраузерний код завдяки елегантному, добре документованому та послідовному API.

MooTools сумісний і протестований з браузерами: Safari 2+, Internet Explorer 6+, Firefox 2+ (та іншими, основаними на рушії Gecko), Opera 9+.

Деякі сайти та веб-застосунки, що використовують MooTools

   TCH.ua
   w3c
   ubuntu
   chrysler
   jeep
   joomla
   vimeo

JQuery

jQuery — популярна JavaScript-бібліотека з відкритим сирцевим кодом. Вона була представлена у січні 2006 року у BarCamp NYC Джоном Ресіґом (John Resig). Згідно з дослідженнями організації W3Techs, JQuery використовується понад половиною від мільйона найвідвідуваніших сайтів.[2] jQuery є найпопулярнішою бібліотекою JavaScript, яка посилено використовується на сьогоднішній день.[3]

jQuery є вільним програмним забезпеченням під ліцензією MIT (до вересня 2012 було подвійне ліцензування під MIT та GNU General Public License другої версії)[1].

Синтаксис jQuery розроблений, щоб зробити орієнтування у навігації зручнішим завдяки вибору елементів DOM, створенню анімації, обробки подій, і розробки AJAX-застосунків. jQuery також надає можливості для розробників, для створення плагінів у верхній частині бібліотеки JavaScript. Використовуючи ці об'єкти, розробники можуть створювати абстракції для низькорівневої взаємодії та створювати анімацію для ефектів високого рівня. Це сприяє створенню потужних і динамічних веб-сторінок.

Специфіка

Основне завдання jQuery — це надавати розробнику легкий та гнучкий інструментарій кросбраузерної адресації DOM об'єктів за допомогою CSS та XPath селекторів. Також даний фреймворк надає інтерфейси для Ajax-застосунків, обробників подій і простої анімації.

Принцип роботи jQuery полягає в використанні класу (функції), який при звертанні до нього повертає сам себе. Таким чином, це дозволяє будувати послідовний ланцюг методів.

Як підключити jQuery

Бібліотека jQuery є JavaScript файлом, яка включає всю його DOM, події(events), ефекти(effects), і Ajax функції. Вона може бути додана до web-сторінки посиланням на локальну копію, або на одну з копій доступних на публічному сервері (наприклад Google або Microsoft CDN).

<script type="text/javascript" src="jquery.js"></script>

Prototype

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

Цей фреймворк підтримується такими браузерами: 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
 });