Вопрос с JS; создание простого приложения
Мой вопрос следующего плана, ради тренировки навыка написания кода на чистом JS, чтобы глубже понять язык, я написал следующий код для создания приложения (криптовалюта):
const data = document.querySelector(".cryto-currency");
let url = `https://api.coinlore.net/api/tickers/`;
const button = `<button class='toNextPage'>toNextPage</button>`;
let showAll = false;
const CoinsData = (coin, index) => {
return `<div class='coins'>
<div class='coin'>
<div class='number'>${index + 1}</div>
<div class='coin_name'>${coin.name}</div>
<div class='coin__price'>${coin.price_usd}</div>
<div class='coin__percent-change_24h'>${coin.percent_change_24h}</div>
</div>
</div>`;
};
const CoinsJob = (coins) => {
if (!coins || !coins.data) {
throw new Error("Неверный формат данных");
}
const html = coins.data
.map((coin, index) => {
if (showAll === false && index + 1 <= 8) {
return CoinsData(coin, index);
} else if(showAll) {
return CoinsData(coin, index);
}
})
.join("");
data.innerHTML = html + button;
const btn = document.querySelector(".toNextPage");
if (btn) {
btn.addEventListener("click", () => {
showAll = !showAll;
loadCoins();
});
}
};
const loadCoins= async () => {
try {
let response = await fetch(url);
let coins = await response.json(); // читаем ответ в формате JSON
CoinsJob(coins);
} catch (e) {
console.error("ошибка загрузки", e);
data.innerHTML = `<p>ошибка загрузки</p>`;
}
};
loadCoins();
<section class='cryto-currency'></section>
Моей задачей является понять, правильно ли структурирован мой код? Нужно ли мне сменить свой стиль на ООП (если это будет влиять на производительность и иметь смысл)? Правильно ли я начинаю писать приложение или не имеет смысла имитировать функциональные компоненты как в react?
Ответы (1 шт):
правильно ли структурирован мой код?
Про "структурируемость" тут говорить пока рано, поскольку программка сама мала. Но некоторые "части алгоритма" использованы "не по назначению" или могут быть реализованы иначе.
Предложу такой вариант "переделки" твоего кода.
- Обработчик клика вешается на родителя всего один раз
- Вместо связки
map + join
используетсяreduce
- Заменено нелепое "двойное" условие в
map
на "одинарное" - Уменьшено условие для генерации ошибки
- Функция
loadCoins
неasync
...
const data = document.querySelector(".cryto-currency");
const url = 'https://api.coinlore.net/api/tickers/';
const button = '<button class="toNextPage">toNextPage</button>';
let showAll = false;
data.addEventListener("click", e => {
if (!e.target.closest('.toNextPage')) return
showAll = !showAll;
loadCoins();
});
const CoinsData = (coin, index) => `<div class='coins'>
<div class='coin'>
<div class='number'>${index + 1}</div>
<div class='coin_name'>${coin.name}</div>
<div class='coin__price'>${coin.price_usd}</div>
<div class='coin__percent-change_24h'>${coin.percent_change_24h}</div>
</div>
</div>`;
const CoinsJob = (coins) => {
if (!coins?.data) {
throw new Error("Неверный формат данных");
}
const a = showAll ? coins.data : coins.data.slice(0, 8)
const html = a.reduce((s, coin, index) => s += CoinsData(coin, index), '');
data.innerHTML = html + button;
};
const loadCoins = () => {
fetch(url)
.then(res => res.json())
.then(CoinsJob)
.catch(e => {
console.error("ошибка загрузки", e);
data.innerHTML = '<p>ошибка загрузки</p>';
});
};
loadCoins();
<section class='cryto-currency'></section>