Вопрос с 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 шт):

Автор решения: ksa

правильно ли структурирован мой код?

Про "структурируемость" тут говорить пока рано, поскольку программка сама мала. Но некоторые "части алгоритма" использованы "не по назначению" или могут быть реализованы иначе.

Предложу такой вариант "переделки" твоего кода.

  • Обработчик клика вешается на родителя всего один раз
  • Вместо связки 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>

→ Ссылка