Один из моих недавних проектов включал создание внешнего интерфейса, и с самого начала я знал, что хочу использовать этот веб-сайт немного иначе, чем обычно. Вместо того, чтобы запускать проект Next.js и развертывать его с помощью Vercel, я хотел создать статический сайт с простым HTML и ванильным Javascript. Я читал, что другие делают это, и мне захотелось попробовать это самому. Сайт еще не завершен, но я все же извлек некоторые уроки, и по мере того, как я продолжаю его создавать, я буду редактировать эту страницу, чтобы отразить то, что я узнал.

В целом опыт оказался не таким сложным, как я изначально думал. Первые простые веб-сайты, которые я создал, были еще до того, как я узнал, как работает Интернет, и они были плохими. Я не знал ни о MDN docs, ни о инструментах для разработчиков браузеров, ни о многих других вещах, которые меня тормозили. В глубине моего разума был тот первый опыт, который был таким болезненным. С тех пор все мои интерфейсные проекты используют React. Выйдя на другой конец создания большей части функциональности, которую я хотел, я могу сказать, что это не так сложно, как я изначально думал.

Одной из первых вещей, с которыми я столкнулся, был импорт файлов Javascript из другого файла. Это не похоже на Node. Сначала вам нужно будет импортировать родительский файл Javascript как module, а затем импорт по относительному пути включает доступ к файлу, как к обычному файлу, обслуживаемому веб-сервером с расширением .js. Что-то настолько простое, что я считаю само собой разумеющимся, сильно отличается при переключении среды выполнения.

<script type="module" src="js/myFile.js"></script>

Еще одно отличие от того, как я привык кодировать Javascript в Node, заключается в том, что код не обязательно должен быть в функции. Я так привык создавать функции, а затем вызывать их в другом месте. Всякий раз, когда я хотел запустить фрагмент кода при вызове скрипта, я писал функцию, а затем после определения вызывал функцию. Вот и не летал. Вместо этого мне нужно было использовать функцию в качестве цели для прослушивателя событий на window.onload. Опять же, это были простые вещи, которые я упустил из виду. Тем не менее, слушатели событий стали моими друзьями. Когда я остановился, чтобы подумать об этом, это имело смысл, потому что Javascript предназначен для добавления интерактивности на веб-страницу. Добавление интерактивности означает, что пользователь сделал что-то или вызвал событие.

Теперь, чтобы начать трудности более высокого уровня.

Нет глобального состояния, на которое можно было бы опереться. По крайней мере, не готовое, простое в использовании глобальное состояние. Очевидно, что его можно построить, потому что его реализовали во многих фреймворках, но базовые веб-API не предлагают ничего подобного. Вместо этого есть локальное хранилище, файлы cookie и несколько других методов хранения. Я в основном использовал файлы cookie для этого приложения, но легко вижу, как могут пригодиться другие API-интерфейсы хранилища.

Говоря о файлах cookie, получение и установка файлов cookie сбили меня с толку, когда я впервые начал их использовать. И получение, и установка выполняются с использованием document.cookie. Получить было несложно, так как куки возвращаются в довольно удобном для чтения формате, который нужно просто разделить и проанализировать для правильного значения.

Однако настройка файлов cookie — это то, где я изначально запутался. Что я начал делать, так это проверить, были ли файлы cookie, возвращенные в document.cookie, и если были существующие файлы cookie, я правильно отформатировал новый файл cookie таким же образом, как они будут читаться, а затем установил document.cookie в новую строку. Это не сработало. Прочитав документы, я узнал, что document.cookie — это свойство доступа, что в основном означает, что вы не переопределяете все значение, и у него есть свой способ обработки того, что установлено. Файлы cookie, независимо от того, сколько файлов cookie уже установлено, создаются или обновляются по одному с использованием нотации, которая выглядит так, как будто она переопределяет все файлы cookie. Вот пример того, как это может выглядеть.

console.log(document.cookie); // cookie1=this
document.cookie = 'cookie2=that';
console.log(document.cookie); // cookie1=this; cookie2=that

Читая документацию по файлам cookie, я также узнал, что для файлов cookie могут быть установлены различные атрибуты. Они контролируют, какие страницы имеют доступ к вашим файлам cookie и какие удаленные запросы будут отправлены вашим файлам cookie. Некоторые безопасные настройки по умолчанию гарантируют, что ваши файлы cookie не отправляются третьим лицам, но это помогает мне понять, как сайты отслеживают ваш просмотр и как целевая реклама может получить эту информацию.

Говоря об удаленных запросах, я хочу обсудить fetch. Одним из моих главных мотивов для этого небольшого эксперимента было то, что я хотел сократить список зависимостей. Обычно для выполнения запросов я устанавливал axios, потому что мне нравится их API и я знаком с ним. На этот раз я решил изучить fetch, который является базовым веб-API, таким же, как файлы cookie. Оказывается, fetch — очень полезный API, который, кажется, был темой всего этого опыта. Конечно, API отличается от axios, но я не встречал ничего такого, чего не мог бы сделать fetch.

В заключение, написать ванильный Javascript оказалось намного проще, чем я думал. Иногда для продажи продуктов создатели этих продуктов вводят ложную сложность. Я полагаю, что это имело место с большими интерфейсными фреймворками. Хотя я уверен, что они найдут свое место, у меня не возникло проблем с созданием простого внешнего интерфейса с проверенными базовыми веб-технологиями.

Первоначально опубликовано на https://thomasstep.com 15 августа 2022 г.