DRY, JavaScript Циклы и производительность - PullRequest
Новая
       9

DRY, JavaScript Циклы и производительность

0 голосов
/ 10 марта 2020

Я пытаюсь реорганизовать свой код с использованием DRY правил, и я не уверен, что является наилучшей практикой для достижения хорошей производительности и чистого кода.

Детали проекта и цель:

Мой проект получает 100 песен из deezer API с такими деталями, как img, title, svg. Я хочу передать эти данные в 10 секций.

index. html code: 

<main>
 <section>1</section>
 <section>2</section>
 <section>3</section>
 <section>4</section> 
 <section>5</section>
 <section>6</section>
 <section>7</section>
 <section>8</section>
 <section>9</section>
 <section>10</section>
</main>

каждый section должен иметь ul и 10 li с деталями песни

каждый li должен иметь внутри вложенные HTML элементы 

<li>
 <img src="" alt="" />
 <h3>Title song</h3>
 <div class="svg__container">
  <a href="#">
    <i class="fa fa-play"></i>
    <svg> svg body... </svg>
  </a>
 </div>
</li>

Мой вопрос: что такое Лучшая практика для передачи этого li в HTML:

  1. Просто напишите 100+ li элементов в индексе. html

  2. Использование Javascript функций с циклами и appendChild :

    index. js

// render ul's
const renderUl = () => {

 const allSections = document.querySelectorAll('section');

 allSections.forEach( (section) => {

 const newUl = document.createElement('ul');
 newUl.appendChild(section);
})
}

// render li's

const renderLi = () => {
 const allUl = document.querySelectorAll('ul');

 allUl.forEach( ul => {
   for(let i=0; i<10; i++){
    const newLi = document.createElemenet('li');
    ul.appendChild(newLi);
   }
  })
 }

// then render li Element's

const renderLiElements = () => {
 const allLi = document.querySelectorAll('li');

 allLi.forEach( li => {
   const liElements = 
      `<img src="" alt="" />
       <h3>Title song</h3>
       <div class="svg__container">
        <a href="#">
          <i class="fa fa-play"></i>
          <svg> svg body... </svg>
        </a>
       </div>`

  li.innerHTML = liElements;
 })
}

//then init all functions
const initApp = () => {
 renderUl();
 renderLi();
 renderLiElemenets();
 }
initApp();

Это решение снижает производительность моего приложения, но, похоже, больше DRY. Я не повторяю 100 раз одно и то же svg и одни и те же значки.

Я на 100% уверен, что есть какой-то другой способ достичь своей цели и не повторяю 100 раз одни и те же элементы. Надеюсь, вы, ребята, можете указать мне лучшее решение.

// РЕДАКТИРОВАТЬ

Я хочу создать это приложение с ванилью js, пакетом посылок и babel , Не хочу использовать другие библиотеки / фреймворки.

...