Школа
Веб-разработка

Почему вы используете jQuery для хождения по дереву и управления событиями?

Расскажите, почему вы используете jQuery для хождения по дереву и управления событиями. В чём преимущество перед «чистым» JS?

Дима Шишкин
31 мая 2018
👁 2588   🗩2
Веб-разработка

Почему вы используете jQuery для хождения по дереву и управления событиями?

Расскажите, почему вы используете jQuery для хождения по дереву и управления событиями. В чём преимущество перед «чистым» JS?

Дима Шишкин
31 мая 2018
👁 2588   🗩2
Руст Кулматов
Фронтенд‑разработчик, преподаватель, соавтор движка электронных книг бюро
Полезно
 2
2
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

Так сложилость исторически.

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

Ко второй версии меня начала раздражать многословность стандартных методов, и я решил попробовать Джейквери. Например, выберем все элементы с определённым классом, создадим новый элемент при клике на них и позже удалим обработчик клика:

Яваскрипт
const elements = document.querySelectorAll('.element') // Нужно запомнить обработчик события, // иначе мы не сможем отключить его позже let clickHandler = function(element) { const shinyButton = document.createElement('button') shinyButton.classList.add('shiny') shinyButton.innerText = "Кнопка" this.appendChild(shinyButton) } for (let element of elements) { element.addEventListener('click', clickHandler) } // Позже for (let element of elements) { element.removeEventListener('click', clickHandler) }
Джейквери
const elements = $('.element') elements.on('click', function() { $(this).append($('<button class="shiny">Кнопка</button>')) }) // Позже elements.off('click')

Код на Джейквери получился лаконичней и понятней, поэтому мы стали использовать его в движке.

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

Чтобы решить эту проблему, мы постепенно внедряем Реакт, который позволяет нам отделить логику компонент от их внешнего вида.

Тем не менее, Джейквери остаётся удобным инструментом для несложных проектов и прототипов. Несмотря на то, что нативный Яваскрипт сейчас позволяет сделать практически всё, что умеет Джейквери, зачастую это многословнее или менее очевидно.

По теме:

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Полезно
 2
2
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

В случае работы с динамическим списком dom‑элементов, имеет смысл навешивать один обработчик на родительский элемент списка и использовать всплытие событий, вместо того чтобы навешивать обработчик на каждый dom‑элемент списка. Тем самым, вы бы могли избежать использования циклов.

CSS‑style селекторы в jQuery — это то, что подкупило всех, когда она появилась, и годится, конечно, не для всех. Обычно грань заканчивается там, где приходится писать свои конструкторы элементов. Как только они понадобились больше пары раз, становится сложно управлять всей лапшой, что написана.

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы