Сегодня многие разработчики все еще используют jQuery для различных задач в веб-разработке. Но со временем это библиотека теряет свою актуальность и переход к нативному JavaScript уже становится более выгодным. Нативный JavaScript по сравнению с библиотеками (такими как jQuery) - позволяет писать код более легким и простым для тестирования и поддержки. Это также позволяет увеличить скорость работы при использовании современных браузеров.
Перед тем, как начать переход на нативный JavaScript, необходимо знать основы языка JavaScript. Если вы еще не освоили его основы, я рекомендую начать с изучения основных понятий.(примеры сайтов: https://learn.javascript.ru/, https://developer.mozilla.org/ru/, https://doka.guide/)
Одним из основных моментов в переходе с jQuery на нативный JavaScript является понимание селекторов. Селекторы используются для поиска элементов на странице. В JavaScript они реализованы в виде метода document.querySelector() (или document.querySelectorAll() для множественного выбора).
Для работы с DOM в нативном JavaScript можно использовать методы, похожие на те, которые используются в jQuery, такие как .addClass(), .removeClass(), .hide() и .show().
Пример использования этих методов для добавления или удаления класса из элемента:
Код:
// jQuery - добавление/удаление класса для элемента
const element = $('.elem');
element.addClass('newClass');
element.removeClass('oldClass');
Код:
// JavaScript - добавление/удаление класса для элемента
var element = document.querySelector('.elem');
element.classList.add('newClass');
element.classList.remove('oldClass');
Также следует отметить, что для манипулирования элементами DOM можно использовать более мощные методы, такие как document.createElement(), document.appendChild(), document.getElementById() и другие.
Примеры перехода на нативный JavaScript:
• Доступ к данным формы:
Код:
// jQuery - получить значения с контролов формы
const name = $('#name').val();
const age = $('#age').val();
Код:
// JavaScript - получить значения с контролов формы
const name = document.querySelector('#name').value;
const age = document.querySelector('#age').value;
• Отображение/скрытие элемента:
Код:
// jQuery скрыть/показать элемент
const element = $('#element');
element.hide(); // hide
element.show(); // show
Код:
// JavaScript скрыть/показать элемент
const element = document.querySelector('.element');
element.style.display = 'none'; // hide
element.style.display = 'block'; // show
• Изменение содержимого элементов:
Код:
// jQuery - изменить значение/контент элемента
const element = $('.element');
const content = 'Content to change';
element.innerHTML = content;
const input =$('.form_input');
const new_value = '123456';
input.val(new_value);
Код:
// JavaScript - изменить значение/контент элемента
const element = document.querySelector('.element');
const content = 'Content to change';
element.innerHTML = content;
const input = document.querySelector('.form_input');
const new_value = '123456';
input.value = new_value;
Как видно из примеров выше, нативный JavaScript может быть полезен даже при решении простых задач, которые можно решать с помощью jQuery. Тем не менее, нативный JavaScript более гибкий и позволяет решать более сложные задачи. Чтобы получить их разнообразие, следует начать понимать, как работать с нативным JavaScript.
Отдельно разберем $(document).ready()
Код:
// Пример кода с выдуманного проекта
<script>
$(document).ready(() => {
const element = $(‘.container’);
element.append(‘<div><%= Context.data.test%></div>’)
})
<script>
Доподлинно не известно, но скорее всего разработчик ожидает что его код будет выполнен после того, как загрузится весь контент на странице. Но тут ловушка от SPA-приложений - страница уже загружена и событие, которое срабатывает после загрузки - уже давно сработало. Поэтому в данном случае не поможет переход на DOMContentLoaded или onLoad. Чтоб добиться нужно эффекта, рекомендую почитать статью Ожидание события или элемента на форме или изучите возможности MutationObserver.
Есть еще один способ, который отработает в большинстве случаев - setTimeout
Код:
<script>
setTimeout(() => {
const element = document.querySelector(‘.container’);
element.insertAdjacentHTML('beforeend','<b>Any Content</b>');
}, 500)
</script>
Да, метод не надежный, но вполне себе альтернатива сложным функциям. Задержка в 500мс выбрана случайно - для своего проекта подбирайте данную величину эмпирически, начиная с 0.
Приглашаю в комменты - поделитесь тем, как вы заменяете jQuery
