Особенности использования в Router

Dom7 используется в экосистеме Framework7 как облегчённый jQuery-подобный инструмент для работы с DOM. При интеграции с Router важной особенностью становится то, что Dom7 взаимодействует не только с существующим DOM, но и с динамически создаваемыми страницами, компонентами и маршрутами. Это требует корректного подключения обработчиков событий, поиска элементов и освобождения ресурсов при переходах между представлениями.

Динамическая загрузка страниц

Router Framework7 формирует содержимое страниц на лету. При каждом переходе создаётся новый набор DOM-элементов, удаляемый при возврате назад или при замене текущего маршрута. Dom7 выполняет поиск и манипуляции уже после того, как Router полностью вставил страницу в DOM. В противном случае выборка будет пустой.

app.router.navigate('/details/');
$$(document).once('page:afterin', '.page[data-name="details"]', () => {
  $$('.details-title').text('Информация о сущности');
});

Селекторы с учётом контекста страницы

Router создаёт отдельные контейнеры для каждой страницы. Использование глобальных селекторов приводит к конфликтам при повторных загрузках одинаковых страниц. Dom7 позволяет ограничить выборку контекстом:

$$(pageEl).find('.item');

Контекстный поиск гарантирует работу с элементами текущего маршрута и предотвращает ошибочную модификацию элементов в скрытых или удалённых страницах.

Инициализация событий

Router обрабатывает жизненный цикл страницы. Dom7-обработчики следует назначать на этапах page:init, page:mounted либо page:afterin, чтобы обеспечить доступность элементов. Важный момент — избегать повторной регистрации одних и тех же обработчиков при повторных переходах:

$$(document).on('page:init', '.page[data-name="profile"]', (e) => {
  const page = e.detail;
  $$(page.el).find('.save-btn').on('click', onSave);
});

При использовании once снижается риск утечек:

$$(document).once('page:init', '.page[data-name="profile"]', (e) => {
  ...
});

Удаление подписок при уходе со страницы

Router удаляет DOM-узлы страницы, но обработчики, привязанные глобально, продолжают жить. Dom7 предоставляет метод .off() для отписки. Если логика требует освобождения ресурсов при уходе со страницы, применяется событие page:beforeout либо page:beforeremove:

$$(document).on('page:beforeremove', '.page[data-name="profile"]', () => {
  $$(document).off('click', onSave);
});

Работа с переходами и анимациями

При анимациях Router временно удерживает старую страницу, пока новая не будет полностью показана. Dom7-манипуляции с элементами должны учитывать этот промежуток. Изменение свойств новой страницы выполняется в page:afterin, а логика скрытия старой страницы — в page:afterout. Это исключает визуальные артефакты и несогласованное состояние DOM.

Поддержка шаблонного рендеринга

Router позволяет подставлять данных в шаблон страницы. Dom7 выступает здесь инструментом для пост-обработки результата: применение интерактивных элементов, стилизация, внедрение дополнительных узлов. Важно избегать вмешательства в шаблон на этапе до рендера, чтобы не нарушить логику Router.

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

Работа с Dom7 внутри Router влияет на производительность при множественных переходах. Главные меры:

  • контекстные селекторы вместо глобальных;
  • минимизация перезаписи DOM;
  • отписка от событий своевременно;
  • применение .once и делегирования событий;
  • отсутствие тяжёлых вычислений в page:init.

Смешанное использование делегирования и контекста обеспечивает наименьший объём кода и минимальные риски утечек.

Асинхронные маршруты и Dom7

Router поддерживает асинхронный рендеринг страниц (async routes). В этом случае Dom7-манипуляции возможны только после завершения загрузки и вставки контента. Использование resolve и reject маршрута гарантирует последовательность: сначала загрузка данных, затем вставка HTML, затем инициализация через Dom7.

Взаимодействие с компонентами

При использовании компонентного подхода Router создаёт экземпляры страниц-компонентов. Dom7 применяют для прямой работы с DOM-узлами компонента, но логика должна оставаться внутри жизненного цикла компонента, а не глобально. Разделение ответственности предотвращает конфликты при множественных экземплярах одной и той же страницы.

Инкапсуляция

Dom7-селекторы, привязанные к элементам страницы, создаваемой Router, формируют локальный контекст. Это позволяет добиться инкапсуляции поведения страницы и избежать влияния на остальные страницы, что особенно критично при таб-интерфейсах и вложенных маршрутах.

Специфика при вложенных маршрутах

Во вложенных маршрутах Router может создавать несколько активных страниц. Dom7-селекторы обязаны учитывать ближайший контейнер:

$$(page.routerEl).find('.btn');

Данный подход исключает выбор элементов дочерних маршрутов при работе с родительским.

Итоговые особенности

Интеграция Dom7 и Router базируется на корректной привязке к жизненному циклу страниц, контекстных селекторах, безопасной инициализации событий и освобождении ресурсов. Dom7 обеспечивает гибкую манипуляцию DOM, а Router определяет правила существования страниц. Совместное использование даёт возможность создавать интерактивные интерфейсы без излишних издержек, при условии соблюдения описанных принципов.

Оглавление