Произошла ошибка.
Пожалуйста, обновите страницу.
Fly.js > Документация > Самые забавные фишки Fly.js 
                    FlyDomNode: {
                        __constructor: function(context) {
                            var array = fnNodeList.makeDomNodeArray(context);
                            for (var a = 0, al = array.length; a < al; a++) {
                                this[a] = array[a];
                            }
                            this.length = al;
                        },

                        size: function() {
                            return this.length;
                        },

                        get: function(index) {
                            return $.isNumber(index) ? this[index] : [].slice.call(this);
                        },

                        addNode: function(flyNode) {
                            return fnNodeList.changeNodeContext(this, flyNode, function(child, context) {
                                context.indexOf(child) === -1 && context.push(child);
                            });
                        },

                        removeNode: function(flyNode) {
                            return fnNodeList.changeNodeContext(this, flyNode, function(child, context) {
                                var position = context.indexOf(child);
                                if (position !== -1) context.splice(position, 1);
                            });
                        },

                        eq: function(index) {
                            if (index < 0) index = index + this.length;
                            return new this.__self(this[index]);
                        },

                        lt: function(index) {
                            return new this.__self(this.slice(0, index));
                        },

                        gt: function(index) {
                            return new this.__self(this.slice(index));
                        },

                        last: function(selector) {
                            var element = this[this.length - 1];
                            return new this.__self(fnStyle.isMatch(element, selector) ? element : []);
                        },

                        first: function(selector) {
                            var element = this[0];
                            return new this.__self(fnStyle.isMatch(element, selector) ? element : []);
                        },

                        normalize: function() {
                            return fnNodeList.transformNodeContext(this, function(item, context) {
                                if ($.isNode(item)) context.push(item);
                            });
                        },

                        each: function(callback, context) {
                            $.each(this, callback, context);
                            return this;
                        },

                        name: function() {
                            return this[0].tagName.toLowerCase() || null;
                        }
                    }

Самые забавные фишки Fly.js

В этой статье описаны только самые классные штуки Fly.js, всё остальное можно найти в документации. С одной стороны материал, описанный ниже, можно отнести к мелочам, а с другой - из чего состоит вся библиотека, если не из мелочей?

Пресеты

Вместо того, чтобы делать обёртки $.get() и $.post() над $.ajax(), вводить переменные slow и fast для $(...).animate(), я реализовал механизм пресетов для таких методов как $.ajax(), $(...).animate() и $(...).stylize().

Теперь вы можете сохранять настройки в объекты и хранить их внутри Fly.js. Но самое классное - не хранение, а совместное использование пресетов. Давайте посмотрим, как это происходит на практике.

// Для начала нужно создать пресеты, которые будут использоваться.
$
 .set('stylize', 'redText', {color: 'red'})
 .set('stylize', 'blueBorder', {borderColor: 'blue'})
 .set('animate', 'fast', {duration: 200})
 .set('animate', 'alert', {complete: function() {alert(123)}});

// А теперь можно их использовать в любом месте вашего кода.
$('div').animate(['redText', 'blueBorder'], ['fast', 'alert']);

Точно так же можно определить пресеты get, post и другие для метода $.ajax().

Анимация и стили

Fly.js поддерживает из коробки сразу две реализации для анимаций: CSS Transitions и JavaScript. Поскольку я отказался от поддержки IE 9 во время разработки, по умолчанию всегда выбран механизм CSS, но вы можете самостоятельно выбирать между ними с помощью опции method.

Если по каким-то причинам CSS анимация не сработала, то она прервётся с ошибкой через промежуток времени 1.25 * duration. Кроме того, вы можете задавать опцию step для обоих типов анимации, однако количество шагов может не совпадать.

Анимировать во Fly.js можно почти всё. Например, запись {margin: '10px 20px'} будет интерпретирована как {marginTop: '10px', marginBottom: '10px', marginLeft: '20px', marginRight: '20px'}. Так же можно поступать с padding, borderWidth, borderRadius, backgroundPosition и backgroundSize. Однако такой трюк не прокатит с background или border.

По умолчанию все размеры измеряются в пикселах, а все углы - в градусах. Но вы можете указывать любые доступные в CSS единицы измерения. Что касается цвета, то он может быть представлен в следующих форматах:

Отличная новость для любителей CSS Transforms: вы можете работать с ними через методы $(...).css(), $(...).stylize() и $(...).animate(), используя свойства translate, x или translateX, y или translateY, rotate, rotateX, rotateZ, skew, skewX, skewY, scale, scaleX, scaleY. Вообще-то можно использовать ещё и perspective, но она должна быть выставлена до применения всех остальных трансформаций.

