верстка, дизайн, програмування під веб, юзабіліті

В цій статті я коротко постараюсь розповісти про MooTools, опанувавши який, можна значно прискорити процес написання скриптів і, як наслідок, скоротити час реалізації Web-проектів. Для подальшого, більш глибокого, вивчення цього фреймворку внизу статті ви зможете знайти невеличку збірку Web-ресурсів по темі.

Я почав вивчення MooTools з метою створення сучасних та якісних анімаційні ефектів на сторінках своїх сайтів. Моє знайомство з MooTools сталося зовсім недавно, тому мене можна сміло вважати початківцем. І, як наслідок, не варто наразі чекати від мене фахових відповідей на складні питаннях, які вас турбують.

Слід зауважити, що в даній статті свідомо не піднімається питання, який JavaScript-фрейморк - кращий для роботи. Я, по-перше, не маю достатніх знань, щоб про це розповідати, а, по-друге, зовсім не маю на меті нав’язувати вам той, чи інший, продукт. MooTools не є і не може бути панацеєю від усіх ваших бід, оскільки для кожного окремого проекту оптимальними можуть бути різні інструменти (той же Prototype, jQuery, тощо).

Фреймворк (від англ. framework) — проста концептуальна структура, яку використовують для вирішення складних, проблемних задач. Іншими словами — це набір інструментів, бібліотек і домовленостей призначений для винесення рутинних одноманітних завдань в окремі модулі, які можна використовувати повторно. Головна мета використання фреймворку - дозволити програмістові зосередитися на завданнях унікальних для поточного проекту, замість того, щоб постійно «винаходити колесо».

Що таке MooTools?

MooTools — це компактний, модульний, об’єктно-орієнтований JavaScript-фреймворк, який дозволяє додати на Web-сторінку ефекти і анімацію. MooTools, як і всі сучасні JavaScript-бібліотеки, має засоби для того, щоб виконувати пошук елемента на сторінці, вказавши його характеристики: id, клас css, ім’я тегу чи їх комбінацію.

Задача будь-якого JavaScript-framework’а:

• Забезпечити кросбраузерність створених програм (скриптів);
• Надати набір класів і функцій для реалізації програм (функції для роботи з об’єктами і подіями; функції для реалізації Ajax, функцій для JavaScript-анімації).

Головна перевага використання готових бібліотек в тому, що вони вже протестовані під різними браузерами і ви не витрачаєте час на тестування, а зосереджуєтеся на виконанні поставленої перед вами задачі.

Під кросбраузерністю (від англ. «cross-browser») MooTools слід розуміти однакову роботу коду і відсутність будь-яких помилок в Safari 2+, Internet Explorer 6+, Firefox 2+, Opera 9+.

Давайте для початку підключимо MooTools:

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

Слід зазначити, що демонстраційні матеріали на офіційному сайті проекту дозволяють навіть недосвідченим програмістам відносно легко «прикрутити» певний ефект з фреймворку на власний сайт. Для цього потрібно лише виконувати вказівки розробників, щоправда, англійською мовою.

Переглянути анімаційні ефекти фреймворку одразу в браузері можна на офіційному сайті, а точніше на сторінці — http://demos.mootools.net/.

Серед основних переваг MooTools над аналогами спеціалісти виділяють малий об’єм коду. Логіка тут така: чим більший функціонал заложений в менший об’єм, тим краще.

На момент написання статті вже існує версія 1.2, яка займає: 90 Кб (нестиснута версія - Uncompressed), 70 Кб (JSMin), 60 Кб (YUI Compressor).

Великим плюсом framework’а MooTools є його модульність, яка дає змогу розробнику вибирати лише ті модулі, які йому необхідні для поточної роботи і тим самим мінімізувати розмір коду.

На сторінці http://mootools.net/more ви при необхідності можете вибрати, які компоненти слід включити в JavaScript-файл.

