b2bon.ru

Ядро (cybervela.js)

Обзор

Класс `cybervela` — это основной контроллер фронтенд-приложения, который управляет и инициализирует модули, обрабатывает запросы к серверу, хранит сессионные данные, уведомления, а также предоставляет вспомогательные методы для работы с DOM, cookie и localStorage.

Архитектура и назначение

Класс cybervela реализует паттерн "ядро приложения" и служит центральной точкой управления фронтенд-логикой. Он отвечает за инициализацию и загрузку модулей, обработку событий, работу с сессией, хранение данных, AJAX-запросы и вспомогательные операции. Все модули (forms, modals, sliders, catalogs, userprofile) подключаются динамически через конструктор.

Конструктор и инициализация

  • Принимает строку с перечнем модулей, объект конфигурации и колбэк onLoad.
  • Объединяет конфиг по умолчанию (requeststo — URL для AJAX-запросов) с переданным.
  • Создаёт экземпляры notify и utils для уведомлений и утилит.
  • Добавляет глобальные обработчики событий (например, для форм с классом .xhr).
  • Загружает сессию пользователя через loadSession, после чего динамически подключает и инициализирует указанные модули, добавляя их в массив modules.
  • Каждый модуль получает ссылку на ядро (this), что позволяет им взаимодействовать с приложением.

Основные поля класса

  • version — версия приложения.
  • prefix — префикс для ключей cookie и localStorage.
  • locale — локализация (по умолчанию RU_ru).
  • modules — массив подключённых модулей.
  • unloaded — счётчик незагруженных модулей (используется для отслеживания загрузки).
  • binds — объект для хранения привязок элементов к функциям (механизм расширяемый).
  • config — объект конфигурации (например, URL для AJAX-запросов).
  • notify — экземпляр класса уведомлений.
  • utils — экземпляр вспомогательных утилит.
  • onload — колбэк, вызываемый после полной инициализации.

Механизм загрузки и инициализации модулей

  • Модули перечисляются строкой через запятую и подключаются динамически.
  • Для каждого модуля создаётся экземпляр, который добавляется в this.modules и становится доступен как поле ядра (this.forms, this.modals и т.д.).
  • После загрузки сессии вызывается moduleIsLoaded для отслеживания статуса загрузки.

Работа с сессией, cookie и localStorage

  • setSessionToken(token, expiration) — сохраняет токен сессии в cookie с префиксом и временем жизни.
  • getSessionToken() — получает токен сессии из cookie.
  • dropSessionToken() — удаляет токен сессии из cookie.
  • setToStorage(key, val) — сохраняет значение в localStorage с префиксом.
  • getFromStorage(key) — получает значение из localStorage по ключу с префиксом.
  • getCookie(name) — получает cookie по имени.
  • loadSession(callback) — отправляет запрос на сервер для загрузки сессионных данных, обновляет токен и вызывает колбэк.

AJAX-запросы и взаимодействие с сервером

  • request(settings, callback) — универсальный AJAX-запрос, обрабатывает ошибки и вызывает колбэк при успехе.
  • requestBack(settings, callback) — отправляет запрос на сервер по адресу из конфига, автоматически добавляет токен сессии, обрабатывает ошибки и выводит их в формы и через notify.

Вспомогательные методы

  • uniqid(prefix, random) — генерирует уникальный идентификатор (например, для элементов DOM).
  • timeToSec(time) — переводит строку времени hh:mm:ss в секунды.
  • decount(timer, callback, time) — обратный отсчёт: уменьшает значение в элементе, по окончании вызывает колбэк.
  • makeContactLink(contact) — преобразует строку контакта (телефон, email, Telegram, ссылка) в корректную HTML-ссылку (<a>) или возвращает <span> с текстом, если формат не распознан. Поддерживает телефоны, email, Telegram-юзернеймы и ссылки, автоматически определяя тип контакта.

Механизм привязок (binds)

  • bind(elem, callback) — позволяет привязать функцию к элементу (расширяемый механизм для реактивных обновлений).
  • updateBinds() — вызывает все привязанные функции для актуализации состояния элементов.

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

  • addListeners() — добавляет глобальный обработчик отправки форм с классом .xhr. Перехватывает submit, отправляет данные через requestBack, вызывает колбэк из data-атрибута формы.
  • onUpdateDOM() — вызывает метод update() у всех модулей (например, для обновления DOM после изменений).

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

<script type="module">
import { cybervela } from '/js/cybervela.js';

var application;

jQuery(document).ready(() => {
  // Initialize application
  application = new cybervela('forms, modals, sliders, userprofile, catalogs', {}, () => {
      jQuery('.curtain').fadeOut();
  });

  window.application = application;
});
</script>
Назад
Вперед