Правильно ли использую jquery и ооп?

Question

[OneTwoThreeFourFive]

Вместо этого

$('.test').click( function() {
  $(this).remove();
});

Писать это

class Test {
    constructor(item) {
      this.wrapper = $(item);

      this.setClickEvent();
    }

    setClickEvent(item) {
      this.wrapper.click( () => {
        // do some things

        this.remove();
      });
    }

    remove() {
      // do some things
      this.wrapper.remove();
    }
  }

  new Test('.test');

Это простой пример, но бывает надо много разных действий для элемента или для вложенных элементов. Нормальный вариант или нет?

Comments

[Василий Банников]

Вроде ок. По крайней мере лучше, чем с использованием Jquery напрямую

[Fedor Vlasenko]

Не стоит писать бессмысленный код
Видя код jquery мы ясно понимаем как он работает и ваш код не гибок
не стоит писать, чтоб ухудшать читаемость

$('.test, #test2, .test3').click( function() {
  $(this).remove();
});

в jquery это 3 строки
незачем писать код ради кода
код должен быть краток и понятен
не стоит за уши притягивать решение если возможно решить все минимальным кодом

[OneTwoThreeFourFive]

Fedor Vlasenko,

Это понятно, что для этого примера первый вариант лучше. А если контактная форма? Есть события изменить, отправить, написать значение в поле, отметить чекбоксы и т.д. Каждый раз писать
$('.class-name').on

А если надо сделать изменения с основным элементом (контактная форма), то у каждой функции надо
var form = $(this).closest('form');

Это уже копирование одного и того же кода каждый раз.

[Fedor Vlasenko]

const $form = $('form');
$form.on('submit', e => {
    e.preventDefault();
    $.post('index.php', $form.serialize(), res => {
        console.log(res)
    })
}).on('input', ({target}) => {
    console.log(target)
})
//

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

[OneTwoThreeFourFive]

Не согласен с вами. Вы просто не поняли что я имею ввиду. Вы мне пишите примеры, которые касаются самого элемента на странице. А я использую (стараюсь делать правильно, вот и спрашиваю) class для логического представления элемента в ооп, описывая объект.

Например, надо проверить все ли поля были заполнены. В вашем примере вы будете проверять заполнены ли поля на событие submit. И как пример, вам надо проверить это и на событие change, чтобы убрать уведомление о том, что поле не заполнено, если пользователь ввёл значение.

Вы будете копировать один и тот же код в событие submit и в change?

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

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

[Сергей delphinpro]

OneTwoThreeFourFive, я для валидации использовал бы уже готовые решения. Либо запилил бы свое решение, но такое же универсальное, оформил его в виде пакета/плагина и так же использовал как стороннее, подключив в проект.

[OneTwoThreeFourFive]

Сергей delphinpro, а решение в виде класса нормальное или вы бы сделали что-то другое, может лучше?

Answer 1

[Сергей delphinpro]

KISS

Comments

[Дмитрий]

Это точно не про веб! ;D