MooTools 1.2 что нового ?
Все знают framework mootools, отличающийся особым качеством и минимализмом, в моем личном рейтинге, он стоит на третьем месте. И вообще им пользуются такие проекты как: w3c, cnet, joomla, ubuntu и др.
Оф сайт http://mootools.net/ Что же новенького в вышедшей 1.2 beta 1 версии ?
1. Хэши
В прошлых версиях в ядро был интергрирован плагин Hash Class. Это новые возможности для JavaScript разработчиков.. Нафига он нужен и чем они лучше стандартной объектной модели JS ? Взглянем на синтаксис:
var hash = new Hash({ 'a': 'one', 'b': 'two', 'c': 'three', 'd': 'four'}); hash.get('a'); //"one" hash.set('e', 'five'); //hash.e теперь 'five' hash.set('c', 'new value'); //hash.c теперь 'new value' hash.f = 'another value here'; //аналогично hash.has('b') //true hash.each(function(value, key){ alert(key + ':' + value); }); //alerts a:one, b:two, и т.п.. hash.get('each'); //null
Достоинство хэшей Mootools в том что к ним можно применять map, every, some и filter методы. Ну типа, как только вы попробуете, вас будет уже не оттащщить за уши. Кстати древний Abstract - ушел танцевать, для знатоков. Переход с Abstract на Hash - очень прост, заменить слова и все.
Без разницы к чему вы применяете новые методы, к Hash или к стандартным объектам. Гляньте-ка
var obj = { 'a': 'one', 'b': 'two', 'c': 'three', 'd': 'four'}; Hash.each(obj, function(value, key){ alert(key + ':' + value); }); //покажет a:one, b:two, и т.п.. Hash.filter(obj, function(value, key){ return key.test(/a|c/); }); //вернет хэш с { 'a': 'one', 'c': 'three' } Hash.getKeys(obj); //вернет
2. Эффекты. Еще круче..
Не поверите, но jquery и Prototype танцуют. Mootools - всегда радовал качественными эффектами. И опять в новой версии были изменены имена,а старые ПОКА поддержаны. Если раньше аффтор пес*ел, что Fx.Morph и Fx.Styles одно и то же, то теперь скрывать нету смысла, вень новые возможности теперь налицо. Дело в том что авторы научились очень просто парсить CSS и теперь описывая эффекты можно применять синтаксис CSS, это очень юзабильно.. Пример в студию:
var myMorph = new Fx.Morph('myElement', { 'duration': 1000 }); // myElement переходит в text color: red, ширину в 200px, и line-height в 20px myMorph.start({ 'color': '#c03', 'width': 200, 'line-height': 20 }); //вот где танцуют другие: myElement переходит к свойствам определенным в .warning правилах определенных в моем CSS myMorph.start('.warning'); // еще один забавный морф с примерением крутого парсера Mootools myMorph.start('#content p.information');
Забавно то что на автомате могут переходить все параметры, ширина, высота, цвета, это удивительно ! А для таких параметров которые не могут изменяться последовательно, параметры меняются мгновенно перед началом трансформации. Вообщем надо видеть.
Глянем еще на примеры с фосайта: myMorph.start({ 'background-position': '400px 20px' }); myMorph.start({ 'background-position': '400 20' }); myMorph.start({ 'clip': ] }); myMorph.start({ 'border-width': '4px 10px 16px' }); myMorph.start({ 'border': '5px solid #f03', 'border-bottom-color': '#ccc', 'background-color': '#fee', 'color': '#f03', 'width': 200, 'height': '300px', margin:, 'opacity': 0.6 });
и другое.. Есть еще кое что, но надеюсь рассказать об этом в другой раз