mizutsune
@mizutsune
Frontend Developer

Имеет ли данный способ использования класса, подводные камни?

Есть такой вот класс:

class Utilities {
     static createElement(options) {
          // код функции
     }

     static showElement(options) {
          // код функции
     }

     static hideElement(options) {
          // код функции
     }
}


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

Utilities.createElement(config);

Вместо подобного варианта:

new Utilities().createElement(config);

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

И да, всё же понятное дело, что можно эти методы забросить в обычный объект и вызывать похожим образом или использовать какой либо другой способ создания сборника утилит, но меня интересует именно данный случай, поэтому хочу узнать, а имеет ли подводные камни такой подход использования класса и статичных методов ?

Например не возникнут ли проблемы, если использовать какой-то из методов, несколько раз с разными параметрами в пределах той или иной функции?

Пример:

function Component() {
  const heading = Utilities.createElement({
    id: "heading",
    content: "Hello World",
  });

  const message = Utilities.createElement({
    id: "message",
    content: "New Article",
  });

  return {
    heading: heading,
    message: message
  };
}


Или возможно ли возникновение ошибок или побочных эффектов в каких-то иных случаях?
  • Вопрос задан
  • 92 просмотра
Решения вопроса 2
DarkCoder30
@DarkCoder30
Tech Lead
Статический класс вполне может использоваться как обычный контейнер для набора свойств и методов, так что смело используйте.
Ответ написан
@GrayHorse
Нормально.

Из минусов — не будет работать три шейкинг (Tree shaking) при сборке кода бандлерами (Vite.js (Rollup.js), например). Все методы будут добавлены в бандл, даже если используется только один. Т.е. весь класс целиком.

Альтернативный способ:
// element-util.js

export function createElement(options) {
  // код функции
}

export function showElement(options) {
  // код функции
}

export function hideElement(options) {
  // код функции
}


import {createElement} from "./element-util.js";

function Component() {
  const heading = createElement({
    id: "heading",
    content: "Hello World",
  });

  const message = createElement({
    id: "message",
    content: "New Article",
  });

  return {heading, message};
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы