Mootool &nb p;&mda h; еще один чемпион

Итак, уже довольно продолжительный отрезок времени вокруг проекта под названием mootools наблюдается ажиотаж, достаточный для того, чтобы, как минимум, обратить внимание на сей инструмент. Все чаще mootools становится предметом различных дискуссий (в основном — на Западе), причем в них частенько участвуют очень влиятельные в сфере веб-разработок люди. И это все при том, что у нас есть такие монстры, как Backbase, Dojo Toolkit и другие.

К слову, в объеме библиотек, которые входят в состав mootools, кроется часть причин того успеха, который сопутствует описываемому проекту. На официальном веб-сайте на эту особенность mootools постоянно обращается внимание: к примеру, логотип продукта содержит следующую фразу: "mootools — an ultra compact javascript framework".

 

 

Иными словами, малый объем кода библиотек использует разработчиков в качестве одного из главнейших преимуществ.

Но так ли это важно для комплексных веб-разработок? Ряд экспертов сходятся во мнении, что все-таки да. Логика понятна: чем больший функционал заложен в меньший объем, тем лучше для результата. Кроме того, небольшой объем библиотеки практически автоматом подразумевает высокий уровень оптимизации кода, из чего вытекает более высокий уровень быстродействия и стабильности framework, а следовательно, и конечного продукта. Иными словами, многие веб-специалисты говорят примерно так о mootools, выделяя скорость, стабильность и компактность описываемых библиотек.

Максимальный вес mootools составляет около 30 килобайтСледующий момент, о котором стоит упомянуть в разговоре о mootools, это его модульность. При использовании данной framework совсем необязательно подключать все библиотеки, ибо разработчик имеет возможность выбирать лишь те модули, которые необходимы ему под какой-то отдельно взятый проект. Отметим, что все скрипты, плагины и addons (то есть вообще все имеющиеся модули) без компрессии «весят» около 30 килобайт. Во время закачки framework с официального сайта мы можем, во-первых, выбрать, какие именно модули нам нужны, а во-вторых, уровень компрессии от высокого до минимального.

Объектно-ориентированный JavaScript

В языке JavaScript многим не нравится отсутствие полноценных и, что не менее важно, удобных способов создавать по-настоящему объектно-ориентированный код. Именно по этой причине сегодня существует несколько проектов, которые устраняют данную проблему (к примеру, Prototype или Base.js). Mootools ко всему прочему пригодится и здесь, ибо функционал для объектно-ориентированного программирования на JavaScript — это, условно говоря, фундамент описываемого проекта.

Сравним подход к решению упомянутой задачи в mootools и в, пожалуй, самой популярной на данный момент JavaScript-библиотеке под названием Prototype. Создание класса в Prototype выглядит следующим образом.

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

Как видим, не совсем красиво, но многие веб-разработчики готовы мириться с подобным положением вещей ради полноценного ОО. С mootools мы делаем то же самое чуть проще, причем наш код будет полностью совместим с кодом, написанным с помощью Prototype.

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

Выезжающее меню на mootools

Более того, если нам вдруг понадобится исключить функцию инициализации, то мы просто укажем при вызове класса в качестве аргумента noinit. Выглядеть это будет так.

var myClass = new Class({
initialize: function(){
alert('инициализация!');
}
});

var myClass01 = new myClass('noinit');

Также с mootools у нас появляется возможность расширять с помощью метода extend функционал встроенных в JavaScript классов (и не только встроенных, вообще любых). Это бывает необходимо довольно часто, особенно если наша разработка имеет достаточно большой масштаб. Приведу простой пример.

String.extend({
alert: function(){
alert(this);
}
});

Затем только что добавленный к классу String метод alert вызывается одной строчкой кода, результатом чего, согласно содержимому метода, будет диалоговое окно со значением строки, к которой был вызван метод. Выглядит это следующим образом.

'hello'.alert();

В mootools очень много возможностей для работы со специальными эффектамиТолько в рамках функционала, предназначенного для работы с классами, mootools выглядит удачным выбором, но на этом возможности этой framework не ограничиваются. Изучить их все в одной статье мы не сможем, поэтому посмотрим лишь те возможности, которые представляются наиболее актуальными для современного веб-разработчика.

Работа с элементами

Еще одной важной особенностью описываемого продукта является заложенный в него функционал для работы с элементами веб-страниц. К примеру, с помощью довольно распространенной для JavaScript-библиотек функции $() мы можем не только сразу же находить необходимый нам DOM-элемент, но и добавлять к этому элементы созданные нами опции. Приведу простой пример.

$('myElement').addClass('className');
$('myElement').removeClass('className');

Причем совсем необязательно для каждой манипуляции вызывать функции $(). Достаточно сделать это лишь один раз.

var el = $('myElement');

el.addClass('className');
el.removeClass('className');

Очень важной особенностью объектно-ориентированного программирования является техника под названием chaining. Она позволяет сделать наш код симпатичнее и здорово помогает, когда речь заходит о больших объемах этого кода. Лучше всего это можно проиллюстрировать характерным примером.

$('myElement').addClass('myClass').setStyle('position', 'absolute');

Если бы мы не использовали chaining, то обозначенный код занимал бы две строчки. Разумеется, выбор между одной и двумя строчками не кажется актуальным, когда мы имеем в виду лишь один отдельно взятый и вырванный из контекста случай, но в полноценном проекте мы имеем, как минимум, сотню подобных и более комплексных ситуаций, и тогда проблема становится острее.

