Fly.js - Быстрый старт с Fly.js

Подходит ли вам 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?

Прежде всего хочется заметить, что в этой статье речь идёт о версии библиотеки 0.1. Это самая-самая первая версия, поэтому перед тем как использовать Fly.js в своём проекте, нужно ответить себе на несколько очень важных вопросов.

Нужна ли вам библиотека без поддержки IE 9-?
Нужна ли вам библиотека без сообщества и тонны учебного материала?
Нужна ли вам библиотека без плагинов, которые можно быстро подключить?
Нужна ли вам библиотека, которая не тестировалась на реальных проектах?
Нужна ли вам библиотека, у которой следующая версия может быть несовместима с предыдущей?

Короче говоря, на данном этапе Fly.js находится в состоянии unstable. Если вы любитель ковыряться в исходниках и писать код своего проекта с нуля, то даже Fly.js 0.1 может удовлетворить ваши потрености. В противном случае я бы подождал выхода следующей версии, которая наверняка будет стабильнее, быстрее и удобнее (в общем лучше, чем прошлая).

Я js-гик и хочу использовать Fly.js

Если вас всё-таки не отпугнуло вступление, то можно смело начать изучение Fly.js. Вообще-то во многих местах библиотека очень похожа на свои аналоги, такие как jQuery, Underscore и другие... Поэтому переход на Fly.js не должен принести много страданий в жизнь программистов.

Как всегда, прежде чем начать работу с Fly, нужно её подключить. Сделать это можно, написав сверху страницы в тэге head следующую строку:

<script src="/path/to/fly.js"></script>

Хочется верить, что всем понятна строка /path/to/fly.js. Я также надеюсь, что вы используете HTML5 и соответствующий <!DOCTYPE html>. Если нет, то нужно к тэгу script добавить атрибут type в значении text/javascript.

Отлично! Теперь можно обращаться к Fly с помощью глобальной переменной $. Если вы уже успели что-то записать в неё, то ваша информация обязательно пропадёт. Знайте об этом!

Чтобы работать с DOM деревом, нужно подождать, пока оно будет создано. На момент подключения скрипта в тэге head этого не произойдёт, поэтому потребуется обернуть весь код в функцию и вызывать её после загрузки всей страницы. Это можно сделать с помощью метода $.ready(). Где-то такое уже было...

Варианты использования

Вы можете использовать как саму функцию-объект $, так и FlyNode - коллекцию DOM узлов, с которой можно делать много интересных вещей. В документации методы объекта Fly (то есть $) имеют вид $.methodName(), а методы FlyNode $(...).methodName().

Всегда внимательно смотрите, что возвращает вызываемый метод, потому что во многих случаях можно красиво использовать chain-вызовы (то есть, как подсказывает Кэп, выстраивать из вызовов цепочки).

Чтобы получить FlyNode, нужно воспользоваться функцией $. Вы можете передавать в неё всё, что относится к DOM узлам: коллекции или массивы узлов, одиночные узлы, селекторы CSS для поиска узлов и даже HTML код, который нужно преобразовать в узлы. Скормив нужные данные в функцию $(something) вы получите экземпляер FlyNode, который по своей сути является массивом с дополнительными методами.

Чтобы получить обычный массив из FlyNode или выдернуть узел под определённым номером, следует воспользоваться методом $(...).get() или просто обратиться к элементу массива $(...)[N]. Но это редко требуется, ведь гораздо удобнее работать с FlyNode. В случае надобности её можно расширить с помощью $(...).addNode() или же наоборот, убрать лишние элементы, используя $(...).removeNode().

Тонкости работы

Теперь вы умеете получать экземпляры FlyNode и можете вызывать функции объекта $. Чтобы хорошо овладеть Fly.js, вам осталось прочитать документацию и писать много кода с использованием библиотеки. Вроде бы всё просто: вызываются разные методы и получается рабочее приложение, но есть кое-какие нюансы, о которых я сейчас вкратце расскажу (чтобы узнать больше - нужно читать документацию к конкретным методам).

1. Fly.js !== jQuery (на счёт != ничего не могу сказать)

Вам будет казаться, что я скопировал jQuery, но я писал код Fly.js самостоятельно и придумывал синтаксис для методов без участия Джона Резига, поэтому если функции имеют одинаковое название, это вовсе не означает, что они будут выполнять одни и те же действия, принимая одни и те же аргументы. Не надо смотреть в документацию jQuery, когда работаете с Fly.js: это другая библиотека с блэкджеком и пресетами.

2. С блэкджеком и чем?

Пресеты - это объекты-заготовки для использования в таких методах как $(...).ajax(), $(...).stylize() и $(...).animate(). Грубо говоря, вы можете все настройки записать в объект, сохранить его, а потом вместо кучи этих настроек передавать название переменной с объектом. На мой взгляд это очень забавная штука.

Чтобы больше узнать о пресетах, следует изучить методы $.set() и $.unset().

