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

Нужен ли jQuery в 2022?

Николай
7 июля 2022
👁 7425   🗩2
Веб-разработка

Нужен ли jQuery в 2022?

Николай
7 июля 2022
👁 7425   🗩2
Игорь Петров
Разработчик, преподаватель Школы бюро
Полезно
 7
7
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

Джейквери живее всех живых :‑)

Синтаксическим сахаром называют расширение языка программирования, которое не влияет на поведение программы, но делает использование языка удобнее для программиста

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

Синтаксическим сахаром называют расширение языка программирования, которое не влияет на поведение программы, но делает использование языка удобнее для программиста

Яваскрипт
const elements = document.querySelectorAll('.el') // Нужно запомнить обработчик события, // иначе мы не сможем отключить его позже let clickHandler = 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 = $('.el') elements.on('click', () => { $(this).append($('<button class="shiny">Кнопка</button>')) }) // Позже elements.off('click')

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

Когда использовать Джейквери

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

Когда Джейквери не подходит

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

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

Если использовать Джейквери для разработки сложного интерфейса, то большую часть кода займёт служебный обвес: навешивание обработчиков событий, проверки наличия классов, обновление содержимого и атрибутов тегов. Ещё есть большой риск слишком плотно связать логику и вёрстку, усложнив поддержку и развитие проекта.

Для сложного интерфейса гораздо эффективнее и надёжнее использовать реактивные фреймворки, вроде Реакта или Вью. Они разделяют логику и представление, берут на себя синхронизацию вёрстки с данными, чтобы разработчики могли сконцентрироваться на написании бизнес‑логики.

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

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

Комментарии

Михаил Никифаев

Можно не подключать ради одного примера jQuery, ведь придётся учить его синтаксис. А так ли оно нужно, чтобы сократить код на 10 строк?

Например, можно использовать прототипы:

HTMLElement.prototype.append = function(html) {
  this.innerHTML += html;
}

И тогда можно написать просто:

for (let item of elements) {
  item.addEventListener('click', () => item.append('<button class="shiny">Кнопка</button>'));
}

Если мы вставляем новый элемент в самый конец, то совсем не нужно создавать объекты в js, навешивать классы и прочее. Можно сразу сделать innerHTML += ... и это будет правильно работать!

А если сделать функцию, которая принимает в качестве параметра ссылку на массив elements и ссылку на функцию‑обработчик, то потом будет удобно повторно использовать это в коде. И совсем не обязательно изучать jQuery и надеяться, что в будущем они там ничего не поменяют и не придётся переучиваться :‑)

Николай Полипин

Но зачем перебирать? Ведь в js корректнее навешивать обработчик на родительский элемент коллекции. Да хоть на body. И необязательно создавать элемент, ведь есть insertAdjacentHTML. Тогда пример на js будет выглядеть так:

function clickHandler(e) {
	if ( e.target.classList.contains("el") ) {
		e.target.insertAdjacentHTML("beforeend", '<button class="shiny">Кнопка</button>');
	}
}
document.body.addEventListener('click', clickHandler)

// Позже
document.body.removeEventListener('click', clickHandler)

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

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

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