Программная навигация

Slim.js — это минималистичная библиотека для построения компонентов и одностраничных приложений (SPA) на JavaScript. Она позволяет создавать реактивные компоненты с использованием шаблонов HTML и поддерживает маршрутизацию, что делает возможной программную навигацию между различными состояниями приложения без перезагрузки страницы.

Настройка маршрутизатора

Для работы с программной навигацией в Slim.js используется встроенный маршрутизатор. Основные методы маршрутизатора:

  • Router.add(path, handler) — добавляет маршрут по указанному пути. handler выполняется при переходе на этот путь.
  • Router.navigate(path) — программный переход к указанному маршруту.
  • Router.start() — инициализация маршрутизатора. Обязателен для SPA.

Пример конфигурации маршрутов:

import { Router } from 'slim-js';

Router.add('/', () => {
    console.log('Главная страница');
});

Router.add('/about', () => {
    console.log('Страница о проекте');
});

Router.start();

Здесь / и /about — это маршруты, а стрелочные функции — обработчики, которые выполняются при переходе.

Программная навигация с Router.navigate

Метод Router.navigate(path) позволяет перемещаться между страницами без перезагрузки:

// Переход на страницу "О проекте"
Router.navigate('/about');

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

  • Сохраняет историю браузера для возможности использования кнопок “Назад” и “Вперед”.
  • Обновляет состояние компонентов, соответствующих маршруту.
  • Может использоваться внутри обработчиков событий, например, при нажатии на кнопку:
<button id="goHome">Главная</button>

<script>
document.getElementById('goHome').addEventListener('click', () => {
    Router.navigate('/');
});
</script>

Динамические маршруты

Slim.js поддерживает маршруты с параметрами, что удобно для отображения деталей объектов или профилей:

Router.add('/user/:id', (params) => {
    console.log(`Пользователь с ID: ${params.id}`);
});

При переходе к /user/42 params.id будет равно 42. Это позволяет строить реактивные компоненты, которые получают данные на основе URL.

Интеграция маршрутизации с компонентами

Компоненты Slim.js автоматически реагируют на изменение маршрута, если их состояние зависит от URL. Пример компонента, который отображает контент в зависимости от маршрута:

import { Slim } from 'slim-js';

class PageContent extends Slim {
    get template() {
        return `
            <div>
                {{content}}
            </div>
        `;
    }

    onBeforeCreated() {
        Router.add('/', () => this.content = 'Главная страница');
        Router.add('/about', () => this.content = 'О проекте');
    }
}

customElements.define('page-content', PageContent);

Здесь свойство content обновляется автоматически при переходе на соответствующий маршрут, а шаблон компонента обновляется благодаря реактивности Slim.js.

Программная навигация с сохранением состояния

Для SPA важно сохранять состояние приложения при переходах между страницами. В Slim.js это достигается использованием реактивных свойств и маршрутов с параметрами:

Router.add('/cart/:itemId', (params) => {
    const item = getItemFromCart(params.itemId);
    cartComponent.selectedItem = item;
});

cartComponent — это компонент, который отображает детали выбранного товара. Благодаря реактивности Slim.js, изменение selectedItem мгновенно обновляет интерфейс.

Обработка ошибок маршрутизации

Для предотвращения перехода на несуществующие маршруты используется глобальный обработчик:

Router.notFound(() => {
    console.error('Маршрут не найден');
    Router.navigate('/');
});

Это гарантирует, что пользователь всегда будет перенаправлен на допустимый маршрут.

Советы по построению навигации

  1. Разделение логики и представления — маршруты должны лишь переключать состояние компонентов, а компоненты — отображать интерфейс.
  2. Использование параметров маршрута — позволяет создавать динамичные страницы без дублирования кода.
  3. Реактивные свойства компонентов — обеспечивают мгновенное обновление интерфейса при изменении маршрута.
  4. Программные переходы через Router.navigate — позволяют реализовать сложные сценарии навигации, включая переходы после успешной операции или авторизации.

Пример комплексной программы навигации

Router.add('/', () => homeComponent.show());
Router.add('/about', () => aboutComponent.show());
Router.add('/user/:id', (params) => profileComponent.load(params.id));

document.querySelectorAll('a[data-link]').forEach(link => {
    link.addEventListener('click', (e) => {
        e.preventDefault();
        Router.navigate(link.getAttribute('href'));
    });
});

Router.notFound(() => Router.navigate('/'));
Router.start();

В этом примере:

  • Любой <a> с атрибутом data-link становится контролируемым маршрутом.
  • Переходы происходят без перезагрузки страницы.
  • Ошибочные маршруты автоматически перенаправляются на главную страницу.

Slim.js обеспечивает легкий и гибкий способ реализации программной навигации в SPA, сочетая маршруты с реактивными компонентами и упрощая управление состоянием приложения.

Оглавление