Функции утилиты экспортируются напрямую по сравнению с классом утилиты

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

class Util {
   redirectIfAuthenticated = (isAuthenticated, history, screen) => {
      if (isAuthenticated) 
         history.push(screen);
   }
}

export default new Util();

ПРОТИВ

export default redirectIfAuthenticated = (isAuthenticated, history, screen) => {
   if (isAuthenticated) 
      history.push(screen);
}

Какой подход здесь лучше и почему?

🤔 А знаете ли вы, что...
Синтаксис JavaScript схож с синтаксисом языка программирования Java, но они не связаны.


2
175
5

Ответы:

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

class Util {
   redirectIfAuthenticated = (isAuthenticated, history, screen) => {
      if (isAuthenticated) 
         history.push(screen);
   }
  anotherFunction = () => {
     // your code

}

export default Util;

Таким образом, вы можете определить здесь несколько функций и импортировать эти функции из класса util для использования в любом месте.


Класс можно использовать, когда его функции тесно связаны друг с другом. Если ваши утилиты не связаны друг с другом, вы можете использовать второй подход. Я бы рекомендовал использовать второй подход, поскольку обычно функции util не связаны друг с другом. util-функции разрабатываются таким образом, чтобы их можно было повторно использовать в других компонентах.


Использование отдельных функций обычно является предпочтительным способом из-за встряхивания дерева.

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


Решено

Классы Singleton часто считаются антипаттернами. Util в данном случае является антипаттерном. Класс используется как пространство имен, в то время как модули уже существуют для предоставления пространств имен.

Использование экспорта по умолчанию для нескольких экспортов предотвратит их дрожание дерева.

export default redirectIfAuthenticated = ... является ошибкой, это приводит к созданию глобальной переменной redirectIfAuthenticated в свободном режиме и к ошибке в строгом режиме.

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

export default (isAuthenticated, history, screen) => { ... };

В случае, если существует вероятность того, что может быть несколько экспортов (даже если в настоящее время есть только один), можно использовать именованные экспорты:

export const redirectIfAuthenticated = (isAuthenticated, history, screen) => { ... };

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

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