Velocity.Utilities

Модуль Velocity.Utilities представляет собой набор вспомогательных методов, используемых внутри библиотеки Velocity.js и доступных разработчику для решения типовых задач: работы с DOM, управления очередями анимаций, оптимизации производительности и унификации поведения между браузерами.

В отличие от основной части Velocity, ориентированной на анимации, Utilities-функции выполняют инфраструктурную роль и позволяют избегать прямого обращения к низкоуровневым API браузера.

Работа с DOM-элементами

Приведение к массиву элементов

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

Velocity.Utilities.elements(document.querySelectorAll(".box"));

Метод:

  • принимает NodeList, HTMLCollection, одиночный элемент или массив
  • возвращает массив DOM-элементов

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

  • гарантирует единый формат входных данных
  • исключает необходимость ручной проверки типов

Проверка типа объекта

Velocity.Utilities.isNode(element);
Velocity.Utilities.isString(value);
Velocity.Utilities.isArray(value);

Назначение:

  • безопасная проверка типов без зависимости от typeof
  • корректная работа с объектами, созданными в разных контекстах (например, iframe)

Работа со стилями

Получение текущих значений стилей

Velocity.Utilities.getPropertyValue(element, "width");

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

  • возвращает вычисленное значение (computed style)
  • автоматически обрабатывает vendor-префиксы
  • нормализует единицы измерения

Установка значений

Velocity.Utilities.setPropertyValue(element, "opacity", 0.5);

Функция:

  • применяет стили напрямую к элементу
  • используется внутри движка анимаций
  • поддерживает числовые и строковые значения

Управление классами

Добавление класса

Velocity.Utilities.addClass(element, "active");

Удаление класса

Velocity.Utilities.removeClass(element, "hidden");

Проверка наличия класса

Velocity.Utilities.hasClass(element, "visible");

Преимущества:

  • единый интерфейс для всех браузеров
  • отсутствие необходимости работать с classList напрямую

Работа с данными (Data storage)

Velocity использует собственное хранилище данных для элементов, аналогичное data() в jQuery.

Установка данных

Velocity.Utilities.data(element, "key", "value");

Получение данных

Velocity.Utilities.data(element, "key");

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

  • данные не записываются в DOM-атрибуты
  • используются для внутреннего состояния анимаций
  • безопасны при удалении элементов

Очереди анимаций

Velocity поддерживает систему очередей, позволяющую управлять последовательностью выполнения анимаций.

Добавление в очередь

Velocity.Utilities.queue(element, "fx", function(next) {
    console.log("Шаг 1");
    next();
});

Запуск очереди

Velocity.Utilities.dequeue(element, "fx");

Параметры:

  • element — DOM-элемент
  • "fx" — имя очереди (по умолчанию используется именно оно)

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

  • поддержка нескольких очередей
  • ручное управление последовательностью
  • возможность интеграции с пользовательской логикой

Отложенное выполнение (Deferred)

Velocity реализует собственную систему deferred-объектов, схожую с Promise.

Создание deferred

var deferred = Velocity.Utilities.deferred();

Разрешение

deferred.resolve();

Отклонение

deferred.reject();

Использование

deferred.promise().then(function() {
    console.log("Готово");
});

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

  • используется внутри анимаций
  • обеспечивает совместимость со старыми браузерами
  • может применяться независимо от анимаций

Работа с временными функциями

Задержка выполнения

Velocity.Utilities.delay(1000).then(function() {
    console.log("Прошла 1 секунда");
});

Назначение:

  • создание пауз между анимациями
  • управление асинхронной логикой

Работа с объектами

Клонирование объектов

var clone = Velocity.Utilities.extend({}, originalObject);

Функция:

  • выполняет поверхностное копирование
  • объединяет свойства объектов

Глубокое объединение

Velocity.Utilities.extend(true, target, source);

Первый параметр:

  • true — глубокое копирование
  • false — поверхностное

Работа с массивами

Перебор элементов

Velocity.Utilities.each(array, function(index, value) {
    console.log(index, value);
});

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

  • работает с массивами и объектами
  • унифицированный интерфейс

Производительность и оптимизация

requestAnimationFrame-обёртка

Velocity использует внутреннюю обёртку над requestAnimationFrame, доступную через Utilities:

Velocity.Utilities.rAF(function() {
    console.log("Кадр анимации");
});

Преимущества:

  • fallback для старых браузеров
  • синхронизация с рендерингом

Throttle и debounce

В некоторых версиях доступны вспомогательные функции ограничения частоты вызовов:

var throttled = Velocity.Utilities.throttle(function() {
    console.log("Ограниченный вызов");
}, 200);

Назначение:

  • оптимизация обработчиков событий (scroll, resize)
  • снижение нагрузки на браузер

Работа с позиционированием

Определение позиции элемента

Velocity.Utilities.offset(element);

Возвращает:

  • координаты элемента относительно документа

Определение размеров

Velocity.Utilities.dimensions(element);

Включает:

  • ширину
  • высоту
  • дополнительные параметры

Обработка событий

Хотя Velocity не заменяет полноценные системы событий, Utilities предоставляет базовые методы:

Velocity.Utilities.on(element, "click", handler);
Velocity.Utilities.off(element, "click", handler);

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

  • кроссбраузерная совместимость
  • упрощённый синтаксис

Взаимодействие с очередями и анимациями

Utilities тесно интегрированы с основной системой Velocity:

  • управление жизненным циклом анимации
  • хранение состояния
  • синхронизация нескольких эффектов

Пример комбинированного использования:

var el = document.querySelector(".box");

Velocity.Utilities.queue(el, "fx", function(next) {
    Velocity(el, { opacity: 0 }, {
        duration: 500,
        complete: next
    });
});

Velocity.Utilities.queue(el, "fx", function(next) {
    Velocity(el, { opacity: 1 }, {
        duration: 500,
        complete: next
    });
});

Velocity.Utilities.dequeue(el);

Особенности архитектуры

  • Utilities реализованы как независимый модуль
  • используются внутри ядра Velocity
  • обеспечивают отказ от внешних зависимостей (например, jQuery)
  • унифицируют поведение API

Практическое значение

Использование Velocity.Utilities позволяет:

  • уменьшить количество вспомогательного кода
  • повысить переносимость решений
  • упростить работу с DOM и асинхронностью
  • строить более сложные сценарии анимаций

Особенно полезны при:

  • создании UI-библиотек
  • разработке интерактивных интерфейсов
  • оптимизации производительности фронтенда
Оглавление