Архитектура проекта JavaScript: константы

Всем привет!

Сегодня я решил сделать небольшой пост об элегантном решении для описания постоянных переменных в ваших приложениях. Я быстро просмотрел Интернет и не нашел каких-либо зрелых, органических решений для этого, поэтому, если вы читаете этот пост, я надеюсь, что это поможет!

Этот пост предназначен для новичков. :)

Я могу быть предвзятым, поскольку это мое решение, но я не думаю, что вы найдете лучшее решение для этого в другом месте (дайте мне знать, если есть!), И я уверен, что это точное решение повторялось много раз раньше . Несмотря на это, мы всегда должны искать лучшие решения и делиться ими с другими.

Язык

Мое решение предназначено для проектов JavaScript, использующих модули ES6 для импорта и экспорта. Эти функции не поддерживаются повсеместно во всех браузерах, поэтому убедитесь, что ваше приложение транслирует свой код, используя Babel или что-то подобное.

Установка

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

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

src/
  config/
  styles/
  utils/
  views/

На самом деле я никогда не использовал постоянные переменные в JavaScript, кроме определения их в верхней части страницы, но недавно я решил улучшить свои методы и начать использовать их в своих проектах. Это помогает, когда вы работаете в команде, и определенно помогает поддерживать последовательность, когда ваше приложение использует Redux и у вас есть действия и редукторы, ссылающиеся на одни и те же типы действий.

В конце концов, я добавил новую папку в свою типичную архитектуру приложения:

src/
  config/
  constants/
  styles/
  utils/
  views/

В папке constants/ есть index.js файл, который, если вы не знали раньше, является файлом по умолчанию, который становится целевым, когда вы пишете import example from 'src/constants'! Это очень упрощает создание чистого интерфейса в нашем коде.

// index.js
export const COCA_COLA = 'COCA_COLA';
export const DR_PEPPER = 'DR_PEPPER';
export const PEPSI = 'PEPSI';

Мы можем использовать export, чтобы выставить наши постоянные переменные в нашем приложении. Чтобы импортировать любую из этих констант, мы можем просто написать это:

import { DR_PEPPER } from 'constants';

Примечание, чтобы путь к файлу был только 'constants', я использую Webpack и устанавливаю resolve в файле конфигурации Webpack как каталог src/. Это означает, что всякий раз, когда мы используем import, путь к файлу будет автоматически начинаться с src/ и идти оттуда. Так чисто!

Пока что кажется тривиальным сделать это сообщением в блоге… не так ли? Вроде. Мы еще не закончили.

Что происходит, когда в одном файле определены 300 констант? Это получается довольно долго и трудно разобрать! Конечно, есть лучшее решение.

Мы можем продолжить эту import / export парадигму для наших констант, разделив их по контексту. Я имею в виду, что мы можем разделить константы, относящиеся к безалкогольным напиткам, в одном файле, и константы, относящиеся к картофельным чипсам, в другом файле.

Сделать это довольно просто!

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

// drinks.js
export const COCA_COLA = 'COCA_COLA';
export const DR_PEPPER = 'DR_PEPPER';
export const PEPSI = 'PEPSI';

Мы быстро создадим chips.js файл констант в той же папке:

// chips.js
export const SMITHS_ORIGINAL = 'SMITHS_ORIGINAL';
export const SMITHS_SALT_VINEGAR = 'SMITHS_SALT_VINEGAR';
export const RRD_SWEET_CHILLI = 'RRD_SWEET_CHILLI';

И свяжем их в наш исходный index.js файл с помощью оператора *, который дает нам export, что позволяет нам быстро импортировать и экспортировать каждую константу из заданного файла в виде однострочника:

// index.js
export * from './drinks';
export * from './chips.js';

Затем, чтобы импортировать константу из любого места нашего кода, это так же просто, как

import { COCA_COLA, SMITHS_ORIGINAL } from 'constants';

Если мы хотим быть более контекстными, мы все равно можем сделать это:

import { COCA_COLA } from 'constants/drinks';

Красиво в нем?