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

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

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

В проектах на Slim.js чаще всего выделяют следующие ключевые папки:

  1. src/ — исходный код приложения.

    • Содержит все компоненты, сервисы, утилиты и маршруты.
    • Рекомендуется разделять код на логические блоки по функционалу.

    Пример структуры внутри src/:

    src/
  components/
  services/
  utils/
  app.js
  index.html

  2. components/ — отдельные UI-компоненты.

    • Каждый компонент обычно располагается в своей папке, содержащей HTML, CSS и JS (или TypeScript) файлы.

    • Например:

      components/
  header/
    header.js
    header.html
    header.css
  footer/
    footer.js
    footer.html
    footer.css

    • JS-файл компонента содержит класс или функцию с использованием Slim.Component.

    • HTML-файл определяет шаблон компонента через innerHTML или подключение через Shadow DOM.

    • CSS-файл обеспечивает локальные стили, часто изолируемые через scoped CSS или Shadow DOM.

  3. services/ — бизнес-логика и работа с данными.

    • Сервисы взаимодействуют с API, управляют состоянием приложения или обрабатывают данные.

    • Пример:

      services/
  apiService.js
  authService.js

  4. utils/ — вспомогательные функции.

    • Повторно используемые утилиты, например, функции форматирования дат, работы с массивами или локального хранилища.

    • Пример:

      utils/
  formatDate.js
  debounce.js
  storage.js

  5. assets/ — статические ресурсы.

    • Изображения, шрифты, иконки, глобальные стили.

    • Пример:

      assets/
  images/
  fonts/
  styles/
    main.css

  6. index.html — точка входа.

    • Подключает основной JavaScript-файл (app.js) и стили.

    • В Slim.js шаблон обычно содержит контейнер для рендеринга компонентов:

      <body>
  <div id="app"></div>
  <script src="app.js"></script>
</body>

Разделение компонентов по типам

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

  • Структурные (layout) — header, footer, sidebar, navbar.
  • Контентные (content) — карточки, таблицы, списки, формы.
  • Функциональные (functional) — кнопки, модальные окна, интерактивные элементы.

Такое разделение упрощает поддержку и переиспользование компонентов в разных частях приложения.

Организация файлов JavaScript

В Slim.js рекомендуют использовать модульную структуру ES6:

// header.js
import { Component } from 'slim-js';

export default class Header extends Component {
  constructor() {
    super();
    this.template = `
      <header>
        <h1>Заголовок приложения</h1>
      </header>
    `;
  }
}
  • Каждый компонент экспортируется как отдельный модуль.
  • Общие функции и утилиты подключаются через import.
  • app.js выполняет роль центрального файла, где происходит инициализация компонентов и настройка маршрутов, если используется Slim.js Router.

Рекомендации по именованию

  • Папки компонентов — kebab-case или camelCase, отражающие назначение.
  • JS-классы — PascalCase.
  • CSS-файлы — по имени компонента (header.css) или с префиксом (header.module.css для scoped-стилей).
  • Утилиты и сервисы — camelCase.js.

Использование модульных CSS и Shadow DOM

Slim.js поддерживает изоляцию стилей через Shadow DOM:

this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
  <style>
    h1 { color: blue; }
  </style>
  <h1>Пример заголовка</h1>
`;
  • Такая организация предотвращает конфликты стилей между компонентами.
  • В крупных проектах рекомендуется хранить CSS отдельно и подключать через JS, чтобы сохранить чистоту структуры.

Организация проекта для сборки

При использовании сборщиков (Webpack, Vite):

project/
  dist/          // результат сборки
  node_modules/
  src/
  package.json
  vite.config.js
  • dist/ — скомпилированные JS и CSS для продакшена.
  • src/ — все исходные файлы.
  • package.json содержит зависимости и скрипты сборки.
  • Такой подход облегчает работу с компонентами и обеспечивает модульность.

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

Оглавление