Суббота, 02 мая 2020 16:21

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

Оцените материал

(3 голосов)

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

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

Мы расскажем, как перейти к обычному JavaScript, основываясь на этих концепциях и функциях:

Выборка элементов
События
Использование css()
Окончание загрузки документа
CSS-классы
ajax()
Создание элементов
HTML и текст

Примечание mattweb: в примерах кода, представленных в статье используются стрелочные функции. Ознакомиться с ними можно здесь

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

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

JavaScript

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

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

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

JavaScript

// c jQuery
// Скрываем все элементы класса .box
$(".box").hide();

// Без jQuery
// Обходим элементы в цикле и скрываем все элементы класса .box
document.querySelectorAll(".box").forEach(box => { box.style.display = "none" });

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

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

JavaScript

// С 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 над текущим элементом.

JavaScript

// с 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():

JavaScript

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

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

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

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

JavaScript

// С jQuery
// Обрабатываем событие click над элементами класса .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 (событие) в качестве первого аргумента.

JavaScript

// C jQuery
// Обрабатываем событие  myEvent над документом и элементом .box
$(document).trigger("myEvent");
$(".box").trigger("myEvent");

// Без jQuery
// Создаем и обрабатываем myEvent
document.dispatchEvent(new Event("myEvent"));
document.querySelector(".box").dispatchEvent(new Event("myEvent"));

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

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

JavaScript

// С jQuery
// Выбираем элемент .box и меняем цвет текста на #000
$(".box").css("color", "#000");

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

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

JavaScript

// С jQuery
// Передаем объект с несколькими CSS-стилями
$(".box").css({
  "color": "#000",
  "background-color": "red"
});

// Без jQuery
// Установим цвет текста #000 и фон – красным
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.

JavaScript

// С 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:

JavaScript

// С jQuery
$(document).ready(function() { 
  /* Код, которому нужна полная загрузка DOM */
});

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

ready(() => { 
  /* Код, которому нужна полная загрузка DOM */ 
});

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

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

JavaScript

// С 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():

JavaScript

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

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

JavaScript

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

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

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

JavaScript

// С 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, который вы можете использовать для обработки ответа:

JavaScript

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

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

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

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

JavaScript

// Создаем div & span
$("");
$("");

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

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

JavaScript

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

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

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

JavaScript

// С 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():

JavaScript

// Создаем элемент div и добавляем его в .container
$(".container").append($(""));

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

Соберем вместе код, который создаёт div, обновляет его текст и класс и добавляет его в DOM:

JavaScript

// Создаем div
var element = document.createElement("div");

// Обновляем его class
element.classList.add("box");

// Добавляем текст
element.textContent = "Text inside box";

// Добавляем элемент в .container
document.querySelector(".container").appendChild(element);

Итоги

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

Перечислим методы, рассмотренные в статье:

Выбор элементов с помощью querySelector и querySelectorAll
Обработка событий с помощью addEventListener
Обновление CSS-стилей через свойства style
Работа с классами через свойство classList
AJAX-запросы с помощью fetch
Создание событий с помощью dispatchEvent
Создание элементов методом createElement
Обновление текста через свойство textContent
Добавление элементов в DOM методом appendChild

Оригинал статьи: Cheat sheet for moving from jQuery to vanilla JavaScript

Перевод: Земсков Матвей

Прочитано 5004 раз

Опубликовано в JavaScript, jQuery

Другие материалы в этой категории: « Создаем красивый индикатор загрузки страницы с pace.js Ленивая (lazy load) загрузка изображений с Progressively »

	string(1) "1"
====string(1) "1"
====int(1)
====string(1) "1"
====bool(true)

Наверх