Система файлов и соглашения о именовании

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

Основная структура каталогов

Проект на Ember.js включает несколько ключевых каталогов, каждый из которых выполняет свою роль в организации кода и ресурсов:

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

    • models/ — модели данных, которые обычно отражают структуру объектов и работают с данными.
    • routes/ — маршруты приложения, которые управляют состоянием и логикой переходов между страницами.
    • controllers/ — контроллеры, управляющие состоянием данных для маршрутов.
    • components/ — переиспользуемые UI-компоненты, которые инкапсулируют логику отображения и взаимодействия.
    • templates/ — шаблоны Handlebars для отображения данных.

  2. public/ Каталог, где находятся статические файлы приложения, такие как изображения, шрифты, и другие ресурсы, доступные непосредственно через HTTP.

  3. tests/ В этом каталоге находятся тесты, проверяющие функциональность приложения. Здесь можно встретить как модульные тесты, так и тесты для интеграции различных частей приложения.

  4. config/ Конфигурационные файлы приложения. Здесь хранится информация о средах, настройках маршрутизации и других параметрах, которые могут быть изменены в процессе разработки.

  5. dist/ Каталог для сборки проекта. После компиляции и сборки весь финальный код и ресурсы перемещаются в этот каталог, который можно развернуть на сервере.

  6. node_modules/ Содержит установленные зависимости через npm. Включает все библиотеки, используемые проектом.

Конвенции по именованию файлов

В Ember.js важно следовать строгим конвенциям по именованию файлов, чтобы фреймворк мог автоматически сопоставлять файлы с компонентами, маршрутами, моделями и другими элементами приложения. Вот основные правила именования:

  1. CamelCase для классов и компонентов Все JavaScript-классы, компоненты и другие объекты, которые являются частью логики приложения, должны быть названы в стиле CamelCase. Например:

    • UserModel.js
    • PostController.js

  2. Согласованность в именовании шаблонов Шаблоны и их файлы должны соответствовать именам своих соответствующих компонентов или маршрутов, но с расширением .hbs для шаблонов Handlebars. Например:

    • Для компонента user-profile.js должен быть файл шаблона user-profile.hbs.
    • Для маршрута post.js должен быть файл шаблона post.hbs.

  3. Маршруты и контроллеры Каждый маршрут имеет свой контроллер с таким же именем, как и маршрут. Например:

    • routes/post.js будет иметь соответствующий контроллер controllers/post.js.

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

    • models/user.js для модели пользователя.
    • models/post.js для модели записи.

  5. Ресурсы и префикс -component Имя компонента всегда должно заканчиваться на -component, чтобы отличить компоненты от других объектов в приложении:

    • user-profile-component.js
    • post-list-component.js

Конвенции по размещению кода

  1. Расположение компонентов Каждый компонент должен иметь собственную папку внутри каталога app/components/, в которой размещаются JavaScript и шаблон компонента. Например:

    app/
  components/
    user-profile/
      user-profile-component.js
      user-profile.hbs

  2. Расположение моделей и маршрутов Все модели и маршруты находятся внутри своих каталогов:

    app/
  models/
    user.js
  routes/
    post.js

  3. Тесты Тесты для компонентов, маршрутов и моделей обычно располагаются рядом с соответствующими файлами в каталоге tests/, что облегчает поддержку тестируемости приложения:

    tests/
  unit/
    models/
      user-test.js
    routes/
      post-test.js
  integration/
    components/
      user-profile-test.js

Стандарты для импорта и экспорта

Ember.js использует ES6 модули для импорта и экспорта классов и функций, что упрощает управление зависимостями. Все файлы, связанные с логикой приложения, должны экспортировать только необходимые элементы. Например:

// user.js (модель)
import Model, { attr } from '@ember/data/model';

export default class User extends Model {
  @attr('string') name;
  @attr('string') email;
}

Импорт классов осуществляется с использованием краткого синтаксиса:

// post.js (маршрут)
import Route from '@ember/routing/route';

export default class PostRoute extends Route {
  model(params) {
    return this.store.findRecord('post', params.post_id);
  }
}

Стандарты для конфигурации и стилей

В рамках Ember.js также существует несколько соглашений для конфигурации и стилизации кода:

  1. Конфигурация приложения Все настройки, такие как настройка маршрутизации, обработка данных или настройки среды, должны быть вынесены в файлы конфигурации в каталоге config/. Это гарантирует, что изменения конфигурации будут централизованными и легко изменяемыми.

  2. CSS и стили Ember.js не накладывает строгих ограничений на систему стилей, но рекомендуется использовать подходы, такие как BEM (Block Element Modifier) для написания классов CSS. Можно использовать SCSS, SASS, или обычный CSS для стилизации компонентов и элементов страницы.

  3. Принципы работы с зависимостями Все зависимости (например, внешние библиотеки или утилиты) должны быть импортированы в нужных местах. Ember.js предоставляет механизм для автоматического импорта зависимостей через его систему бандлинга, но важно следить за минимизацией и оптимизацией этих зависимостей, чтобы избежать избыточности.

  4. Правила для тестов Для тестирования компонентов и маршрутов рекомендуется следовать стандартам тестирования, принятым в сообществе Ember. Тесты должны быть написаны с использованием встроенных инструментов, таких как QUnit или Mocha, и находиться в соответствующих папках unit/ или integration/ в каталоге tests/.

Резюме

Система файлов и соглашения о именовании в Ember.js являются ключевыми для поддержания порядка и удобства работы с проектами. Строгие правила именования и организация файлов по категориям помогают быстро находить и изменять нужные элементы в приложении. Эффективное использование этих соглашений способствует улучшению качества кода и упрощает масштабирование и поддержку проектов на Ember.js.

Оглавление