Надо ли выносить обработчик закрытия модального окна в отдельный модуль?

Рейтинг: 0Ответов: 1Опубликовано: 08.02.2023

Есть следующий обработчик закрытия модального окна

const modalHideHandler = (evt) => {
  if(this.requestPending){
    evt.preventDefault();
  }
}

При отправке запроса на сервер переменная requestPending принимает значение true что препятствует закрытию модального окна, что бы не дублировать этот метод в разных компонентах хочу его вынести в отдельный модуль, после чего обработчик стал выглядеть следующим образом:

const modalHideHandler = (scope, evt) => {
  if (scope.requestPending) {
    evt.preventDefault();
  }
}

В компоненте использование обработчика modalHideHandler выглядит так:

<script>
import { modalHideHandler } from '../Utilities.js'
export default {
  methods:{
    modalHideHandler(evt) {
      return modalHideHandler(this, evt);
    }
  },
};
</script>

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

javascript инспекция-кода vue.js
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Имхо дублирование кода не всегда зло, тут нужно думать когда и что выносить, обращая внимание на контекст. Логика закрытия модалки (конкретно evt.preventDefault()) относится непосредственно к модалке, и отрывать ее и куда выносить я бы не стал. Как и scope.

На крайняк, если логика раздуется, можно вынести ее часть, не отвечающая за прямое управление модалкой:

const mustHide = (requestPending) => {
  if (!requestPending) {
    return true;
  }

  // что-то еще...

  return false;
}

И использовал так:

<script>
import { mustHide } from '../Utilities.js'; // <--
export default {
  methods: {
    modalHideHandler(evt) {
      if (!mustHide(this.requestPending)) {
        evt.preventDefault();
      }
    }
  },
};
</script>

Ещё обращу внимание, что это не совсем утилита. Это все еще часть логики модалки. Но это уже вопрос организации кода и контекста