https://habr.com/ru/post/508634/- JavaScript
- Разработка веб-сайтов
Я никогда не работала профессиональным фронтенд-разработчиком, и хотя уже 15 лет пишу HTML/CSS/JS для небольших побочных проектов, но все проекты были довольно маленькими. Бывает, что я не пишу на Javascript в течение многих лет между этими проектами, и часто не уверена в том, что всё делаю правильно.
Отчасти поэтому я часто использовала библиотеки! Десять лет назад я использовал jQuery, а где-то с 2017 года для моих маленьких проектов много использую vue.js (можете посмотреть
небольшую игру типа «сапёр», которую я сделала в качестве вступления к Vue).
Но на прошлой неделе, впервые за долгое время, я написала простой Javascript без библиотеки, и это было весело, поэтому я хотела немного поговорить об этом!
Экспериментируя с простым Javascript
Мне очень нравится Vue. Но на прошлой неделе, когда я начала разрабатывать
https://questions.wizardzines.com, у меня были немного другие ограничения, чем обычно — я хотела использовать один и тот же HTML для создания PDF-файла (с
Prince) и создания интерактивной версии вопросов.
Я действительно не видела, как это возможно с Vue (потому что Vue хочет создать весь HTML сам), и поскольку это был небольшой проект, то решила попробовать написать его на простом Javascript без библиотек — просто написать немного HTML/CSS и добавить один
<script src="js/script.js"> </script>
.
Я такого не делала уже некоторое время, и по ходу узнала несколько вещей, которые сделали бы процесс проще, чем я думала, когда начинала.
Делаем почти всё, добавляя и удаляя CSS-классы
Я решила реализовать почти весь пользовательский интерфейс, просто добавояя и удаляя CSS-классы и используя CSS-переходы, если я хочу анимировать переход.
Вот небольшой пример, где нажатие кнопки
next
для вопроса добавляет класс
done
к родительскому div.
div.querySelector('.next-question').onclick = function () {
show_next_row();
this.parentElement.parentElement.classList.add('done');
}
Это сработало довольно хорошо. Мой CSS, как всегда, немного хаотичный, но кажется управляемым.
Добавление/удаление CSS-классов с помощью .classList
Я начала с редактирования классов следующим образом:
x.className = 'new list of classes'
. Хотя это немного грязно, и я задалась вопросом, есть ли лучший способ. И он был!
CSS-классы можно добавить так:
let x = document.querySelector('div');
x.classList.add('hi');
x.classList.remove('hi');
element.classList.remove('hi')
— это намного чище, чем мой прежний метод.
Найдите элементы с помощью document.querySelectorAll
Когда я начала изучать jQuery, помню, я думала, что если нужно легко найти что-то в DOM, нужно использовать jQuery (например,
$('.class')
). Я только на этой неделе узнала, что вместо этого вы просто можете написать
document.querySelectorAll('.some-class')
, и тогда вам не нужно зависеть ни от какой библиотеки!
Мне стало любопытно, когда был представлен
querySelectorAll
. Я немного погуглила, и похоже, что Selectors API был создан где-то между 2008 и 2013 годами — я нашла
сообщение от автора jQuery, обсуждающего предлагаемую реализацию в 2008 году, и сообщение в блоге от 2011 года, в котором говорилось, что к тому времени он был во всех основных браузерах, так что, возможно, его не существовало, когда я начала использовать jQuery, но он определённо существовал уже довольно давно :)
Установка .innerHTML
В одном месте я хотела изменить HTML-содержимое кнопки. Создание элементов DOM с помощью
document.createElement
довольно утомительно, поэтому я постаралвсь свести работу к минимуму и вместо этого установила
.innerHTML
для нужной HTML-строки:
button.innerHTML = `<i class="icon-lightbulb"></i>I learned something!
<object data="/confetti.svg" width="30" height = "30"> </object>
`;
Прокрутка страницы с помощью .scrollIntoView
Последняя забавная вещь, о которой я узнала, — это
.scrollIntoView
. Я хотела сделать автоматическую прокрутку до следующего вопроса, когда кто-то нажимает кнопку «Следующий вопрос». Оказывается, это всего лишь одна строка кода:
row.classList.add('revealed');
row.scrollIntoView({behavior: 'smooth', block: 'center'});
Ещё один пример ванильного JS: peekobot
Ещё один небольшой пример простой библиотеки JS, которую я посчитала хорошей, — это
peekobot, который представляет собой небольшой интерфейс чат-бота, состоящий из 100 строк JS/CSS.
Как видно из
его Javascript, он использует несколько подобных шаблонов — очень много
.classList.add
, некоторые добавления элементов в DOM, некоторые
.querySelectorAll
.
Из исходников peekobot я узнала об элементе
.closest, который находит ближайшего предка, соответствующего данному селектору. Похоже, это был бы хороший способ избавиться от некоторых
.parentElement.parentElement
, которые я написала в своём Javascript, что казалось немного хрупким.
Простой Javascript может очень многое!
Я была очень удивлена тем, как много получилось сделать с помощью простого JS. В итоге я написала около 50 строк JS, которые делали всё, что я хотела сделать, и ещё немного больше для сбора некоторых анонимных показателей об обучении пользователей.
Как обычно с моими фронтенд-постами, это не должно быть серьёзным советом по фронтенд-разработке. Моя цель в том, чтобы писать небольшие веб-сайты с менее чем 200 строками Javascript, которые в основном работают. Если вы также вертитесь в мире фронтенда, я надеюсь, что это немного поможет!