juggle — это минималистичный, компонентный JS-фреймворк. Он не зависит от других библиотек, представляет собой идеальный закрытый модуль и подходит для постепенного изучения. Его можно интегрировать с любым другим фреймворком.

juggle включает в себя следующие компоненты:

• поддержка всплывающих событий;
• Tween (библиотека для анимации);
• MV-фреймворк;
• HTTP;
• WebSocket;
• ресурсы;
• модули.

Вы можете выбрать нужные вам компоненты, не ограничивая разработчика.

Архитектура juggle и его зависимости (основные компоненты выделены тёмным цветом)

allinone загрузка

npm install juggle-all

Основные компоненты

1. juggle-event (поддержка всплывающих событий)

Описание: поддерживает всплывающие события, которые можно использовать для устранения зависимостей между структурами, включая древовидные структуры. Поддерживает прослушивание событий, удаление событий, отправку событий, блокировку всплытия и немедленную блокировку. Использует пул объектов для уменьшения объёма памяти.

Особенности:

• поддерживает всплытие при условии, что объект, который всплывает, имеет свойство parent и оно не пусто, а также свойство isDisplayObject со значением true;
• в функции обратного вызова отправки события нельзя блокировать всплытие этого события;
• на определённом уровне цепочки вызовов функций обратного вызова нельзя повлиять на отправку события на этом уровне;
• однако если на определённом уровне цепочки вызовов функций обратного вызова удалить или добавить прослушиватель событий на более высоком уровне, то это повлияет на отправку событий на этом более высоком уровне.

Загрузка:

npm install juggle-event

Сценарии использования: разработка UI-библиотек, упаковка любых компонентов. Например: juggle-http и juggle-websocket основаны на этом событии и могут отправлять собственные события.

Пример кода:

1. Наследовать класс EventDispatcher.

function DisplayObj() {
    juggle.EventDispatcher.apply(this);
}

2. Прослушивать событие.

obj.addEventListener("aaa", function(event){}, this);

3. Отправлять событие типа aaa с всплытием и данными bbb.

obj.dispatchEventWith("aaa", true, "bbb");

4. Демонстрация событий (двойной щелчок по test.html).

>>>>>>Демонстрация событий

2. juggle-juggler (управление временной шкалой)

Описание: управление временной шкалой, поддержка добавления анимации, удаления анимации и вызова функции анимации для каждого кадра с передачей интервала в миллисекундах между текущим и предыдущим вызовом.

Особенности:

• функция анимации, добавленная во время выполнения, не будет вызвана сразу, поскольку она ещё не прошла через временную шкалу, и это логично;
• если анимация была удалена во время выполнения функции, то уже запущенная анимация не пострадает, но та, которая ещё не была запущена, будет отменена.

Загрузка:

npm install juggle-juggler

Сценарии использования: анимация, выполнение бизнес-логики для каждого кадра.

Пример кода:

1. Реализовать метод advanceTime.

function View() {
    this.advanceTime = function (time) {
    }
}

2. Добавить управление временной шкалой и вызывать функцию advanceTime для каждого кадра, передавая интервал в миллисекундах.

juggle.jugglerManager.juggler.add(new View());

3. Управление временной шкалой (двойной щелчок по test.html для демонстрации).

>>>>>>Управление временной шкалой

3. juggle-tween (анимация)

Описание: библиотека анимации с 17 режимами перехода, каждый кадр точно позиционируется без ошибок, обеспечивая идеальное плавное движение. Использует пул объектов для уменьшения объёма памяти.

Особенности:

• каждый вызов начинается со значения + (конечное значение - начальное значение) * (прошедшее время / общее время), что является наиболее стабильным и не содержит ошибок;
• непрерывное планирование, и оставшееся время используется повторно без потерь.

Загрузка:

npm install juggle-tween

Сценарии использования: любая анимация.

Пример кода:

1. Создать отображаемый объект.

function DisplayObject(obj) {
    this.obj = obj;
    this.xValue = 0;
    this.yValue = 0;
    this.getX = function () {
        return this.xValue;
    };
    this.setX = function (value) {
        this.xValue = value;
        this.draw();
    };
    this.getY = function () {
        return this.yValue;
    };
    this.setY = function (value) {
        this.yValue = value;
        this.draw();
    };
    this.draw = function () {
        this.obj.style.position = "absolute";
        this.obj.style.top = this.yValue + "px";
        this.obj.style.left = this.xValue + "px";
    }
}

2. Использовать juggle-tween для анимации.

var display = new DisplayObject(document.getElementById("tween_div"));
display.setX(100);
display.setY(100);
tween = juggle.tweenPool.fromPool(display, 2);
tween.animate(display.getX, display.setX, 800);
tween.animate(display.getY, display.setY, 400);
juggle.jugglerManager.juggler.add(tween);

3. Демонстрация анимации (двойной щелчок по test.html).

>>>>>>Демо анимации

4. Онлайн демонстрация анимации:

>>>>>>Онлайн демонстрация анимации

4. juggle-delayedcall (отложенный вызов)

Описание: точный инструмент для отложенных вызовов, позволяющий устанавливать интервалы между вызовами и количество повторений (бесконечные повторения). Решает проблему множественных вызовов setInterval, которые не являются точными. Использует пул объектов для уменьшения объёма памяти.

Особенности:

• непрерывное планирование, и оставшееся время используется повторно без потерь;
• интервал планирования, например, 1001 миллисекунда, 999 миллисекунд и т. д.

Загрузка:

npm install juggle-delayedcall

Сценарии использования: любой сценарий, требующий отложенных вызовов, вместо setInterval.

Пример кода:

1. Пример отложенного вызова, параметр 1 — функция обратного вызова, интервал вызова — 1 секунда, параметр — «1111», повторить 5 раз и прекратить.

var delayedCall = juggle.delayedCallPool.fromPool(function(arg){}, 1, "1111");
delayedCall.mRepeatCount = 5;
juggle.jugglerManager.juggler.add(delayedCall);

2. Демонстрация отложенного вызова (двойной щелчок по test.html).

>>>>>>Демонстрация отложенного вызова