Как можно улучшить код?

Question

[Alexander3928]

Как можно улучшить код? Я не уверен, что создавать такие массивы это верное решение. Может есть вариант получше?

const array = [
      ["./src/img/parallax/1.jpg", "./src/img/home/hero.jpg", "Code №1", "Codepen-1"],
      ["./src/img/parallax/2.jpg", "./src/img/home/hero.jpg", "Code №2", "Codepen-2"],
      ["./src/img/parallax/1.jpg", "./src/img/home/hero.jpg", "Code №3", "Codepen-3"],
      ["./src/img/parallax/2.jpg", "./src/img/home/hero.jpg", "Code №4", "Codepen-4"],
      ["./src/img/parallax/1.jpg", "./src/img/home/hero.jpg", "Code №5", "Codepen-5"],
      ["./src/img/parallax/2.jpg", "./src/img/home/hero.jpg", "Code №6", "Codepen-6"],
      ["./src/img/parallax/1.jpg", "./src/img/home/hero.jpg", "Code №7", "Codepen-7"],
      ["./src/img/parallax/2.jpg", "./src/img/home/hero.jpg", "Code №8", "Codepen-8"],
      ["./src/img/parallax/1.jpg", "./src/img/home/hero.jpg", "Code №9", "Codepen-9"],
      ["./src/img/parallax/2.jpg", "./src/img/home/hero.jpg", "Code №10", "Codepen-10"],
      ["./src/img/parallax/1.jpg", "./src/img/home/hero.jpg", "Code №11", "Codepen-11"],
      ["./src/img/parallax/2.jpg", "./src/img/home/hero.jpg", "Code №12", "Codepen-11"], 
    ];

    for (let element of array) {
      let result = `
        <div class="portfolio__codepen">
          <div class="portfolio__codepen-background"></div>
          <img class="portfolio__codepen-image" src="${element[0]}">
          <div class="portfolio__codepen-down">
            <img src="${element[1]}" class="codepen-down__hero">
            <div class="codepen-down__text">
              <h4>${element[2]}</h4>
              <h5>${element[3]}</h5>
            </div>
            <a href="#codepen" class="codepen-down__link">Source</a>
          </div>
        </div>
      `;
      item.innerHTML += result;
    }

Comments

[Арамаис Мирзоян]

Как минимум разместить данные массива в базе, а не на фронтенде.

Answer 1

[Алексей Уколов]

Ну, у вас, по сути, контент зависит от номера итерации, поэтому массив можно заменить простым циклом от 0 до 10.
Но в целом, для более сложных сценариев массив - это нормальное решение.

Answer 2

[Сергей Соколов]

1. обновление innerHTML на каждой итерации — плохо (медленно). Лучше один раз собрать весь HTML в строку, и один раз заменить innerHTML.

2. неаккуратность — «условно договорились», что в массиве такие-то значения идут на таких-то позициях. Это нигде явно не указано и следующему разработчику придётся догадываться, что там под нулевым индексом, а что под третьим.

3. данные в примере точно можно генерить из последовательности 0..11. В таком случае можно так:

spoiler

const html = new Array(12)
  .fill()
  .map((_, i) => {
    const parallax = `./src/img/parallax/${i & 1 ? 2 : 1}.jpg`;
    const hero = './src/img/home/hero.jpg';
    const title = `Code №${i + 1}`;
    const codepen = `Codepen-${i + 1}`;

    return `
      <div class="portfolio__codepen">
        <div class="portfolio__codepen-background"></div>
        <img class="portfolio__codepen-image" src="${parallax}">
        <div class="portfolio__codepen-down">
          <img src="${hero}" class="codepen-down__hero">
          <div class="codepen-down__text">
            <h4>${title}</h4>
            <h5>${codepen}</h5>
          </div>
          <a href="#codepen" class="codepen-down__link">Source</a>
        </div>
      </div>
    `;
  })
  .join('\n');

item.innerHTML = html;

Comments

[Alexander3928]

Если я правильно понял, вы предлагаете сделать 1 innerHTML с повторяющимися элементами? Или как?

[Сергей Соколов]

Alexander3928, добавил пример в ответ

[Вадим]

что в массиве такие-то значения идут на таких-то позициях. Это нигде явно не указано и следующему разработчику придётся догадываться, что там под нулевым индексом, а что под третьим.

Alexander3928, и в связи с этим хочется дополнить вопросом, а почему бы не массив массивов, а массив объектов?

[
  {
    paralax: "./src/img/parallax/1.jpg", 
    hero: "./src/img/home/hero.jpg", 
    code: "Code №1", 
    source: "Codepen-1"
  }
]
// ...
let result = `
        <div class="portfolio__codepen">
          <div class="portfolio__codepen-background"></div>
          <img class="portfolio__codepen-image" src="${element.paralax}">
          <div class="portfolio__codepen-down">
            <img src="${element.hero}" class="codepen-down__hero">
            <div class="codepen-down__text">
              <h4>${element.code}</h4>
              <h5>${element.source}</h5>
            </div>
            <a href="#codepen" class="codepen-down__link">Source</a>
          </div>
        </div>
      `;

[Alexander3928]

Вадим, по-сути разница, только в кол-во строк массива. Если делать как у меня, но виде объекта

[Вадим]

Alexander3928, по сути разница в читаемости и очевидности что для чего используется

[Alexander3928]

Вадим, не спорю, объекты на много легче читается чем массив

[Сергей Соколов]

Вадим, с объектами можно ещё чуть читабельнее:

const { parallax, hero, code, source } = element;
result += `
  ...
  <img class="portfolio__codepen-image" src="${parallax}">
  ...
`;

[Вадим]

Сергей Соколов, мне память жалко :D

Answer 3

[mayton2019]

Если оставить ключевую информацию то в массиве будет нечто вроде

const array = [
      ["1", "1", "1"],
      ["2", "2", "2"],
      ["1", "3", "3"]
  ....
    ];

А остальная логика будет просто view по отношению к этим данным. Туда-де пути к картинкам.