MooTools 1.3

    image
    image
    So the long-awaited release of MooTools 1.3 came out . I’ll tell you a little about the changes in the framework itself, and in its “environment”. There are quite a few differences between versions 1.2 and 1.3, but first things first.

    The first thing to say is that there is a build of version 1.3, which is 100% compatible with 1.2, you can’t be afraid to update.

    Slick

    And so, about the differences. The tastiest thing in the new version is the new css selector engine Slick. It is completely independent of MooTools, can be used separately. It "izkarobki" supports all conceivable and inconceivable selectors / pseudo-selectors, and if this does not seem enough to you, it's okay, there is always the opportunity to create a new one.
    Examples of use outside of 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
    

    Inside MooTools, selectors are used as usual.

    And now succinctly:
    • Pure-javascript
    • 50% faster than the old
    • Supports any selector you can think of.
    • Flexible, allows you to create your own pseudo-selectors
    • Supports XML Search

    API changes

    Core

    • $ methods are now in the past:
    • $ chk (value) => (value! = null)
    • $ A (item) => Array.from (item)
    • $ splat => Array.from
    • $ clear => will have to use native clearTimeout or clearInterval
    • $ defined => (value! = null)
    • $ each => Array.each / Object.each depending on context
    • $ empty => deleted, use 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 with one change, the string “null” is now returned for empty objects
    • $ unlink => Array.clone / Object.clone
    • $ arguments => deleted
    • $ pick => Array.pick or [a, b, c] .pick ()
    • $ exec => Browser.exec

    And
    • Native is now called Type
    • Array.type / String.type / Number.type / etc. => Type.isArray / Type.isString / Type.isNumber / etc.
    • Hash and $ H moved to MooTools More

    Browser detection

    • Engine detection => user-agent detection.
    • Browser.Engine => deleted
    • 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) or myFn.pass ([arg1, arg2, arg3], this)
    • $ try => Function.attempt
    • myFn.run (args, bind) => myFn.apply (bind, Array.from (args));
    • myFn.create => use .pass, .bind, .delay, .periodical
    • myFn.bindWithEvent => deprecated

    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 => no longer supports the second parameter (this is used for animation, for example element.get ('tween', options) now element.set ('tween', options) .get ('tween'))

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

    New opportunities

    • Type.from (Array.from, String.from, Function.from, etc.) => type conversion
    • Fx => unified timer for all effects

    Environment

    • MooTools Test Runner => now testing takes place automatically not only in every browser, but also on the server
    • Packager => a new tool for collecting MooTools to fit your needs.

    Packager

    Packager was designed for project management. It works as follows: you create the code, at the beginning of each file, create a special comment, where you indicate the name, author, dependencies, etc., also create a configuration file for the package (project), where you indicate the name, description, list of participants in the assembly files, etc., packager works from the terminal:
    $ packager register /path/to/project
    $ packager build ProjectName/* > myproject.js
    

    During assembly, external dependencies are taken into account. By external, I mean dependencies on other projects that are also registered with Packager. The piece is very convenient, I have been using it for my projects for six months now.

    Summary

    Altogether, about a third of the code was rewritten. There are also many changes in MooTools More, for example, support for pseudo-selectors for events has appeared, for example:
    element.addEvent('click:once', function(){}); // после клика обработчик будет автоматически удален
    element.addEvent('click:relay(.some-selector)', function(){}); // а тут у нас делегирование
    element.addEvent('keydown:keys(ctrl+s)', function(){}); // думаю тут все ясно
    

    The next big release is MooTools 2 (now for sure).
    Repositories:
    MooTools Core
    MooTools More
    Slick
    Packager

    Also popular now: