Отчасти поэтому я часто использовала библиотеки! Десять лет назад я использовал 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, которые в основном работают. Если вы также вертитесь в мире фронтенда, я надеюсь, что это немного поможет!