Refaktoryzacja/optymalizacja fragmentu kodu [Jquery]

Question

Witam, posiadam poniżej przedstawiony fragment kodu:

 

function test () {

let numimg = 5; // liczba jest losowa, przykladowo 5
let numid= 10; // liczba jest losowa, przykladowo 10

$('.container').append('<div id="name'+numid+'"><img src="" alt="image" id="number'+numimg+'"></div>');

}

// kod jest wykonywany WEWNĄTRZ funkcji, która oryginalnie przekazuje więcej parametrów.
// zmienne muszą być ograniczone do funkcji
// Najlepiej gdyby był według najnowszych standardów obsługiwanych przez przeglądarki (aktualne)

 

Zastanawiam się czy wyżej napisany kod jest poprawny, czy da się go napisać lepiej?

Wszelkie rady oraz wiedzę którą mi przekażecie zapamiętam i docenie, będę wdzięczny za odpowiedzi,

Pozdrawiam.

Answer 1

W standardzie ES6 została zmieniona notacja funkcji

function test () {}  // stary zapis
let test = () => {}  // nowy zapis gdzie => oznacza słowo kluczowe "function"

Skoro masz jakieś wartości stałe definiowane wewnątrz funkcji użyj `const` zamiast `let`.

const numid = 1 + Math.floor(Math.random() * 20;

Comments

const jest prywatny i będzie obowiązywać tylko wewnątrz funkcji, a po jej zakończeniu zniknie?

Co jeśli zostanie odpalone 5 tych samych funkcji z zmienną const, będą działać osobno zmienne czy się zaczną nadpisywać?

---

Tak, const jest lokalną zmienną. Będzie działał tylko w ramach jednego "scope'a" (zakresu). Możesz poczytać o tym jak działa mechanizm closures w JavaScript: https://www.w3schools.com/js/js_function_closures.asp.

---

W nowym standardzie ES8 jest zmieniona notacja funkcji

Funkcje strzałkowe weszły już w ES6.

Tak, const jest lokalną zmienną. Będzie działał tylko w ramach jednego "scope'a" (zakresu).

Warto dodać, że const (tak samo jak let) mają zakres blokowy.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const

---

Dzięki @JSHolic, zawsze najwyższy standard redakcji JS'a. c:

Answer 2

1.Poczytaj o template string. 

2.const jest zawsze lepsze od let.

3.Nie wiem czy takie tworzenie divow jest dobre - za pomocą stringa. Ja bym preferował jednak createElement('div").

Comments

1. Przeczytane, nie sądziłem że można jeszcze tyle dowiedzieć się z podstaw.

2. Zapamiętam, tylko chciałbym argumenty dlaczego jest lepsze.

3.

const id = 100;

// making DIV
const vardiv = $('<div/>', {
    id:'c'+ID,
    class: 'testclassdiv'
});

// Making IMG and append to DIV
const varimg = $('<img/>', {
	id:'ci'+ID,
    src:'image/test.png',
    class: 'testclassimg',
	alt:'description'
}).appendTo(vardiv);

// append DIV element to element with class 'container'
$('.container').append(vardiv);


//5BD7A4BDA412E39E74D601811837791232C3E54AE4CE6648C3C45E418589EFE66D1E798B41DC00220AD1BDB9445192F4DFE83485DEE2C7C9E5CF16DF6B88525C

Stworzyłem coś takiego w Jquery, wygląda dobrze?

---

2.const jest zawsze lepsze od let.

Nie może być zawsze lepszy, ponieważ za pomocą const nie stworzysz choćby flagi, czy licznika, których wartość będziesz zmieniać. Lepszy jest wtedy, gdy wiadomo, że wartość zmiennej nie będzie zmieniana (nie dotyczy to mutacji obiektów).