FEOD на примере проекта

Важно

Страница была сгенерирована AI и требует ручной доработки.

В этом разделе мы рассмотрим, как FEOD применяется в реальном проекте. Мы разберём структуру типичного todo-приложения и посмотрим на полные примеры кода, чтобы увидеть, как методология работает на практике.

Обзор проекта

Представим, что мы разрабатываем todo-приложение со следующими функциями:

• Список задач с отметкой выполнения
• Фильтрация по статусу (все / активные / выполненные)
• Создание и удаление задач

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

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

Пример использует Vue 3, Vue Router и алиас @, указывающий на src/. Числовые префиксы файлов и папок задают порядок в документации; в проекте они не нужны. HTML должен содержать <div id="app"></div> и подключать app/entry.ts. Для загрузки и изменения задач нужен API: GET /api/todos, POST /api/todos, PATCH /api/todos/:id и DELETE /api/todos/:id. Первые три запроса возвращают данные задач в JSON; реализация сервера в пример не входит.

• app
  • layouts
• pages
  • tasks
• modules
  • Todos
    • types
    • api
    • composables
    • components
  • TodoFilters
    • types
    • composables
    • components
• common
  • utilities
  • ui

Выберите файл в дереве слева

Ключевые принципы в примере

1. Изоляция модулей — каждый модуль содержит свою логику и компоненты. Todos не знает о TodoFilters напрямую.

2. Переиспользование через common — общие части (Button, formatDate) вынесены в common и используются модулями.

3. Страницы используют модули — страница tasks/index.vue использует модули Todos и TodoFilters, но не содержит бизнес-логики.

4. Чёткие границы — модули экспортируют только публичный API через index.ts, внутренние файлы недоступны извне.

5. Типобезопасность — все типы определены в модулях и используются для обеспечения типобезопасности.

Следующие шаги

Теперь, когда вы увидели полный пример проекта, вы можете:

• Изучить полное введение для понимания философии
• Посмотреть быстрое введение для быстрого старта
• Изучить детали структуры для понимания каждой сущности
• Посмотреть практические примеры для более глубокого понимания