• 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?

VPS Starter Arubacloud
+1 głos
262 wizyt
pytanie zadane 10 lipca 2021 w JavaScript przez Doge Gaduła (3,320 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 (344,100 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 Gaduła (3,320 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 (344,100 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,060 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 Ekspert (251,210 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 712 wizyt
0 głosów
0 odpowiedzi 319 wizyt
pytanie zadane 4 września 2021 w Sprzęt komputerowy przez Sutnev Nowicjusz (120 p.)
+4 głosów
9 odpowiedzi 1,082 wizyt

92,454 zapytań

141,262 odpowiedzi

319,089 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...