Структура файлов проекта

При работе с Page.js, легковесным клиентским роутером для одностраничных приложений на JavaScript, правильная организация файлового дерева является ключевым аспектом удобного масштабирования проекта и поддержки кода.

Основные директории

/src Основная папка, содержащая исходный код приложения. Обычно включает:
- index.js – точка входа приложения, где инициализируется Page.js и подключаются глобальные стили, компоненты и маршруты.
- routes/ – директория для отдельных маршрутов и обработчиков страниц.
- views/ – шаблоны или компоненты, отвечающие за отображение страниц.
- components/ – переиспользуемые UI-компоненты.
- utils/ – вспомогательные функции и утилиты.
- assets/ – изображения, шрифты и другие статические ресурсы.

Пример структуры:

src/
├─ index.js
├─ routes/
│  ├─ home.js
│  ├─ about.js
│  └─ contact.js
├─ views/
│  ├─ homeView.js
│  ├─ aboutView.js
│  └─ contactView.js
├─ components/
│  ├─ header.js
│  ├─ footer.js
│  └─ modal.js
├─ utils/
│  ├─ api.js
│  └─ helpers.js
└─ assets/
   ├─ styles.css
   ├─ logo.png
   └─ fonts/

Разделение маршрутов и представлений

Page.js работает по принципу сопоставления URL с функциями-обработчиками. Для поддерживаемого масштабируемого приложения рекомендуется разделять:

Маршруты (routes/) – здесь определяется логика маршрутизации и middleware:

import page from 'page';
import { homeView } from '../views/homeView.js';
import { aboutView } from '../views/aboutView.js';

page('/', homeView);
page('/about', aboutView);
page();

Представления (views/) – функции или классы, которые формируют DOM или возвращают HTML-шаблон:

export function homeView(ctx, next) {
    document.querySelector('#app').innerHTML = `<h1>Главная страница</h1>`;
}

export function aboutView(ctx, next) {
    document.querySelector('#app').innerHTML = `<h1>О нас</h1>`;
}

Такое разделение повышает читаемость и облегчает тестирование отдельных частей приложения.

Компоненты и переиспользуемый код

Все элементы интерфейса, которые повторяются на разных страницах (например, навигация, футер, модальные окна), помещаются в components/. Это позволяет избежать дублирования кода и централизованно управлять UI.

Пример компонента:

export function header() {
    const headerEl = document.createElement('header');
    headerEl.innerHTML = `
        <nav>
            <a href="/" data-link>Главная</a>
            <a href="/about" data-link>О нас</a>
        </nav>
    `;
    return headerEl;
}

И вставка в страницу:

document.querySelector('#app').prepend(header());

Асинхронные загрузки и ленивые маршруты

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

page('/contact', async () => {
    const module = await import('../views/contactView.js');
    module.contactView();
});

Это позволяет Page.js обрабатывать маршруты динамически, загружая код только при необходимости.

Статические ресурсы

assets/ – хранятся CSS, изображения, шрифты и иконки.
Рекомендуется держать стили глобальными в начале проекта и использовать CSS-модули или SCSS для компонентов.
Статические файлы подключаются через index.html или динамически через JavaScript.

Пример подключения стилей в index.js:

import './assets/styles.css';

Инициализация Page.js

Главный файл (index.js) содержит настройку роутера и базовую структуру приложения:

import page from 'page';
import { header } from './components/header.js';
import { homeView } from './routes/home.js';
import { aboutView } from './routes/about.js';

document.body.prepend(header());

page('/', homeView);
page('/about', aboutView);
page();

page() в конце активирует маршрутизатор.
Все ссылки должны иметь атрибут data-link или использовать preventDefault() для корректной работы без перезагрузки страницы.