Шпаргалка по переходу от jQuery к vanilla JavaScript

От автора: jQuery по-прежнему является полезной и прагматичной библиотекой, но есть все больше шансов на то, что вы не будете зависеть от нее для выполнения основных задач, таких как выбор элементов, их стилизация, анимация и выборка данных — вещи, которые были хороши в jQuery. Благодаря широкой поддержке браузерами ES6 (более 96% на момент написания статьи) сейчас, вероятно, самое время отойти от jQuery.

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

Выбор элементов

Выбор одного или нескольких элементов DOM для чего-либо является одной из основных задач jQuery. Эквивалентом $() или jQuery() в JavaScript является querySelector() или querySelectorAll(), который, как и в jQuery, можно вызвать с помощью селектора CSS.

// jQuery, выбирает все экземпляры .box
$(".box"); // Вместо этого выбираем первый экземпляр .box
document.querySelector(".box"); // …или все экземпляры.box document.querySelectorAll(".box");

Запуск функции для всех элементов в выборке

querySelectorAll() возвращает, как и в jQuery, массив элементов, с которыми вы можете работать. Но, в то время как с jQuery вы можете запустить функцию для всей выборки, просто вызвав ее для объекта jQuery, с помощью JavaScript вам придется перебрать массив элементов через цикл:

