Dobre praktyki VanillaJS

Dobre praktyki VanillaJS
Gustawiec
  • Rejestracja:około 6 lat
  • Ostatnio:około 5 lat
  • Postów:58
0

Cześć. Jak się ma do dobrych praktyk taki kod? Mam wątpliwość, że może nie jest to najlepsze rozwiązanie, ale z drugiej strony nie znam alternatywy dla tego rozwiązania oprócz użycia Reacta i składni JSX, których nie mogę użyć w tym kodzie.

Kopiuj
const createProductCard = (amount, save) => {
    const productsList = document.querySelector('.products-list-section');
    // CREATING ELEMENTS
    const wrapper = document.createElement('div')
    const topDiv = document.createElement('div')
    const topDivFirstChild = document.createElement('div')
    const topDivFirstChildParagraph = document.createElement('p')
    const topDivImage = document.createElement('img')
    const topDivSecondChild = document.createElement('div')
    const topDivSecondChildDiv = document.createElement('div')
    const topDivSecondChildDiv2 = document.createElement('div')
    const image = document.createElement('img')
    const bottomDiv = document.createElement('div')
    const bottomDivFirstChild = document.createElement('div')
    const bottomDivSecondChild = document.createElement('div')
    const bottomDivThirdChild = document.createElement('div')
    // PLACING THEM IN RIGHT PLACE
    wrapper.appendChild(topDiv)
    topDiv.appendChild(topDivFirstChild)
    topDivFirstChild.appendChild(topDivImage)
    topDivFirstChild.appendChild(topDivFirstChildParagraph)
    topDiv.appendChild(topDivSecondChild)
    topDivSecondChild.appendChild(topDivSecondChildDiv)
    topDivSecondChild.appendChild(topDivSecondChildDiv2)
    wrapper.appendChild(image)
    wrapper.appendChild(bottomDiv)
    bottomDiv.appendChild(bottomDivFirstChild)
    bottomDiv.appendChild(bottomDivSecondChild)
    bottomDiv.appendChild(bottomDivThirdChild)
    // ADDING CLASSES AND ATTRIBUTES
    wrapper.setAttribute('class', 'product-card-wrapper')
    topDiv.setAttribute('class', 'product-card-top-section')
    bottomDiv.setAttribute('class', 'product-card-bottom-section')
    topDivImage.setAttribute('src', 'https://image.flaticon.com/icons/svg/626/626440.svg')
    // ADDING CONTENT INTO ELEMETNS
    topDivFirstChildParagraph.innerText = 'sztuk: ' + amount
    topDivSecondChildDiv.innerText = 'OSZCZEDZASZ: '
    topDivSecondChildDiv2.innerText =  save + 'zł'

    productsList.appendChild(wrapper)
}
edytowany 1x, ostatnio: Gustawiec
MA
  • Rejestracja:prawie 17 lat
  • Ostatnio:15 dni
  • Postów:644
3
Kopiuj
const wrapper = document.createElement('div');
wrapper.innerHTML = `twój kod html w formie tekstowej`;
productsList.appendChild(wrapper);

Nie robisz w tym kodzie nic poza tworzeniem zwykłego HTML, w takim przypadku możesz użyć innerHTML.

Edit. podziwiam, że chciało Ci się to pisać w takiej formie heh, jednak współczuję programiście który miałby nanosić na tym zmiany.

edytowany 2x, ostatnio: Markuz
Gustawiec
Będę w stanie przekazać parametry funkcji do kodu zapisanego w ten sposób?
MA
<div>sztuk: ${amount}</div> albo użyj ` albo + jak Ci wygodniej.
Gustawiec
Dzięki śliczne :)
Gustawiec
Ano musiało mi się chcieć z braku innej opcji :D
Aitwar
  • Rejestracja:około 5 lat
  • Ostatnio:ponad 4 lata
  • Lokalizacja:Warszawa
  • Postów:23
1

Szczerze mówiąc prędzej pomyślałbym o czymś typu renderera HTML na podstawie konfiguracji w JSON. Większa szansa, że się przyda później oraz wprowadzenie zmian będzie łatwiejsze.

Haskell
  • Rejestracja:prawie 10 lat
  • Ostatnio:12 miesięcy
  • Postów:4700
1

To jest napisane tragicznie. Nie widzę, żeby ten html był generowany warunkowo, więc równie dobrze można go umieścić w pliku html, a w JS tylko wstawić te dwie wartości dynamiczne. Aż się prosi o wykorzystanie jakiegoś narzędzia do dynamicznego generowania template np. mustache czy doT


Zaglądali do kufrów, zaglądali do waliz, nie zajrzeli do d**y - tam miałem socjalizm. Czesław Miłosz

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.