slik Oct 12 2010 at 15:36

MooTools 1.3

4 min

2.6K

Вот и вышел долгожданный релиз MooTools 1.3. Расскажу немного об изменениях в самом фреймворке, и в его «окружении». Между версиями 1.2 и 1.3 довольно много различий, но обо всем по порядку.

Первое что надо сказать, это то, что существует сборка версии 1.3, которая 100% совместима с 1.2, можно не боятся обновляться.

Slick

И так, об отличиях. Самая вкусная вещь в новой версии — это новый css selector engine Slick. Он полностью независим от MooTools, может использоваться отдельно. Он «изкаробки» поддерживает все мыслимые и немыслимые селекторы/псевдо-селекторы, а если вам и этого покажется мало, ничего страшного, всегда есть возможность создать новый.
Примеры использования вне MooTools:

Slick.search(document, "div > p.moo:not(.foo)"); // возвращает набор (массив) элементов, даже если под выборку попал только один, если не было выбрано ни одного элемента, возвращает null. Первым параметром идет контекст поиска, вторым селектор.
Slick.find(document, "div > p.moo:not(.foo)"); // почти то же самое, только теперь возвращается только один, первый попадающий под селектор элемент
Slick.match(node, "p.moo"); // проверяет на соответствие node указанному селектору
Slick.contains(node, node2); // проверяет включен ли node2 в node

Внутри MooTools же селекторы используются как обычно.

А теперь лаконично:

Pure-javascript
Быстрее на 50% чем старый
Поддерживает любой селектор о котором только можно подумать
Гибкий, позволяет создавать свои псевдо-селекторы
Поддерживает поиск по XML

Изменения в API

Ядро

$методы теперь в прошлом:
$chk(value) => (value != null)
$A(item) => Array.from(item)
$splat => Array.from
$clear => придется использовать нативные clearTimeout или clearInterval
$defined => (value != null)
$each => Array.each / Object.each в зависимости от контекста
$empty => удалено, надо использовать function(){}
$extend(source, extended) => Object.append(source, extended)
$merge({}, a, b) => Object.merge({}, a, b)
$mixin(a, b) => Object.merge(a, b)
$lambda => Function.from
$random => Number.random
$time => Date.now
$type => typeOf с одним изменением, для пустых объектов теперь возвращается строка “null”
$unlink => Array.clone / Object.clone
$arguments => удалено
$pick => Array.pick или [a, b, c].pick()
$exec => Browser.exec

А так же

Native теперь именуется Type
Array.type / String.type / Number.type / и т.д. => Type.isArray / Type.isString / Type.isNumber / и т.д.
Hash и $H перенесены в MooTools More

Browser detection

Engine detection => user-agent detection.
Browser.Engine => удалено
Browser.Engine.trident => Browser.ie
Browser.Engine.gecko => Browser.firefox
Browser.Engine.webkit => Browser.safari or Browser.chrome
Browser.Engine.presto => Browser.opera
Browser.Platform.ipod => Browser.Platform.ios

Array

Array.extend => Array.append

Function

myFn.bind(this, [arg1, arg2, arg3]) => myFn.bind(this, arg1, arg2, arg3) или myFn.pass([arg1, arg2, arg3], this)
$try => Function.attempt
myFn.run(args, bind) => myFn.apply(bind, Array.from(args));
myFn.create => используте .pass, .bind, .delay, .periodical
myFn.bindWithEvent => устарело

Element

element.injectInside, .injectBefore, .injectAfter, etc => element.inject(context, where);
element.grabTop,… => element.grab(context, where)
element.hasChild(item) => element.contains(item) &&
item != element
Selectors.Pseudo => Slick.definePseudo(name, fn)
Element.get => больше не поддерживает второго параметра (это используется для анимации, например element.get(‘tween’, options) теперь element.set(‘tween’, options).get(‘tween’))

С помощю Slick создавать новые елементы стало проще:

new Element("input", {"id": "someID", "class": "someClass1", "disabled": true}); // Было
new Element("input#someID.someClass1[disabled=true]"); // Стало

Новые возможности

Type.from (Array.from, String.from, Function.from и т.д.) => преобразование типов
Fx => унифицированный таймер для всех еффектов

Окружение

MooTools Test Runner => теперь тестирование проходит в автоматическом режиме не только в каждом браузере, но и на сервере
Packager => новый инструмент для сбора MooTools под свои нужны.

Packager

Packager был разработан для управления проектами. Работает он следующим образом: вы создаете код, в начале каждого файла создаете специальный комментарий, где указываете название, автора, зависимости и т.д., так же создаете конфигурационный файл пакета (проекта), где указываете название, описание, список участвующих в сборке файлов и т.д., packager работает из терминала:

$ packager register /path/to/project
$ packager build ProjectName/* > myproject.js

При сборке учитываются внешние зависимости. Под внешними я имею ввиду зависимости от других проектов, которые так же зарегистрированы в Packager. Штука очень удобная, использую для своих проектов уже полгода.

Резюме

В целом было переписано около трети кода. Так же много изменений в MooTools More, например появилась поддержка псевдо-селекторов для событий, например:

element.addEvent('click:once', function(){}); // после клика обработчик будет автоматически удален
element.addEvent('click:relay(.some-selector)', function(){}); // а тут у нас делегирование
element.addEvent('keydown:keys(ctrl+s)', function(){}); // думаю тут все ясно

Следующий большой релиз — MooTools 2 (теперь уже точно).
Репозитории:
MooTools Core
MooTools More
Slick
Packager

Tags:

mootools

Hubs:

MooTools