JS – Recursive vol. 3

Poznajemy wzorzec array-closureHandler-loop (nazwa autora). Bardzo popularne podejście do rekurencyjnego rozwiązywania problemów w JS. Zaczynamy.

Oto lista z poprzedniego przykładu:

<ul id="myUl"><li><a href="">Text123</a></li></ul>

A oto poprzedni przykład (warunek bazowy):

function getTextNode(el){

    if(el === null)
        return null;
    
    if(el.nodeType === Node.TEXT_NODE)
        return el;

    return getTextNode(el.childNodes[0]);
}

Ok, teraz nasza lista będzie wyglądać tak:

<ul id="myUl">
        <li><a href="">Text123</a></li>
        <li><a href="">Text321</a></li>
</ul>

Zbieramy wszystkie textNodes:

function getTextNodes(el){
    
    var textNodes = []
    
    function handler(node){
        if(node === null)
            return;

        if(node.nodeType === Node.TEXT_NODE)
            textNodes.push(node);

        if(node.nodeType !== Node.TEXT_NODE){
            node.childNodes.forEach((childNode) => {
                handler(childNode);
            });
        }
    }

    handler(el);

    return textNodes;
}

Budowa funkcji – tablica, hadler, handler, tablica.

W handlerze:

Warunek wyrwania się z funkcji
Warunek dopisania do tablicy
Pętla przechodząca po elementach następnych na każdym wywołująca rekurencyjnie handler

Dalej mamy wywołanie handlera i zwrot tablicy.