Памятка по переходу с jQuery на ванильный JavaScript

  ✎ PERSHYTUT  

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

Памятка по переходу с jQuery на ванильный JavaScript

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

Выбор элементов События .css() Документ готов Классы .ajax() Создание элементов HTML и текст

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

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

 // jQuery, select all instances of (jQuery, выберите все элементы) .box
$(".box");

// Instead, select the first instance of (Вместо этого выберите первый элемент) .box
document.querySelector(".box");

// …or select all instances of (или выберите все элементы) .box  
document.querySelectorAll(".box");

Выполнение функции для всех элементов в выделении

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

 // With jQuery (с jQuery)
// Hide all instances of (Скрыть все элементы) .box
$(".box").hide();

// Without jQuery (Без jQuery)
// Iterate over the nodelist of elements to hide all instances of (Переберите список узлов элементов, чтобы скрыть все элементы) .box
document.querySelectorAll(".box").forEach(box => { box.style.display = "none" })

Нахождение одного элемента внутри другого

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

 // With jQuery (с jQuery)
// Select the first instance of (Выберите первый экземпляр) .box within (внутри) .container
var container = $(".container");
// Later... (В дальнейшем)
container.find(".box");

// Without jQuery (Без jQuery)
// Select the first instance of (Выберите первый экземпляр) .box within (внутри) .container
var container = document.querySelector(".container");
// Later... (В дальнейшем)
container.querySelector(".box");

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

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

 // With jQuery (с jQuery)
// Return the next, previous, and parent element of (Возвращает следующий, предыдущий и родительский элемент из) .box
$(".box").next();
$(".box").prev();
$(".box").parent();

// Without jQuery (Без jQuery)
// Return the next, previous, and parent element of (Возвращает следующий, предыдущий и родительский элемент из) .box
var box = document.querySelector(".box");
box.nextElementSibling;
box.previousElementSibling;
box.parentElement;

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

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

 // With jQuery (с jQuery)
$(".button").click(function(e) { /* handle click event */ });
$(".button").mouseenter(function(e) {  /* handle click event */ });
$(document).keyup(function(e) {  /* handle key up event */  });

// Without jQuery (Без jQuery)
document.querySelector(".button").addEventListener("click", (e) => { /* ... */ });
document.querySelector(".button").addEventListener("mouseenter", (e) => { /* ... */ });
document.addEventListener("keyup", (e) => { /* ... */ });

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

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

 // With jQuery (с jQuery)
// Handle click events (Обработка событий щелчка мыши) .search-result elements, 
// even when they're added to the DOM programmatically (даже если они добавлены в DOM программно)
$(".search-container").on("click", ".search-result", handleClick);

// Without jQuery (Без jQuery)
// Create and add an element to the DOM (Создание и добавление элемента в DOM)
var searchElement = document.createElement("div");
document.querySelector(".search-container").appendChild(searchElement);
// Add an event listener to the element (с jQuery)
searchElement.addEventListener("click", handleClick);

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

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

 // With jQuery (с jQuery)
// Trigger myEvent on document and (Запуск события myEvent на документе и) .box
$(document).trigger("myEvent");
$(".box").trigger("myEvent");

// Without jQuery (Без jQuery)
// Create and dispatch myEvent (Создание и отправка события myEvent)
document.dispatchEvent(new Event("myEvent"));
document.querySelector(".box").dispatchEvent(new Event("myEvent"));

Элементы стиля

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

 // With jQuery (с jQuery)
// Select (Выбрать) .box and change text color to (и изменить цвет текста на) #000
$(".box").css("color", "#000");

// Without jQuery (Без jQuery)
// Select the first (Выбрать первый) .box and change its text color to (и изменить цвет его текста на) #000
document.querySelector(".box").style.color = "#000";

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

 // With jQuery (с jQuery)
// Pass multiple styles (Передать несколько стилей)
$(".box").css({
  "color": "#000",
  "background-color": "red"
});

// Without jQuery (Без jQuery)
// Set color to (Установить цвет на) #000 and background to red (а фон - красным)
var box = document.querySelector(".box");
box.style.color = "#000";
box.style.backgroundColor = "red";

// Set all styles at once (and override any existing styles) (Установить все стили сразу (и переопределить все существующие стили))
box.style.cssText = "color: #000; background-color: red";