3. Любимый метод `$(...).animate()`

Все любят классные анимации в jQразных библиотеках, они есть и в этой. Fly.js имеет сразу два встроенных механизма для создания анимации: с помощью JavaScript и с помощью CSS Transitions. По умолчанию всё будет двигаться через CSS, но в редких случаях (когда CSS глючит, баг в библиотеке либо слишком много элементов анимировано, и срабатывает ограничение браузера) можно пользоваться альтернативой как в старом добром ~~jQue~~JavaScript. Подробнее об этом читайте в документации.

А ещё вы можете анимировать такие свойства как margin, padding, background-size, skew, scale и другие подобные (то есть состоящие из нескольких величин). Однако не путайте их с background или border, которые состоят из нескольких элементарных свойств.

Ещё мне всегда не нравилось, что нет возможности без подключения плагинов анимировать тени. Я это исправил, и теперь вы можете делать анимации для text-shadow и box-shadow.

4. AJAX запросы

Если честно, то в методе $.ajax() нет ничего особенного. Он попал в этот список только для того, чтобы вы знали о его наличии. Так вот знайте: в коде Fly.js есть метод для работы с AJAX.

5. События

Очень хотелось бы донести информацию о том, как в библиотеке устроена событийная модель, потому что это важно для написания хорошего кода. Вы можете добавлять через $(...).on(), удалять через $(...).off() и имитировать с помощью $(...).emit() события, происходящие в DOM. Постарайтесь не использовать стандартные методы. Помните, что обработчики, добавленные с помощью addEventListener, можно убрать только с помощью removeEventListener, потому что Fly.js делегирует абсолютно все события объектам document и window.

Это значит, что когда вы назначаете много обработчиков на клик, они всего лишь записываются в хранилище Fly.js. На самом же деле создаётся только один единственный обработчик, который вешается на document и решает, какие функции из хранилища библиотеки вызывать после клика.

Такая сложная система сделана для увеличения производительности, но она имеет и кое-какие изъяны. Представьте ситуацию: вы навешали множество обработчиков на какой-то DOM узел, а потом удаляете его. Fly.js не может отследить изменения в DOM, поэтому все назначенные обработчики остаются в хранилище и кушают память до обновления страницы. Это плохо, особенно если вы используете AJAX-навигацию. Поэтому очень важно пользоваться любыми встроенными методами для удаления узлов: $(...).remove(), $(...).empty(), $(...).html() или $(...).replaceWith(). Все эти методы во время работы с DOM почистят хранилище от лишних обработчиков событий.

Если всё-таки требуется что-то удалить в обход Fly.js, то следует вызвать перед этим метод $(...).off() без аргументов, который очистит хранилище от обработчиков текущих узлов.

6. События (ещё раз)

Ещё кое-что интересное нужно сказать про события.

Во-первых, мне всегда было грустно писать $(...).on('click', $.proxy(handler, context)), поэтому во Fly.js нужно писать $(...).on('click', handler, context). Подробнее об аргументах метода $(...).on() читайте в документации.

Во-вторых, Fly.js не использует обёртки над объектами событий, но использует делегирование. Это значит, что в полях event.target и event.currentTarget будут записаны совсем не те узлы, которые хотелось бы увидеть. Можно было бы перезаписать эти свойства, но это невозможно (браузер не позволяет). Так что появились новые поля event.flyTarget (узел, который вызвал обработчик) и event.delegateTarget (узел, на который программист повесил обработчик). Так что вместо $(event.target) нужно использовать $(event.flyTarget). Ну а те, кто пользовался $(this) вообще не заметят особой разницы.

В-третьих, есть события mouseenter и mouseleave. Они такие же, как и в других библиотеках. По крайней мере я на это надеюсь.

7. Коллекции

Не поленитесь посмотреть соответствующий раздел документации: там много функций из Underscore.js, которые упростят жизнь при работе с массивами и объектами. Используя методы для коллекций, вы сможете быстро доставать, сортировать, фильтровать и смешивать различные данные.

8. DOM дерево

Чтобы ваш код стал классным, недостаточно искать узлы по селектору. После получения FlyNode нужно уметь манипулировать её узлами: получить всех родителей ($(...).parents()) или соседей ($(...).siblings()), найти ближайшего общего родителя ($(...).closest()) или ещё что-нибудь. Для этого есть много методов, которые можно найти в разделе про DOM навигацию.

Когда вы получите FlyNode с нужными узлами, вам захочется что-нибудь добавить, удалить или поменять. Для этого есть целый раздел методов про изменение DOM. Основная особенность Fly.js при работе с DOM состоит в том, что библиотека манипулирует клонированными узлами, а не оригинальными. Чтобы работать с оригиналами, в большинстве методов есть аргумент source, который надо установить в значение true.

Наконец-то статья кончилась

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

Побольше вам удачи и терпения с Fly.js!