Обертки и адаптеры

В библиотеке Navigo обертки и адаптеры используются для создания гибкой структуры маршрутизации, позволяющей интегрировать Navigo с различными компонентными системами и фреймворками. Обертка — это слой, который инкапсулирует базовый функционал маршрутизатора, предоставляя упрощённый или модифицированный интерфейс. Адаптер же служит для привязки Navigo к специфической архитектуре приложения или к конкретным жизненным циклам компонентов.

Создание обертки над Navigo

Обертка позволяет скрыть детали реализации Navigo и стандартизировать работу с маршрутами. Основные задачи обертки:

  • Централизованное управление маршрутами.
  • Возможность добавления общих middleware-функций.
  • Унификация способов обработки параметров URL.

Пример базовой обертки:

import Navigo from 'navigo';

class RouterWrapper {
    constructor(root = '/') {
        this.router = new Navigo(root, { hash: true });
        this.middlewares = [];
    }

    use(middleware) {
        this.middlewares.push(middleware);
    }

    addRoute(path, handler) {
        this.router.on(path, (params, query) => {
            this.middlewares.forEach(fn => fn(params, query));
            handler(params, query);
        });
        return this;
    }

    navigate(path) {
        this.router.navigate(path);
    }

    resolve() {
        this.router.resolve();
    }
}

// Пример использования
const appRouter = new RouterWrapper();
appRouter.use((params) => console.log('Middleware', params));
appRouter.addRoute('/users/:id', (params) => console.log('User ID:', params.id));
appRouter.navigate('/users/42');

Ключевые моменты:

  • this.middlewares — хранит функции промежуточной обработки.
  • Инкапсуляция Navigo позволяет менять внутреннюю реализацию без изменения внешнего кода.

Адаптеры для фреймворков

Адаптер — это мост между Navigo и сторонними библиотеками или фреймворками, например, React, Vue или Svelte. Он обеспечивает автоматическое управление состоянием компонентов при изменении маршрута.

Пример адаптера для условного компонента:

class ComponentAdapter {
    constructor(router) {
        this.router = router;
        this.components = {};
    }

    register(path, componentClass) {
        this.components[path] = componentClass;
        this.router.addRoute(path, (params) => {
            const Component = this.components[path];
            const instance = new Component(params);
            instance.render();
        });
    }
}

// Использование с оберткой
const componentRouter = new ComponentAdapter(appRouter);
componentRouter.register('/dashboard', class Dashboard {
    constructor(params) { this.params = params; }
    render() { console.log('Rendering dashboard with', this.params); }
});

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

  • Адаптер отвечает за создание и уничтожение компонентов.
  • Поддерживает передачу параметров маршрута компонентам.
  • Позволяет внедрять любые дополнительные методы жизненного цикла.

Middleware как часть оберток и адаптеров

Middleware в Navigo позволяет добавлять сквозную обработку маршрутов: логирование, авторизацию, валидацию параметров и пр. В обертках middleware можно комбинировать и вызывать в нужном порядке:

appRouter.use((params) => {
    if (!params.id) console.warn('ID не указан');
});

appRouter.use((params) => {
    console.log('Проверка завершена для', params);
});

Преимущества использования middleware через обертку:

  • Единый интерфейс для всех маршрутов.
  • Лёгкая интеграция с адаптерами компонентов.
  • Возможность динамического включения или отключения функций.

Динамическая регистрация маршрутов

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

function loadModuleRoutes(router, moduleConfig) {
    moduleConfig.routes.forEach(route => {
        router.addRoute(route.path, route.handler);
    });
}

// Пример конфигурации модуля
const userModule = {
    routes: [
        { path: '/profile', handler: () => console.log('Profile loaded') },
        { path: '/settings', handler: () => console.log('Settings loaded') }
    ]
};

loadModuleRoutes(appRouter, userModule);

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

  • Лёгкая интеграция новых модулей без изменения ядра приложения.
  • Возможность подключения адаптеров для рендеринга компонентов.
  • Централизованное управление маршрутизацией.

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

Комбинация оберток и адаптеров позволяет строить масштабируемую архитектуру:

  1. Обертка отвечает за маршруты и middleware.
  2. Адаптер — за управление компонентами и жизненным циклом UI.
  3. Middleware обеспечивает общие сквозные процессы (логирование, авторизация).

Пример полной схемы:

appRouter.use(authMiddleware);
componentRouter.register('/dashboard', DashboardComponent);
componentRouter.register('/settings', SettingsComponent);
appRouter.resolve();

Таким образом, Navigo с обертками и адаптерами становится полноценным инструментом для организации маршрутизации в SPA, поддерживая модульность, расширяемость и контроль над жизненным циклом компонентов.

Оглавление