3

В процессе разработки столкнулись с разногласиями по выносу одинакового кода(иногда он ещё не дублируется) в отдельные файлы(файл). Приведу подходы на примере вспомогательных(хелперов) функций.

Подход №1

Создать директорию helpers, в ней создать index.js и в нём описывать все функции-хелперы. Привожу пример ниже.

Функция хелпер typeIs:


/**
 * Some imports ... 
 */

/**
 * Returns data type
 *
 * @param {*} type
 * @return {string}
 */
const typeIs = () => {
  return {}.toString.call(type).replace('\]', '').split(' ')[1];
};


/**
 * Куча функций помощников 
 */

export {
  ...
  typeIs
  ...
}

Подход №2

Создать директорию helpers, в ней создать index.js и в нём ПОДКЛЮЧАТЬ или управлять ПОДКЛЮЧЕНИЕМ функций. Привожу пример ниже.

Функция хелпер typeIs(так же наименован файл):


/**
 * typeIs
 * 
 * Returns data type
 *
 * @param {*} type
 * @return {string}
 */
export default type => {
  return {}.toString.call(type).replace('\]', '').split(' ')[1];
};

Файл index.js:

import typeIs from './typeIs';

...

/**
 * too much imports 
 */

...

export {
  ...
  typeIs
  ...
}

Мной отстаивается подход №2 так как:

  • разделяется сборка от реализации;
  • код становится более читаемым и понятным;
  • в случаем модуля, то видна архитектура;
  • мне так удобней)

Как решаются подобные проблемы в ваших командах?

2 ответа 2

6
+50

Если я правильно вас понял, то тут вопрос стоит. Разделить ли утилиты по отдельным файлам и импортировать их в index.js либо реализовать их в самом index.js? Если так то ответ и да и нет.

  1. Увеличение кода в одном файле, читабельность самого файла
  2. Увеличение файлов опять трудность. (тысячи файлов переключение поиск ....)

Я предпочитаю начинать с одного файла и выносить (рефакторить) только по надобности. Делать сразу не вижу надобности для одной или 2 маленьких функций. Мнение остальных может не совпадать, в холивар не звать.

2
  • Спасибо за ответ. Вы за 3 вариант - я его не стал описывать.
    – doox911
    Commented 20 июл. 2020 в 11:15
  • 1
    В программировании всего не учтешь лишь можно следовать практикам. Вы создаете, а не копируете. Как делают все - стараются не мешать стили. Commented 20 июл. 2020 в 11:55
2

Заведите директорию utils, а для каждой отдельной фунции-хелпера свой файл.

Функции экспортируете.

Далее через именованный импорт добавляете их в нужные Вам файлы:

// внешней файл

export const helperFunction = () => {
    console.log("test")
}

// файл, где требуется данный хелпер

import { helperFunction } from "./utils/helperFunction"
2
  • Спасибо за ответ. Я так и делаю(но разношу ещё и по логике), но вопрос в том, как поступать на ранних этапах и как у вас в проекте поступают.
    – doox911
    Commented 20 июл. 2020 в 11:17
  • Красивее index.js, тогда можно не писать название функции после utils
    – doox911
    Commented 20 июл. 2020 в 11:46

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.