MooTools випускається під відкритою вихідною ліцензією MIT (Open Source MIT license), яка дає вам можливість використовувати цей фреймворк і змінювати код не порушуючи авторське право.

Тепер давайте трошки розглянемо можливості MooTools.

Отримання посилання на елементи DOM

Для того, щоб працювати з елементами на сторінці, потрібно отримати на них посилання. Для цього в Mootools існують дві основні функції - $() і $$(), за допомогою яких можна отримувати елементи по id, класу, тегу або css селектору.

DOM (Document Object Model - об’єктна модель документа) — стандартний спосіб представлення Web-сторінок за допомогою набору об’єктів, що визначає набір інтерфейсів, незалежних від платформи і мови, який дозволяє програмам і сценаріям динамічно змінювати структуру, вміст і стиль документів.

Функція $() аналогічна document.getElementById().

Наприклад,

// отримання елемента з id = myElement
var myElem = $('myElement');

$$() - посилання на декілька об’єктів одразу. В якості аргументу використовують css селектор чи селектори.

// отримання всіх малюнків (тег <img>)
var myElems = $$(’img’);

Якщо вам потрібно вибрати деякі елементи усередині іншого елементу, то можна скористатись функцією $E() або $ES(), які можуть приймати другий аргумент - фільтр. Різниця між ними лише в тому, що $E() повертає один елемент, а $ES() - всі, відповідні селектору усередині вказаного елементу:

// наступний код повертає перше посилання
// всередині елемента DOM з id = 'myElement'
$E('a', 'myElement');
// отримання всіх посилань всередині елемента DOM з id = 'myElement'
$ES('a', 'myElement');

Створення і додавання елемента в DOM

Нові елементи створюються за допомогою класу Element:

var myImage = new Element ( 'img' , {
'src' : 'picture.jpg', 'alt': 'Моя світлина'
});

Окрім іншого, в другий аргумент можна передавати спеціальні атрибути styles і events, для установки стилів і обробників подій для створюваного елементу.

Тепер, щоб додати створений елемент в документ, можна скористатися одній з наступних функцій:

• injectBefore(element);
• injectAfter(element);
• injectInside(element);
• injectTop(element).

Приклад.

// створений елемент додамо перед елементом з id = 'search':
myImage.injectBefore($('search'));

Додавання «слухачів»

У Mootools обробники подій («listeners») додаються до елементів за допомогою функції addEvent(). Синтаксис:

element.addEvent (event, function);

Тип події треба вказувати без приставки ‘on’, тобто ‘click’, а не ‘onclick’.

Функціонал MooTools згодиться, що не маловажно, для об’єктно-орієнтованого програмування на JavaScript. Наприклад, створимо клас:

var myClass = new Class({
initialize: function(){
...
}
});

В MooTools є можливість розширяти за допомогою методу extend функціонал JavaScript-класів. Приклад:

String.extend({
alert: function(){
alert(this);
}
});
'Hello, Ukraine!'.alert();


Результат: діалогове вікно зі значенням рядка, тобто «Hello, Ukraine!».

Можливостей в MooTools ще чимало, але, гадаю, для початку цього буде достатньо. Для детальнішого ознайомлення з фреймворком можете скористатись джерелами зазначеними внизу даної публікації. Найкраще, як на мене, для професійного вивчення завітати одразу на офіційну сторінку з документацією по MooTools, що знаходиться за адресою http://docs.mootools.net/.

Джерела

• http://mootools.net/ — офіційний сайт MooTools.
• http://mootools.org.ua/ —  MooTools українською.
• MooTools для початківців — робота з елементами і подіями.
• http://hostinfo.ru/articles/internet/software/952/ — MooTools - ще один чемпіон.
• http://ajaxed.ru/prototype-mootools-ili-jquery/ — Prototype, MooTools чи jQuery?
• http://denvor.ru/art/js/mootools.htm — Вступ в бібліотеку MooTools.

Популярність: 38%