23 февраля 2018

Как заменить jQuery на чистый Javascript

jQuery одна из самых популярных библиотек своего времени. Использовалась, да и часто до сих пор используется на многих сайтах для манипуляции DOM, AJAX запросов и прочего

Изначально она создавалась для решения проблем кросс-браузерности в работе JS-кода. Чтоб все было «четко» и работало везде. Также синтаксис был достаточно удобным для работы, что многим и сейчас по душе.

Однако в настоящее время среди frontend-разработчиков, ее использование сходит на «нет». Связано это в первую очередь с прогрессом самого языка JavaScript современная версия которого (ES6) во всю используется повсеместно, а браузеры достаточно хорошо прогрессируют в его поддержке. Использование jQuery в этом контексте становится моветоном…

По теме:

Дабы помочь начинающим разработчикам давайте рассмотрим альтернативы типичным методам jQuery и заменим их на «чистый» Javascript.


Готовность DOM

Метод ready используется в jQuery для выполнения кода после загрузки всего DOM. Благодаря этому вы можете быть уверены в том, что функции анимации или изменения элементов на сайте, будут работать правильно. До выхода версии jQuery 3.0 типичный вызов был таков:

$(document).ready(function() {
// Здесь ваш код

});

А как проверить готовность DOM на чистом javascript?

Да достаточно просто:

document.addEventListener("DOMContentLoaded", function(){
// Handler when the DOM is fully loaded
});

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

window.addEventListener('load', function() {
console.log('ALL Loaded!');
});