// С jQuery
// Скрыть все экземпляры .box
$(".box").hide(); // Без jQuery
// Перебираем через цикл массив элементов, чтобы скрыть все экземпляры.box
document.querySelectorAll(".box").forEach(box => { box.style.display = "none" }

Поиск одного элемента в другом

Обычным шаблоном jQuery является выбор элемента внутри другого элемента с использованием .find(). Вы можете достичь того же, ограничивая выделение для дочерних элементов, вызывая querySelector или querySelectorAll для элемента:

// С jQuery
// Выбираем первый экземпляр .box в .container
var container = $(".container");
// Позже...
container.find(".box"); // Без jQuery
// Выбираем первый экземпляр .box в .container
var container = document.querySelector(".container");
// Позже...
container.querySelector(".box");

Прохождение дерева с помощью parent(), next() и prev()

Если вы хотите пройти DOM, чтобы выбрать одноуровневый или родительский элемент относительно другого элемента, вы можете получить доступ к ним через nextElementSibling, previousElementSibling и parentElement для этого элемента:

// С jQuery
// Возвращаем следующий, предыдущий и родительский элемент для .box
$(".box").next();
$(".box").prev();
$(".box").parent(); // Без jQuery
// Возвращаем следующий, предыдущий и родительский элемент для .box
var box = document.querySelector(".box");
box.nextElementSibling;
box.previousElementSibling;
box.parentElement;

Работа с событиями

Существует множество способов прослушивания событий в JQuery, но не зависимо о того, используете ли вы .on(), .bind(), .live или .click(), вы можете сделать это с по делать с помощью JavaScript эквивалента .addEventListener:

// С jQuery
$(".button").click(function(e) { /* обработка события клика */ });
$(".button").mouseenter(function(e) { /* обработка события клика */ });
$(document).keyup(function(e) { /* обработка события отжатия клавиши */ }); // С jQuery
document.querySelector(".button").addEventListener("click", (e) => { /* ... */ });
document.querySelector(".button").addEventListener("mouseenter", (e) => { /* ... */ });
document.addEventListener("keyup", (e) => { /* ... */ });

Прослушивание событий для динамически добавляемых элементов

Метод jQuery .on() позволяет работать с «интерактивными» обработчиками событий, когда вы прослушиваете события для объектов, которые динамически добавляются в DOM. Чтобы сделать нечто подобное без jQuery, вам нужно добавить обработчик событий к элементу, когда вы добавляете его в DOM:

// С jQuery
// Обработка события клика для элемента .search-result, // даже когда он добавляется в DOM программно
$(".search-container").on("click", ".search-result", handleClick); // Без jQuery
// Создаем и добавляем элемент в DOM
var searchElement = document.createElement("div");
document.querySelector(".search-container").appendChild(searchElement);
// Добавляем прослушиватель события для элемента
searchElement.addEventListener("click", handleClick);

Запуск и создание событий

Эквивалент для ручного запуска событий с помощью trigger() можно реализовать с помощью вызова dispatchEvent(). Метод dispatchEvent() может быть вызван для любого элемента, он принимает Event качестве первого аргумента:

// С jQuery
// Запуск myEvent для документа и .box
$(document).trigger("myEvent");
$(".box").trigger("myEvent"); // Без jQuery
// Создаем и отправляем myEvent
document.dispatchEvent(new Event("myEvent"));
document.querySelector(".box").dispatchEvent(new Event("myEvent"));

Стили элементов

Если вы вызываете .css() для элемента, чтобы изменить его встроенный CSS с помощью jQuery, вам нужно использовать JavaScript .style и присвоить значения его различным свойствам для достижения того же эффекта:

// С jQuery
// Выбираем .box и изменяем цвет текста на #000
$(".box").css("color", "#000"); // Без jQuery
// Выбираем первый .box и изменяем цвет текста на #000
document.querySelector(".box").style.color = "#000";

С помощью jQuery вы можете передать объект с парами ключ-значение для стилизации нескольких свойств одновременно. В JavaScript вы можете установить значения по одному или задать строку всех стилей:

// С jQuery
// Передаем несколько стилей
$(".box").css({ "color": "#000", "background-color": "red"
}); // Без jQuery
// Устанавливаем цвет - #000 и фон - red
var box = document.querySelector(".box");
box.style.color = "#000";
box.style.backgroundColor = "red"; // Устанавливаем все стили за раз (и переопределяем все существующие стили)
box.style.cssText = "color: #000; background-color: red";

hide() и show()

.hide() и .show() — это удобные методы, эквивалентные доступу к свойству .style и установке для display none и block:

// С jQuery
// Скрываем и отображаем элемент
$(".box").hide();
$(".box").show(); // Без jQuery
// Скрываем и отображаем элемент, изменяя "display" на block и none
document.querySelector(".box").style.display = "none";
document.querySelector(".box").style.display = "block";

Полная загрузка документа

Если вам нужно дождаться полной загрузки DOM, прежде чем, например, присоединять события к объектам в DOM, вы обычно используете в jQuery $(document).ready() или обычное сокращение $(). Мы можем легко создать аналогичную функцию, прослушивая DOMContentLoaded:

// С jQuery
$(document).ready(function() { /* Делаем что-то после того, как DOM полностью загружен */
}); // Без jQuery
// Определяем удобный метод и используем его
var ready = (callback) => { if (document.readyState != "loading") callback(); else document.addEventListener("DOMContentLoaded", callback);
} ready(() => { /* Делаем что-то после того, как DOM полностью загружен */ });

Работа с классами

Вы можете легко получить доступ к классам и работать с ними через свойство classList для переключения, замены, добавления и удаления классов:

// С jQuery
// Добавляем, удаляем и переключаем класс "focus"
$(".box").addClass("focus");
$(".box").removeClass("focus");
$(".box").toggleClass("focus"); // Без jQuery
// Добавляем, удаляем и переключаем класс "focus"
var box = document.querySelector(".box");
box.classList.add("focus");
box.classList.remove("focus");
box.classList.toggle("focus");

Если вы хотите удалить или добавить несколько классов, то можете просто передать несколько аргументов в .add() и .remove():

// Добавляем классы "focus" и "highlighted", а затем удаляем их
var box = document.querySelector(".box");
box.classList.add("focus", "highlighted");
box.classList.remove("focus", "highlighted");

Если вы переключаете два класса, которые являются взаимоисключающими, вы можете получить доступ к свойству classList и вызвать .replace() для замены одного класса другим:

// Удаляем класс "focus" и добавляем "blurred"
document.querySelector(".box").classList.replace("focus", "blurred");

Проверка наличия у элемента класса

Если вы хотите запустить функцию в зависимости от того, имеет ли элемент определенный класс, вы можете заменить .hasClass() из JQuery на .classList.contains():

// С jQuery
// Проверяем, имеет ли .box класс "focus", и делаем что-то
if ($(".box").hasClass("focus")) { // Делаем что-то...
} // Без jQuery
// Проверяем, имеет ли .box класс "focus", и делаем что-то
if (document.querySelector(".box").classList.contains("focus")) { // Делаем что-то...
}

Сетевые запросы с помощью .get() или .ajax()

fetch() позволяет создавать сетевые запросы аналогично методам jQuery ajax() и get(). fetch() принимает URL-адрес в качестве аргумента и возвращает Promise, который можно использовать для обработки ответа:

// С jQuery
$.ajax({ url: "data.json" }).done(function(data) { // ... }).fail(function() { // Обработка ошибки }); // Без jQuery
fetch("data.json") .then(data => { // Обработка данных }).catch(error => { // Обработка ошибки });

Создание элементов

Если вы хотите динамически создать элемент в JavaScript, чтобы добавить его в DOM, вы можете вызвать createElement() для document и передать имя тега, чтобы указать, какой элемент вы хотите создать:

// Создаем div и span
$("<div/>");
$("<span/>"); // Создаем div и span
document.createElement("div");
document.createElement("span");

Если вы хотите добавить в эти элементы некоторое содержимое, вы можете просто установить свойство textContent или создать текстовый узел с помощью createTextNode и добавить его в элемент:

var element = document.createElement("div");
element.textContent = "Text"
// или создаем textNode и добавляем его
var text = document.createTextNode("Text");
element.appendChild(text);

Обновление DOM

Если вы хотите изменить текст элемента или добавить новые элементы в DOM, есть вероятность, что вы столкнетесь с innerHTML(), но его использование может быть сопряжено с опасностью атак межсайтового скриптинга (XSS). Хотя вы можете обойти это и очистить HTML, есть несколько более безопасных альтернатив.

Если вы хотите только прочитать или обновить текст элемента, вы можете использовать свойство объекта textContent для возврата текущего текста или его обновления:

// С jQuery
// Обновление текста .button
$(".button").text("New text");
// Считывание текста .button
$(".button").text(); // Возвращает "New text" // Без jQuery
// Обновление текста .button
document.querySelector(".button").textContent = "New text";
// Считывание текста .button
document.querySelector(".button").textContent; // Возвращает "New text"

Если вы создаете новый элемент, вы можете добавить этот элемент к другому, используя метод родительского элемента appendChild():

// Создаем элемент div и добавляем его в .container
$(".container").append($("<div/>")); // Создаем элемент div и добавляем его в .container
var element = document.createElement("div");
document.querySelector(".container").appendChild(element);

И теперь все вместе, как создать div, обновить его текст и класс и добавить его в DOM:

// Создаем div
var element = document.createElement("div"); // Обновляем его класс
element.classList.add("box"); // Задаем текст
element.textContent = "Text inside box"; // Добавляем элемент в .container
document.querySelector(".container").appendChild(element);

Заключение

Это ни в коем случае не исчерпывающее руководство по любым из используемых здесь методам JavaScript, но я надеюсь, что это будет полезным руководством, если вы хотите отойти от jQuery. В итоге, вот методы, которые мы рассмотрели:

Автор: Tobias Bjerrome Ahlin

Источник: https://tobiasahlin.com

Редакция: Команда webformyself.