Есть и ещё одна хорошая новость: теперь тени тоже можно анимировать. Отличный пример можно найти в документации к методу $(...).animate().

Со временем вы заметите, что иногда вы хотите анимировать только вертикальные отступы, а горизонтальные оставить в текущем состоянии. Для этого есть ключевое слово current. Например, вы можете набрать {margin: '30px current'}, чтобы добиться нужного результата. В случае с тенями это будет выглядеть так:

// Добавляем красную тень.
$('div').animate({boxShadow: '10px 10px 5px red'});
// Добавляем синюю тень.
$('div').animate({boxShadow: 'current, -10px -10px 5px blue'});
// Убираем красную тень.
$('div').animate({boxShadow: 'none, current'});

То есть вам не обязательно знать, какие именно тени присутствуют у каждого элемента. Достаточно помнить их порядок.

Другой фишкой стилизации Fly.js является возможность рассчитать новое значение с помощью действий += и -=. Такая возможность есть и в других библиотеках, но Fly.js среди прочего позволяет складывать и вычитать цвета и тени. Зачем нужно такое поведение, можно увидеть на примере:

// Задаём цвет текста.
$('p').css('color', '#f00');
// Делаем его полупрозрачным.
$('p').animate({color: '-=#0008'});
// Добавляем тени.
$('p')
    .css({boxShadow: '+=10px 10px red'})
    .animate({boxShadow: '+=-10px -10px 5px blue'});
// Убираем первую тень.
$('p').animate({boxShadow: '-=10px 10px #f00'});

Я надеюсь, что такой пример не встретится в реальном коде, однако, посмотрев на него, можно понять принцип работы операторов -= и +=. Стоит отметить, что тени нельзя изменять частями (например, только размытие или только цвет).

AJAX

В библиотеке Fly.js есть очень мощный метод $.ajax() для работы с AJAX-запросами. Однако исчерпывающая информация по нему дана в документации, поэтому здесь вы найдёте лишь ссылку.

Хранилище DOM

Если вам нужно сохранить часть DOM дерева в переменную, отличным инструментом послужит DOM хранилище библиотеки Fly.js. Чтобы сохранить узлы в хранилище, следует воспользоваться методами $(...).save(), $(...).copy() и $(...).cut(). В будущем вы можете извлечь их оттуда с помощью метода $.paste() или просто очистить соответствующую ячейку, используя $.delete().

Казалось бы, можно использовать с тем же успехом собственные переменные, но гораздо удобнее, когда для этого есть встроенный механизм.

Измерения

Используя методы $(...).position() и $(...).offset() вы узнаете координаты не только левой и вехней границ, но также правой и нижней. Это очень удобно, потому что пропадает необходимость прибавлять размеры элемента самостоятельно.

Также подробную информацию предоставляют методы $(...).scroll(), $(...).scrollX() и $(...).scrollY(). Вы сможете узнать не только позицию полосы прокрутки (left или top), но и её размеры (width или height).

Контекст

Многие методы, которые работают с функциями, принимают последним аргументом контекст исполнения. Это очень удобно, и позволяет избавиться от многочисленных вызовов $.proxy(). Вот полный список функций, работающих с контекстом: $.ready(), $.breakFlow(), $.memoize(), $.countBy(), $.groupBy(), $.indexBy(), $.sortBy(), $.each(), $.map(), $.grep(), $.ajax(), $(...).each(), $(...).map(), $(...).grep(), $(...).on(), $(...).off(), $(...).once().

Общий родитель, общая обёртка

Метод $(...).closest(), вызванный без аргументов, найдёт общего родителя для всех узлов в текущей FlyNode. Это бывает очень удобно при работе с DOM.

Другой метод, $(...).wrapAll(), обернёт все узлы текущей FlyNode в заданную обёртку.

Cookie и selection

Теперь вы можете работать с cookies при помощи метода $.cookie(). Он умеет получать текущее значение, устанавливать и удалять cookie. Это должно порадовать программистов, которые сталкивались с использованием document.cookie.

Помимо cookies Fly.js предоставляет возможность получить содержимое выделенного фрагмента. Например, чтобы получить текст из текущего выделения, надо вставить в код строку $.selection(true). Можно и наоборот, задавать выделение всё тем же методом. Достаточно вызвать его, передав в аргументы DOM узлы, которые требуется выделить.