Каталог статей
Поиск по базе статей  
Статья на тему Интернет » Интересное в сети » Mootool &nb p;&mda h; еще один чемпион

 

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

 

 

mootools

Итак, уже довольно продолжительный отрезок времени вокруг проекта под названием 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
Выезжающее меню на 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
Проект 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 — на этот раз выпадающее

Как и было обещано в начале рассказа о работе со специальными эффектами в 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
загрузка...

 

 

Наверх


Постоянная ссылка на статью "Mootool &nb p;&mda h; еще один чемпион":


Рассказать другу

Оценка: 4.0 (голосов: 16)

Ваша оценка:

Ваш комментарий

Имя:
Сообщение:
Защитный код: включите графику
 
 



Поиск по базе статей:





Темы статей






Новые статьи

Противовирусные препараты: за и против Добро пожаловать в Армению. Знакомство с Арменией Крыша из сэндвич панелей для индивидуального строительства Возможно ли отменить договор купли-продажи квартиры, если он был уже подписан Как выбрать блеск для губ Чего боятся мужчины Как побороть страх перед неизвестностью Газон на участке своими руками Как правильно стирать шторы Как просто бросить курить

Вместе с этой статьей обычно читают:

Mercedes готовит еще один сюрприз

• Mercedes CSTMercedes представит через два-три года новую модель. На сей раз речь идет о небольшом однообъемнике на базе Mercedees A-класса, которого еще не было в модельном ряду компании. Называться автомобиль будут Mercedes CST.

» Немецкие автомобили - 1875 - читать


Создан еще один «народный автомобиль»

• Citroen C1, Peugeot 107 и Toyota AygoКомпании Peugeot, Citroen и Toyota объявили о создании нового «народного» автомобиля, который будет стоить дешевле 10 тыс. евро. Первое время эта машина будет продаваться исключительно на европейском рынке, однако в будущем ее поставки могут начаться и в другие регионы. О том, что Toyota и концерн PSA (марки Peugeot и Citroen) ведут совместную работу по созданию компактной модели, было известно несколько лет назад.

» Французские автомобили - 2350 - читать


ЕЩЕ ОДИН АВТОМОБИЛЬ БУДУЩЕГО

Австралия - родина самых передовых идей в автомобилестроении. Нет, вы не ослышались - если будущее за энергосберегающими технологиями и высокотехнологичными материалами, то зеленый континент с его электромобилями несомненно задаст тон в автомобилестроении. Автомобиль будущего, вероятно станет результатом революции в промышленности.

» Разное - 7858 - читать


Придуман еще один «убийца автомобилей»

Канадская компания Bombardier, известная в первую очередь, как производитель снегоходов, вездеходов и пр, разработала свой вариант «убийцы автомобилей». Новое транспортное средство под названием Embrio в будущем может заставить людей отказаться от поездок на автомобиле по городу! Новый Bombardier Embrio представляет из себя своего рода мотоцикл с одним колесом, который работает от гибридного водородно-бензиново-электрического двигателя!

» Разное - 2640 - читать


Отцы и дети времён цифрового тысячелетия: ещё один кирпич в стене

Появление Интернета не только соединило в глобалистическом порыве народы и континенты, но и вставило свой маленький кирпичик в извечную стену, разделяющую отцов и детей, а также их учителей. Несколько лет назад автору этих строк случилось учиться в одном зарубежном университете. В сравнении с отечественными заведениями этого толка, тот университет был буквально напичкан разного рода высокотехнологическими средствами облегчения студенческой жизни.

» Интересное в сети - 2567 - читать



Статья на тему Интернет » Интересное в сети » Mootool &nb p;&mda h; еще один чемпион

Все статьи | Разделы | Поиск | Добавить статью | Контакты

© Art.Thelib.Ru, 2006-2024, при копировании материалов, прямая индексируемая ссылка на сайт обязательна.

Энциклопедия Art.Thelib.Ru