• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Czy opłaca się robić stałe zamiast rozpisywać innerHTML? Jak najlepiej deklarować zmienne?

+1 głos
145 wizyt
pytanie zadane 10 lipca 2021 w JavaScript przez Doge Bywalec (2,300 p.)

Witam, mam 2 pytania:

1. Czy opłaca się robić stałe z innerHTML jeżeli go używamy kilka razy w kodzie czy w pewnym momencie może być za dużo tych stałych i kod będzie jeszcze mniej czytelny? Na przykład:

zamiast

document.getElementById("action1").innerHTML = '<img src="img/relict1_1.png" class="relict" /><span onclick="buy_relict(relict1_cost, 1)" style="cursor: pointer;">Buy ('+relict1_cost+' coins)</span>';

zrobić

const stala = '<img src="img/relict1_1.png" class="relict" /><span onclick="buy_relict(relict1_cost, 1)" style="cursor: pointer;">Buy ('+relict1_cost+' coins)</span>';
document.getElementById("action1").innerHTML = stala;

Wydaje mi się, że lepiej zrobić stałe, aby jak się coś zmienia, zmienić tylko raz, lecz prosiłbym o opinię specjalistów.

2. Czy można oraz czy lepiej jest deklarować zmienne w sposób

var x; var y; var z;

czy normalnie

var x;
var y;
var z;

słyszałem również o sposobie

var x,
y,
z;

czy coś w tym stylu, lecz chyba jest to trochę niewygodne, ponieważ trzeba za każdym razem zmieniać położenie przecinka i średnika, a tak są od siebie niezależne, ale również proszę o wypowiedź ekspertów.

2 odpowiedzi

+4 głosów
odpowiedź 10 lipca 2021 przez adrian17 Ekspert (320,760 p.)
wybrane 10 lipca 2021 przez Doge
 
Najlepsza

1. W ogólności po prostu nie powinieneś używać innerHTML. Albo twórz elementy dynamicznie z createElement, albo z uzyciem <template>, albo z jquery, albo jakimś większym frameworkiem. W niektórych sytuacjach, jak automatyczna weryfikacja rozszerzeń do FF, kod używający innerHTML jest kompletnie zabroniony.

2. To... też nie powinno mieć miejsca.

Jak już, to bym napisał tak:

let x, y, z;

Ale w praktyce taki kod nie powinien się zazwyczaj pojawiać, bo zmienne powinny być definiowane jak najbliżej miejsca użycia, najlepiej od razu z inicjalizacją. Więc:

let x = costam();
let y = costam();
let z = costam();
if (x > 777) { // ...

 

komentarz 10 lipca 2021 przez Doge Bywalec (2,300 p.)
Czyli warto jest się zacząć uczyć jQuery? Bo kiedyś zadawałem pytanie odnośnie jQuery i dostałem odpowiedź, żeby w 2021 roku już go nie używać.
4
komentarz 10 lipca 2021 przez adrian17 Ekspert (320,760 p.)
AFAIK wciąż znacząca większość stron w internecie używa jQuery, plus jest po prostu w wielu aspektach wygodniejszym odpowiednikiem API DOMa.

Tak, we współczesnym webdevie do wielkich interaktywnych stron typu SPA popularniejsze są frameworki typu react, ale to nie znaczy że każda strona tego potrzebuje - w dużej części przypadków to jest armata na wróble.

Oczywiście moja opinia :)
2
komentarz 11 lipca 2021 przez qax Dyskutant (8,040 p.)

W sumie jeszcze rok temu sam używałem jQuery.

Obecnie bardziej lubię sam JS bo: za pomocą zmiany klas można osiągnąć te same efekty wizualne i animacje, querySelectorAll() znacznie ułatwia wybór elementów, a poza tym ma się większą kontrolę nad aplikacją. Minusem są większe wymagania co do programisty jeśli np. chodzi o modyfikację drzewa DOM.

Jednak biblioteka jQuery jak każda inna to jedno żądanie HTTP więcej, co ma wpływ na wydajność...

+1 głos
odpowiedź 11 lipca 2021 przez VBService Mędrzec (172,150 p.)
edycja 11 lipca 2021 przez VBService

W podanym przez Ciebie przykładzie 

const stala = '<img src="img/relict1_1.png" class="relict" /><span onclick="buy_relict(relict1_cost, 1)" style="cursor: pointer;">Buy ('+relict1_cost+' coins)</span>';
document.getElementById("action1").innerHTML = stala;

użycie stałej nie wiele wnosi, poza niewielką poprawą czytelności kodu,

ale w odniesieniu no innego Twojego kodu

function relict_shop()
{
    document.getElementById("action1").innerHTML = '<img src="img/relict1_1.png" class="relict" /><span onclick="buy1()">Buy 1</span>';
    document.getElementById("action2").innerHTML = '<img src="img/relict2_1.png" class="relict" /><span onclick="buy2()">Buy 2</span>';
    document.getElementById("action3").innerHTML = '<img src="img/relict3_1.png" class="relict" /><span onclick="buy3()">Buy 3</span>';
    document.getElementById("action4").innerHTML = '<img src="img/relict4_1.png" class="relict" /><span onclick="buy4()">Buy 4</span>';
}

mogło by go znacząco skrócić (szczególnie jakby elementów "action" było więcej niż 4), ale jak napisał @adrian17

... nie powinieneś używać innerHTML, ...  twórz elementy dynamicznie z createElement

lepiej użyć wspomniany document.createElement().

 

Przykład (w oparciu o fragment Twojego kodu)

<div id="action" class="action">
  <div id="action1" class="inaction"></div>
  <div id="action2" class="inaction"></div>
  <div id="action3" class="inaction"></div>
  <div id="action4" class="inaction"></div>
</div>
.action
{
  float: right;
  width: 960px;
  height: 202px;
  background-color: green;
  margin: 10px 10px 0px 0px;
}
.inaction
{
  width: 450px;
  height: 71px;
  margin: 17px 10px 0px 15px;
  float: left;
  background-color: red;
  text-align: center;
  font-size: 20px;
  display: flex;
  justify-content : center;
  align-items: center;
}
.relict
{
  width: 25px;
  height: 25px;
  margin-right: 10px;
}
// ...

window.onload = loading;
function loading()
{
  // ...
  relict_shop();
}
function relict_shop()
{
  // [...document.querySelectorAll('div#action div[id^="action"]')]
  [...document.querySelectorAll('#action [id^="action"]')].forEach((div, index) => {
    const img = document.createElement('img'); 
    img.setAttribute('src', `img/relict${(++index)}_1.png`);
    img.classList.add('relict');

    const span = document.createElement('span');
    span.setAttribute('onClick', `buy${index}()`);
    span.textContent = `Buy ${index}`;

    div.appendChild(img);
    div.appendChild(span);
  });
}

 

Podobne pytania

0 głosów
3 odpowiedzi 450 wizyt
0 głosów
0 odpowiedzi 148 wizyt
pytanie zadane 4 września 2021 w Sprzęt komputerowy przez Sutnev Nowicjusz (120 p.)
+4 głosów
9 odpowiedzi 955 wizyt

88,355 zapytań

136,952 odpowiedzi

305,666 komentarzy

58,618 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...