Как правильно/красивее написать код js?

Question

[Машка]

Есть абсолютно разные элементы (сердечко избранного, кнопка подписки и пр.). По клику у них добавляется один и тот же класс active (стили для каждого элемента этому классу прописаны разные).
По идее мне достаточно всего одной функции с toggle.
Как лучше?

• Использовать onckick передавай туда класс элемента (только не пойму как это сделать onclick="toggleActive('follow-brand')" ?)
  
• Добавить всем элементам одинаковый атрибут data и использовать eventListener и this?
  

Или есть ещё какое-то решение?

Answer 1

[Smirator]

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

// Для одиночного элемента:
let div = document.getElementById('div');

function addClass(el, event, className){
    el.addEventListener(event, function(){
        el.classList.add(className);
    });
};

addClass(div, 'click', 'test'); //функцию вызываем в любом нужном месте. Передаем название переменной, событие и класс

// Для массива элементов:
let elClass = Array.from(document.querySelectorAll('.elClass'));
console.log(elClass);

 function adClassArr(targetArr, event, className) {
    targetArr.forEach(target => target.addEventListener(event, function(){
        target.classList.add(className);
    }));
}


adClassArr(elClass, 'click', 'test'); //функцию вызываем в любом нужном месте. Передаем название переменной, событие и класс

Comments

[Машка]

Ну вот да, Вы всё-таки предлагаете вешать классы и делегирование. А вот можете подскадать тогда, я использую БЭМ. Классы для стилей и JS как должны отличаться в html?

[Smirator]

Машка, Не очень понял ваш вопрос

[Машка]

Smirator, можно ли использовать названия классов по БЭМ для JS?

[Smirator]

Машка, да. Название класса в JS указывается в ''. Проблем быть не должно

Answer 2

[dollar]

Самый оптимальный подход в большинстве случаев - использовать addEventListener() и делегирование событий. Это более гибкий и масштабируемый способ, который позволяет обрабатывать события более эффективно и поддерживает хорошую структуру кода.

Comments

[Машка]

Ну то есть не будет криво смотреться, если я абсолютно разным элементам добавлю один и тот же класс или data-*?

[dollar]

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

Answer 3

[Rsa97]

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

Comments

[Машка]

Мне-то по-хорошему надо вёрстку продемонстрировать. А дальше бекенд может свой обработчик написать и заменить функцию в oncklick, класс или data-*.
Другое дело, я не могу определиться, что выбрать)

[Rsa97]

Машка, Бэкенд не должен заниматься фронтом. А запрос генерирует JS на фронте.

[Машка]

Я не фронт, а верстальщик)
JS только изучаю, поэтому у меня чисто оформленческий вопрос, как красивее сделать, чтобы программисту было приятнее разбирать мою вёрстку. Понятно, что ему было бы приятнее, если бы я всё за него сделала, но мне за это не платят)

[Rsa97]

Машка, Программисту будет гораздо приятнее, если вы напишете не JS, а документацию по активным элементам вёрстки и используемым для них классам.

[Машка]

Rsa97, спасибо за годный совет)

[Сергей delphinpro]

Машка, совет, действительно годный. Не стоит писать то, что потом все равно будет выкинуто. Лучше сверстать отдельную страницу с такими элементами, где они будут представлены во всех своих состояниях безо всякой динамики. Просто чтобы программисты потом, когда будут обвешивать логикой, видели, как визуализировать необходимое состояние.

[Машка]

Сергей delphinpro, ну а всё-таки не очевиднее просто использовать комментарии? Типа:
"К этому элементу по клику добавляется active"
Не уверена, что прыгать по нескольким страницам или разбирать отдельную декларацию проще, чем комментарии прям в контексте (но могу быть не права).