Zabawa z Wisielcem [refaktoryzacja]

Question

function getAlphabet() {
    div_alphabet_content = "";
    table_letters = new Array
    (
        "A", "Ą", "B", "C", "Ć", 
        "D", "E", "Ę", "F", "G", 
        "H", "I", "J", "K", "L", 
        "Ł", "M", "N", "Ń", "O", 
        "Ó", "P", "Q", "R", "S", 
        "Ś", "T", "U", "V", "W", 
        "X", "Y", "Z", "Ż", "Ź"
    );
    /*tablica liter 7x5*/
    var number_letter = "";
    for(i=0; i<=34; i++) {
        number_letter = "lett" + i;
        
        div_alphabet_content = div_alphabet_content + '<div class="letter" onclick="gameInferface('+i+')" id="'+ number_letter + '">' 
        + table_letters[i] + '</div>' + '\n'; // zmienna zawiera ciąg znaków !
        if ((i+1) % 7 === 0) 
        {
            div_alphabet_content = div_alphabet_content 
            + '<div id="corector"></div>\n';
        }
    }
    
    alphabet.innerHTML = div_alphabet_content;
}

Funkcja zainspirowana filmem Pana Mirosława, wyjadacze połapią się szybko (gra wisielec). Chciałbym jakoś pozbyć się:

div_alphabet_content = div_alphabet_content + '<div class="letter" onclick="gameInferface('+i+')" id="'+ number_letter + '">' 
        + table_letters[i] + '</div>' + '\n';

W końcu drzewo html można budować z pomocą funkcji, a takie mega ciągi znaków są mało estetyczne :)

Answer 1

No można… Tylko po co się męczyć z tworzeniem każdego węzła osobno? Zaproponowane rozwiązanie jest przyjaźniejsze.

Comments

Tylko po co się męczyć?... po to, że można :)

---

Ja tam masochistą nie jestem… element.innerHTML wciąż jest najprostszym sposobem ustalania treści elementu i raczej się to już nie zmieni ;)

---

@Comandeer, czyli nie twierdzisz, że element.innerHTML jest gorszym wyborem jeśli chodzi o tworzenie elementów, niż document.createElement() + node.appendChild() ?

---

Oczywiście, że nie jest. Powiem więcej: jest wygodniejszy i całkiem możliwe, że wydajniejszy.

---

Czy innerHTML jest wygodniejszy, to nie wiem. Dla mnie jest mniej czytelny.

A co jeśli chodzi o "czystość" kodu? Mógłbyś podać źródła, że innerHTML nie jest w tym gorszy? 

http://stackoverflow.com/a/2305677/4983840

The latter (appendChild) does not cause a complete rebuild of the DOM or even all of the elements/nodes within the target.

vs

The former (setting innerHTML) does cause a complete rebuild of the content of the target element, which if you're appending is unnecessary.

Czyli appendChild() - w przeciwieństwie do innerHTML - nie powoduje przebudowy drzewka DOM docelowego elementu ani elementów/węzłów (dzieci) wewnątrz tego elementu.

Mogę się mylić, ale wg mnie przebudowa struktury DOM trwa, a zatem appendChild powinno być szybsze, bo tego nie robi. Mam rację?

Tutaj appendChild() jest szybszy: https://gist.github.com/oliverfernandez/5619180

---

Created 3 years ago

Zrobiłbym jakieś nowsze testy, bo mam wrażenie, że coś mogło się zmienić. Inna rzecz: ciekawi mnie jak duża musi być skala, żeby to odczuć ;)

 A co jeśli chodzi o "czystość" kodu? Mógłbyś podać źródła, że innerHTML nie jest w tym gorszy? 

Polecam stworzyć tabelę przy pomocy metod DOM-owych i innerHTML – tylko tyle ;) Co do czystości – nie wiem, czy coś się znajdzie.

Natomiast problem z przebudową całego DOM elementu: jeśli operujemy na żywym drzewku DOM i musimy je zmodyfikować przy zachowaniu obecnego stanu, to tak – wówczas innerHTML. Ale jeśli chcemy po prostu wstawić nowy element do pustego rodzica albo coś wygenerować, nie widzę powodu, aby nie użyć innerHTML. 

---

Ja tam masochistą nie jestem… element.innerHTML wciąż jest najprostszym sposobem ustalania treści elementu i raczej się to już nie zmieni ;)

Domyślam się, że osobiście częściej korzystasz z innerHTML. 

A, czy w ogóle korzystasz z appendChild()?

---

Korzystam – wtedy, gdy nie mogę pozwolić sobie na odświeżenie całego drzewka elementu (np. w przypadku dodawania komunikatu o błędzie koło pola formularza).

---

Czyli appendChild jest bardziej precyzyjne?

---

Nie, po prostu operuje na drzewie DOM, a innerHTML na stringu.

Answer 2

Generalnie każdy odcinek z kursu Mirka ma swoje tematy, gdzie umieszcza się uwagi, bądź CR. Pierwszy odcinek był już omawiany tutaj. Takie tematy dodawane są regularnie, więc wkrótce przyjdzie czas i na ten z wisielcem. ;)

Ale mimo wszystko, do operacji, które chcesz wykonać będą potrzebne takie metody jak createElement, createTextNode, appendChild.

Comments

"Takie tematy dodawane są regularnie, więc wkrótce przyjdzie czas i na ten z wisielcem"

wkrótce, hmmm...

Answer 3

I prawie mi się udaje tylko czemu funkcja wywołuje się x2 razy ?

function getAlphabet() {

    table_letters = new Array
    (
        "A", "Ą", "B", "C", "Ć", 
        "D", "E", "Ę", "F", "G", 
        "H", "I", "J", "K", "L", 
        "Ł", "M", "N", "Ń", "O", 
        "Ó", "P", "Q", "R", "S", 
        "Ś", "T", "U", "V", "W", 
        "X", "Y", "Z", "Ż", "Ź"
    );
    var number_letter = "";
    for(var i=0; i<=34; i++) {
        number_letter = "lett" + i;
        var alphabet_div = new Array(34);
        alphabet_div[i] = document.createElement("div");
        textNode = document.createTextNode(table_letters[i]);
        alphabet_div[i].setAttribute("id", number_letter);
        alphabet_div[i].setAttribute("class", "letter");
alphabet_div[i].setAttribute("onclick", "gameInferface("+i+")"); 

        alphabet_div[i].appendChild(textNode);
        alphabet.appendChild(alphabet_div[i]);
        if ((i+1) % 7 === 0) 
        {
            var corector = document.createElement("div");
            corector.setAttribute("id", "corector");
            alphabet.appendChild(corector);
            
        }
    }   
}