Проект JoomlaOS использует mootools

Для того чтобы у нас появилась возможность строить цепочки из собственных методов, необходимо в заключение каждого из них использовать функцию return, причем возвращать мы можем как ссылку на сам объект, так и любую другую информацию вроде строки или массива. Рассмотрим пример.

Element.extend({
makeRed: function(){
this.style.color = 'red';
return this; // в этом методе мы возвращаем ссылку на объект
},

makeBlack: function(){
this.style.color = 'black';
return "Made black!"; // в этом методе мы возвращаем строку
}
});

// Поскольку в одном из методов мы возвращаем строку, то нам нужно расширить
// функционал класса String

String.extend({
alert: function(){
alert(this);
return this;
}
});

$('element').makeRed() // просто делаем элемент красным

$('element').makeBlack().alert(); // делаем элемент черным и выводим
// диалоговое окно со значением возвращенной
// строки

$('element').makeRed().makeBlack().alert(); // совмещаем оба метода

Также стоит отметить, что подобные возможности для взаимодействия с DOM-элементами сильно пригодятся во время работы со специальными эффектами, но об этом чуть ниже.

Специальные эффекты

Изучение возможностей mootools по части создания и проигрывания различных специальных эффектов в рамках наших веб-страниц начнем с самого примитивного, а в конце рассмотрим эти же вопросы в рамках расширяемости DOM-элементов с помощью описываемого инструмента. Итак, в mootools для работы со специальными эффектами есть два класса: fx.Style и fxStyles.

Используя fx.Style, мы можем контролировать значение одного css-атрибута. Посмотрим пример.

var marginChange = new fx.Style('myElement', 'margin-top', {duration:500});

marginChange.custom(10, 100);

Первая строчка кода в примере создает новый специальный эффект для элемента myElement, в ходе которого будет меняться значение css-атрибута margin-top, а продолжительность для эффекта мы указали 500 миллисекунд. Второй строчкой кода мы запускаем специальный эффект, сообщая ему, что значение margin-top должно измениться с 10 до 100.

С mootools мы получаем больше возможностей для ОО JavaScriptРазумеется, при использовании лишь одного css-атрибута мы можем создавать исключительно простейшие специальные эффекты. Для более сложных задач стоит применять класс fx.Styles, с помощью которого мы получаем контроль над несколькими css-атрибутами. Снова небольшой пример.

var myEffects = new fx.Styles('myElement', {duration: 1000, transition: fx.linear});

myEffects.custom({'height': [10, 100], 'width': [900, 300]});

Здесь все делается аналогично предыдущему примеру, но с вариациями. Во-первых, в первой строчке кода мы ко всему прочему указываем тип transition, который будет использоваться во время проигрывания специального эффекта. Все типы также хранятся в библиотеке fx. Затем во второй строчке кода мы указываем не только значения «от» и «до», но и сами css-атрибуты, которые должны меняться. С одной стороны, подобное разделение на fx.Style и fx.Styles может запутать, но со временем привыкаешь.

Еще одно меню на mootools — на этот раз выпадающее

Как и было обещано в начале рассказа о работе со специальными эффектами в mootools, сейчас мы рассмотрим способ использовать библиотеку fx в связке с функционалом для расширения DOM-элементов. Выглядит это следующим образом.

Element.extend({

effect: function(property, options){
return new fx.Style(this, property, options);
}

});

var myEffect = $('myElement').effect('height', {duration: 1000, transition: fx.linear});

myEffect.custom(10, 100);

Данный пример отличается от предыдущих лишь тем, что создается и вызывается специальный эффект при помощи метода effect, который является расширением к нашему элементу myElement. Стоит отметить, что ссылку на элемент мы даем при помощи cлова this во время вызова new fx.Style. Все остальное — в рамках уже описанного способа работы со специальными эффектами в mootools.

Итог

Если подводить общий итог, то mootools по праву считается продуктом очень высокого качества, а многочисленные положительные отзывы о нем в индустрии веб-разработок кажутся вполне обоснованными. К сожалению, в рамках настоящего материала не хватило места рассказать обо всех возможностях mootools, поэтому лишь перечислю библиотеки, которые входят в состав полной сборки, с краткими комментариями:

• Array.js — отвечает за работу с массивами;
• Element.js — отвечает за работу с DOM-элементами;
• Function.js — отвечает за работу с функциями;
• String.js — отвечает за работу со строками;
• Ajax.js — полноценный функционал для создания и обработки AJAX-запросов;
• Dom.js — функционал для более глубокого взаимодействия с DOM-элементами, а также CSS query;
• Drag.js — автоматизация drag'n'drop-функционала;
• Fx.js — отвечает за работу со специальными эффектами;
• Accordion.js — виджет «Аккордеон»;
• Cookie.js — отвечает за работу с cookies;
• Tips.js — автоматизация функционала, отвечающего за всплывающие подсказки;
• Window.js — отвечает за работу с объектом window.

Как видно из списка, возможностей в mootools заложено огромное количество, что вкупе с модульностью инструмента делает эту framework удачным выбором для многих, даже крупных, проектов.

Ссылки по теме

• mootools

Статья получена: hostinfo.ru

загрузка...