x
 
Дима Шишкин
31 мая 2018
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

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


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

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

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

Яваскрипт

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">Кнопка</div>'))
})

// Позже
elements.off('click')

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

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

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

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

По теме:

P. S. Это был совет о веб-разработке. Хотите знать всё о коде, тестах, фронтенд-разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор закрыт. Опоздавшим: оставьте нам почту, и мы напишем вам, пока есть свободные места.
 

Поделиться
Отправить

Комментарии

Chuvelev Evgeny
2 июня 2018

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

Sasha Beep
7 июня 2018

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


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Как бороться с багами? Часть восьмая: порефлексировать 6 Как бороться с багами? Часть седьмая: исправить




Недавно всплыло

5 3 Пожалуйста, подскажите, как можно написать лучше? Как избавиться от сухости? 1 Как оформить портфолио маркетологу? 1