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