Мы начали эту неделю с быстрой остановки интерфейсов прикладных программ (API для краткости). Это удобные методы, которые мы используем как разработчики (клиенты) для извлечения необходимой информации из баз данных (серверов) для отображения этой информации на нашем сайте.
Мы используем запросы на выборку, чтобы «получить» эту информацию, и API будет извлекать ее из источника, точно так же (хорошо обученная собака — вот вам Лэсси) достает газету (предмет) для своего владельца (клиента) из почтового ящика. (сервер). Когда вы запрашиваете информацию с помощью API, вы можете получить все виды объектов данных — поэтому мы научились проверять наш ответ API (и проверять, не принесла ли Лесси еще одну белку) с помощью программы под названием Postman, которая позволяет нам видеть выборку. результат, прежде чем мы интегрируем его в наши приложения.
Во второй половине недели мы перешли к изучению фреймворка под названием React, который в настоящее время является наиболее используемой и популярной библиотекой JS. Разработано Facebook, вы можете увидеть его на таких сайтах, как Instagram, The New York Times, Air BnB, Netflix и Dropbox.
Он привлекателен для разработчиков тем, что позволяет нам декларативно описывать пользовательские интерфейсы и виртуально изменять их состояние и модель DOM, что означает меньшее количество кода, которому легче следовать. И DOM, о котором вам не нужно беспокоиться (прощай, queryselectorAll, до свидания, getElementsByClassName, auf wiedersehen getElementById).
React является модульным и позволяет нам разбивать наши сайты на наборы компонентов, например, навигационные панели/ленты контента/социальные ссылки, которые мы можем создать один раз и повторно использовать позже, сокращая наше время разработки, чтобы мы могли приступить к тестированию нашего кода с помощью Jest, который поставляется в комплекте с React раньше. Наконец, React популярен, действительно популярен на данный момент, а это означает, что существует огромное сообщество с поддержкой, доступной на Github и переполнением стека, а также приличный рынок труда, когда этот день наступит.
Изучив, как использовать компоненты и пропсы, мы коснулись стилей SASS в реакции и деструктуризации пропсов, чтобы упростить наши компоненты (подробнее здесь: https://medium.com/@lcriswell/destructuring-props-in- реагировать-b1c295005ce0 ).
Я провел послеобеденное время на этой неделе, повторно посещая проекты прошлой недели, которые нуждались в некотором TLC. Я пересмотрел свою игру JS Tetris — переработал ее код, чтобы она перестала тормозить и зависать, а также добавил некоторые стили для загрузки. Мне все еще нужно добавить функцию выпадения, уровни с линейной сложностью и, возможно, некоторые звуковые эффекты.
Я также вернулся к задаче, которую нам нужно было создать для переводчика азбуки Морзе. За то время, которое у нас было, я сделал простое приложение, которое могло бы переводить английский язык в азбуку Морзе, но не более того. Вернувшись к нему, я написал функции для обратного перевода азбуки Морзе на английский язык и добавил в SASS некоторые стили в стиле шпионажа времен холодной войны.
Одна из основных проблем, с которой я столкнулся при добавлении второй функции перевода, заключалась в том, чтобы найти способ отобразить ее на экране. Моя цель состояла в том, чтобы пользователь нажимал кнопку в форме под названием Зашифровать, которая переключала бы форму с английского языка Морзе на английский язык Морзе. Выполнить это оказалось непросто; Раньше у меня были проблемы при вставке и удалении элементов DOM в HTML в функциях JS, поэтому я знал, что не могу просто вставить новую форму в свой HTML. Вместо этого я решил отобразить обе формы на экране одновременно и найти способ скрыть одну из них.
Я пытался использовать классы CSS, чтобы скрывать и отображать свои формы. Я думал, что, нажимая Зашифровать/Расшифровать, пользователь может динамически добавлять/удалять классы в контейнерах, включающих трансляторы. Мысль была правильной, но реализация была неправильной. Сначала я использовал display: none, который скроет элемент. Однако это также приведет к тому, что прослушиватели событий больше не увидят элемент на странице, что делает весь контейнер бесполезным. Затем я попробовал visibility: none, но из-за этого мои контейнеры неловко отображались на странице.
В конце концов я нашел решение, используя и назначая position: relative для тела и position: absolute для контейнеров, когда пользователь нажимает Зашифровать/Расшифроватькнопка. Это убрало выбранный контейнер из поля зрения на экране и по-прежнему позволяло оставшемуся контейнеру сидеть, как было указано ранее. Я также применил z-индекс: -1 к скрытому контейнеру, чтобы убедиться, что он находится позади любого из моих других элементов.
Полезный фрагмент кода, который я изучил на этой неделе, для поиска объектов по их ключам
const getKeyByValue = (object, value) =› {return Object.keys(object).find((key) =› object[key] === value);};
Чтобы вызвать функцию
getKeyByValue (цель, выбранное значение)
