Следуя за потоком
Как раз заканчиваю свой первый проект с использованием Javascript на Flatiron’s Software Engineering Bootcamp. Я начала курс в начале апреля и последние две недели работала над своим проектом. Я многому научился за последние несколько месяцев, и видеть, как все это объединяется в этом проекте, было очень приятно.
Мой проект представляет собой простой в использовании источник данных о криптовалюте с использованием API CoinGecko. Будучи криптоинвестором, я хотел создать способ просмотра текущих значений и дополнительной информации о валютах, за которыми я слежу. Мое приложение позволяет создать учетную запись с именем пользователя и паролем. Как только вы войдете в систему, вы увидите мозаичное представление 100 лучших криптовалют на рынке. Пользователь может щелкнуть любую плитку по своему выбору, чтобы увидеть дополнительную информацию об этой криптовалюте.
Заставить мое приложение работать так, как я хотел, было довольно сложно. Переход со страницы входа к основному списку криптовалют, затем к дополнительной информации и обратно был непростым делом.
Отслеживание данных
Знание того, какие данные вы получаете, и отслеживание их с помощью ваших функций имеет решающее значение. Я усвоил этот урок на ранних этапах лабораторных работ и упражнений в программе. Использование API и передача его данных через ваши функции могут быть ошеломляющими. Мой инструктор проделал большую работу, подчеркнув использование console.log. Буквально на каждом этапе написания своих функций я регистрировал все в консоли. Мне нужно было знать, какие данные я получаю, чтобы правильно их использовать. Это было особенно важно в середине моего проекта, когда я понял, что мне нужно снова получить данные, чтобы использовать их по-другому. Моя исходная выборка использовала метод forEach для создания мозаичного списка. Когда я хотел отобразить дополнительную информацию об отдельной криптографии, я не мог использовать первую функцию, поэтому я снова извлекал данные, чтобы вернуть объект каждой криптографии по отдельности.
function renderCrypto() {
mainPage.innerHTML = ''
divTag.innerHTML = ''
fetch(BASE_URL)
.then(res => res.json())
.then((crypto) => {
logOut()
crypto.forEach((coin) => {
createTile(coin)
})
})
}
function cryptoSelect(select) {
fetch(BASE_URL)
.then(res => res.json())
.then((crypto) => {
moreInfo(select)
})
}
Следование потоку функций
Несколько раз я возвращался к своему коду, чтобы понять, почему мои функции не выполнялись или почему они повторялись. Когда я передал свои функции другим функциям, я понял, что мне нужно следовать потоку выполнения или стеку вызовов. Почти каждая функция в моем приложении либо связана с передаваемыми данными, либо использует обратный вызов другой функции. Как только я начал перечислять порядок стека вызовов в своих заметках, я смог намного быстрее продвигаться по сборке своего приложения. Я больше не просматривал свой код, чтобы увидеть, какие функции будут выполняться первыми. Это было чрезвычайно полезно при создании функций возврата и выхода из системы. Когда вы перемещаетесь по моему приложению, некоторые функции очищают HTML, чтобы создать впечатление, будто вас перенаправляют на новую страницу. Я использовал ту же концепцию в обратном порядке, чтобы вернуться к предыдущим страницам. Наличие блок-схемы моих функций сделало эту задачу довольно простой. Я добавил несколько примечаний к каждой функции, которая должна была очистить часть HTML, затем вызвал функции для предыдущих страниц и «Бум!», вернулся и вышел из системы.
btnTag.addEventListener('click', (e) => {
selectedCrypto.innerHTML = ''
renderCrypto()
})
function logOut (){
const btnTag = document.createElement('button')
btnTag.innerText = 'Log Out'
btnTag.addEventListener('click', (e) => {
loginPage()
})
divTag.appendChild(btnTag)
}
Следование потоку всего в вашем приложении является важной частью разработки. Вам нужно знать, с чем вы работаете, зависимости от одной функции к другой и порядок выполнения.