hide() а также show()

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

 // With jQuery (с jQuery)
// Hide and show and element (Скрыть и показать и элемент)
$(".box").hide();
$(".box").show();

// Without jQuery (Без jQuery)
// Hide and show an element by changing (Скрыть и показать элемент, изменяя) "display" to (на) block and (или) none
document.querySelector(".box").style.display = "none";
document.querySelector(".box").style.display = "block";

Документ готов

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

 // With jQuery (с jQuery)
$(document).ready(function() { 
  /* Do things after DOM has fully loaded (Выполнять действия после полной загрузки DOM) */
});

// Without jQuery (Без jQuery)
// Define a convenience method and use it (Определите удобный метод и используйте его)
var ready = (callback) => {
  if (document.readyState != "loading") callback();
  else document.addEventListener("DOMContentLoaded", callback);
}

ready(() => { 
  /* Do things after DOM has fully loaded  (Выполнять действия после полной загрузки DOM) */ 
});

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

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

 // With jQuery (с jQuery)
// Add, remove, and the toggle the (Добавить, удалить и переключить) "focus" class
$(".box").addClass("focus");
$(".box").removeClass("focus");
$(".box").toggleClass("focus");

// Without jQuery (Без jQuery)
// Add, remove, and the toggle the (Добавить, удалить и переключить) "focus" class
var box = document.querySelector(".box");
box.classList.add("focus");
box.classList.remove("focus");
box.classList.toggle("focus");

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

 // Add (Добавить) "focus" and (и) "highlighted" classes, and then remove them (а затем удалить их)
var box = document.querySelector(".box");
box.classList.add("focus", "highlighted");
box.classList.remove("focus", "highlighted");

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

 // Remove the (Удалить) "focus" class and add (и добавить) "blurred"
document.querySelector(".box").classList.replace("focus", "blurred");

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

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

 // With jQuery (с jQuery)
// Check if (Проверить, если) .box has a class of (имеет класс) "focus", and do something (и сделать что-то)
if ($(".box").hasClass("focus")) {
  // Do something... (Сделать что-то)
}

// Without jQuery (Без jQuery)
// Check if (Проверить, если) .box has a class of (имеет класс) "focus", and do something (и сделать что-то)
if (document.querySelector(".box").classList.contains("focus")) {
  // Do something... (Сделать что-то)
}

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

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

 // With jQuery (с jQuery)
$.ajax({
    url: "data.json"
  }).done(function(data) {
    // ...
  }).fail(function() {
    // Handle error (Ошибка обработки)
  });

// Without jQuery (Без jQuery)
fetch("data.json")
  .then(data => {
    // Handle data (Обработка данных)
  }).catch(error => {
    // Handle error (Ошибка обработки)
  });

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

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

 // Create a div & span (Создать div и span)
$("<div/>");
$("<span/>");

// Create a div and a span (Создать div и span)
document.createElement("div");
document.createElement("span");

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

 var element = document.createElement("div");
element.textContent = "Text"
// or create a textNode and append it (или создать textNode и добавить его)
var text = document.createTextNode("Text");
element.appendChild(text);

Обновление DOM

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

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

 // With jQuery (с jQuery)
// Update the text of a (Обновить текст в) .button
$(".button").text("New text");
// Read the text of a (Прочитать текст) .button
$(".button").text(); // Returns "New text"

// Without jQuery (Без jQuery)
// Update the text of a (Обновить текст в) .button
document.querySelector(".button").textContent = "New text";
// Read the text of a (Прочитать текст) .button
document.querySelector(".button").textContent; // Returns "New text"

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

 // Create div element and append it to (Создайте элемент div и добавьте его в) .container
$(".container").append($("<div/>"));

// Create a div and append it to (Создайте элемент div и добавьте его в) .container
var element = document.createElement("div");
document.querySelector(".container").appendChild(element);

Вот как создать div, обновить его текст и класс и добавить его в DOM:

 // Create a (Создать) div
var element = document.createElement("div");

// Update its (Обновить) class
element.classList.add("box");

// Set its text (Установите текст)
element.textContent = "Text inside box";

// Append the element to (Добавить элемент в) .container
document.querySelector(".container").appendChild(element);

В итоге

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

Источники:
  1. машинный перевод
  2. Cheat sheet for moving from jQuery to vanilla JavaScript

Комментарии

Отправить комментарий