D@nil
Постоялец
- Регистрация
- 1 Окт 2006
- Сообщения
- 340
- Реакции
- 122
- Автор темы
- #1
Итак, уже довольно продолжительный отрезок времени вокруг проекта под названием 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 выглядит следующим образом.
HTML:
var myClass = Class.create();
myClass.prototype = {
initialize: function(){
...
}
};Как видим, не совсем красиво, но многие веб-разработчики готовы мириться с подобным положением вещей ради полноценного ОО. С mootools мы делаем то же самое чуть проще, причем наш код будет полностью совместим с кодом, написанным с помощью Prototype.
HTML:
var myClass = new Class({
initialize: function(){
...
}
});Более того, если нам вдруг понадобится исключить функцию инициализации, то мы просто укажем при вызове класса в качестве аргумента noinit. Выглядеть это будет так.
HTML:
var myClass = new Class({
initialize: function(){
alert('инициализация!');
}
});
var myClass01 = new myClass('noinit');
HTML:
String.extend({
alert: function(){
alert(this);
}
});
HTML:
'hello'.alert();Только в рамках функционала, предназначенного для работы с классами, mootools выглядит удачным выбором, но на этом возможности этой framework не ограничиваются. Изучить их все в одной статье мы не сможем, поэтому посмотрим лишь те возможности, которые представляются наиболее актуальными для современного веб-разработчика.
Работа с элементами
Еще одной важной особенностью описываемого продукта является заложенный в него функционал для работы с элементами веб-страниц. К примеру, с помощью довольно распространенной для JavaScript-библиотек функции $() мы можем не только сразу же находить необходимый нам DOM-элемент, но и добавлять к этому элементы созданные нами опции. Приведу простой пример.
HTML:
$('myElement').addClass('className');
$('myElement').removeClass('className');
HTML:
var el = $('myElement');
el.addClass('className');
el.removeClass('className');
HTML:
$('myElement').addClass('myClass').setStyle('position', 'absolute');Проект JoomlaOS использует mootools
Для того чтобы у нас появилась возможность строить цепочки из собственных методов, необходимо в заключение каждого из них использовать функцию return, причем возвращать мы можем как ссылку на сам объект, так и любую другую информацию вроде строки или массива. Рассмотрим пример.
HTML:
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(); // совмещаем оба методаСпециальные эффекты
Изучение возможностей mootools по части создания и проигрывания различных специальных эффектов в рамках наших веб-страниц начнем с самого примитивного, а в конце рассмотрим эти же вопросы в рамках расширяемости DOM-элементов с помощью описываемого инструмента. Итак, в mootools для работы со специальными эффектами есть два класса: fx.Style и fxStyles.
Используя fx.Style, мы можем контролировать значение одного css-атрибута. Посмотрим пример.
HTML:
var marginChange = new fx.Style('myElement', 'margin-top', {duration:500});
marginChange.custom(10, 100);С mootools мы получаем больше возможностей для ОО JavaScript
Разумеется, при использовании лишь одного css-атрибута мы можем создавать исключительно простейшие специальные эффекты. Для более сложных задач стоит применять класс fx.Styles, с помощью которого мы получаем контроль над несколькими css-атрибутами. Снова небольшой пример.
HTML:
var myEffects = new fx.Styles('myElement', {duration: 1000, transition: fx.linear});
myEffects.custom({'height': [10, 100], 'width': [900, 300]});Еще одно меню на mootools — на этот раз выпадающее
Как и было обещано в начале рассказа о работе со специальными эффектами в mootools, сейчас мы рассмотрим способ использовать библиотеку fx в связке с функционалом для расширения DOM-элементов. Выглядит это следующим образом.
HTML:
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);Итог
Если подводить общий итог, то 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.
(с) hostinfo.ru
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.
Кстати, эта же команда ребят разрабатывает(-ала) аяксовую cms ( 
