Надо ли выносить обработчик закрытия модального окна в отдельный модуль?
Есть следующий обработчик закрытия модального окна
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>
Все работает так как необходимо, но не совсем уверен что сделал правильно, может есть другой способ реализовать необходимый мне функционал, или в данном конкретном случае лучше реализацию обработчика закрытия модального окна не выносить в отдельный метод?
Ответы (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>
Ещё обращу внимание, что это не совсем утилита. Это все еще часть логики модалки. Но это уже вопрос организации кода и контекста