Recursão com vanilla JavaScript

Nota: apenas traduzi o texto abaixo e postei aqui.

Em JavaScript, recursão ocorre quando você chama uma function de dentro dela até ou a menos que uma condição seja atendida. Hoje, vamos ver como funciona.

Um exemplo

Digamos que você tenha uma coleção de elementos aninhados, como este:

<div class="bg-1">
    <div class="bg-2">
        <div class="bg-3">
            <div class="bg-4">
                <div class="bg-5">
                    <div class="bg-6">
                        <div class="bg-7">
                            ...
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Você deseja escrever uma JavaScript function que permita obter a distância na DOM tree entre um element e seu parent. Por exemplo, .bg-5 está dois níveis acima de .bg-7.

Criando uma helper function

Primeiro, vamos criar uma levelsUp() helper function.

Passaremos um element e um selector como arguments. Também adicionaremos um terceiro argument que usaremos para rastrear a distância entre nosso element e um element com o selector.

var levelsUp = function (elem, selector, distance) {
    // Faça as coisas...
};

Não queremos que os usuários tenham que definir a distância como 0 toda vez que executarem a function.

Verificaremos se um valor para distance existe e, caso contrário, definiremos como 0. Em seguida, usaremos ++ para aumentar nosso valor de distance em 1.

var levelsUp = function (elem, selector, distance) {
    // Se distance não é definido ainda, configura ele para 0
    if (!distance) {
        distance = 0;
    }

    // Aumenta a distance em 1
    distance++;
};

A seguir, obteremos o parent do element atual com a propriedade elem.parentNode.

var levelsUp = function (elem, selector, distance) {
    // Se distance não é definido ainda, configura ele para 0
    if (!distance) {
        distance = 0;
    }

    // Aumenta a distance em 1
    distance++;

    // Obtêm o parent do element atual
    var parent = elem.parentNode;
};

Agora, podemos usar o método matches() para verificar se o parent corresponde ao selector.

Se o parent for compatível, podemos retornar nossa distance.

var levelsUp = function (elem, selector, distance) {
    // Se distance não é definido ainda, configura ele para 0
    if (!distance) {
        distance = 0;
    }

    // Aumenta a distance em 1
    distance++;

    // Obtêm o parent do element atual
    var parent = elem.parentNode;

    // Se alcançamos o parent, retorne a distance
    if (parent.matches(selector)) return distance;
};

Adicionando recursão

Agora, é aqui que entra a recursão.

Se o parent não corresponder, queremos executar levelUp() novamente, usando o parent como nosso element inicial. Também passaremos o selector e nossa distance atual.

E como a function precisa retornar um valor, retornaremos qualquer que seja o output de nossa function recursiva levelUp().

var levelsUp = function (elem, selector, distance) {
    // Se distance não é definido ainda, configura ele para 0
    if (!distance) {
        distance = 0;
    }

    // Aumenta a distance em 1
    distance++;

    // Obtêm o parent do element atual
    var parent = elem.parentNode;

    // Se alcançamos o parent, retorne a distance
    if (parent.matches(selector)) return distance;

    // Caso contrário, execute recursivamente levelUp() novamente
    return levelsUp(parent, selector, distance);
};

O método levelsUp() será executado várias vezes até encontrar uma correspondência ou atingir o window element e retornará qualquer que seja o valor final da distance (ou -1 se nenhuma correspondência for encontrada).

E com isso, agora temos uma function recursiva.

Um último detalhe

Se não houver nenhum selector correspondente, você pode acabar subindo o suficiente na DOM tree e atingir um element que não suporta o método matches() (como o window).

Antes de tentar usar matches(), vamos primeiro verificar se o parent suporta esse método. Caso contrário, retornaremos -1 e assumiremos que não há correspondência.

var levelsUp = function (elem, selector, distance) {
    // Se distance não é definido ainda, configura ele para 0
    if (!distance) {
        distance = 0;
    }

    // Aumenta a distance em 1
    distance++;

    // Obtêm o parent do element atual
    var parent = elem.parentNode;

    // Se você chegar a um elemento sem método matches(), desiste
    if (!parent.matches) return -1;

    // Se alcançamos o parent, retorne a distance
    if (parent.matches(selector)) return distance;

    // Caso contrário, execute recursivamente levelUp() novamente
    return levelsUp(parent, selector, distance);
};

Fonte

Newsletter de Go Make Things

Blog

Recursão com vanilla JavaScript

doug-source

Um exemplo

Criando uma helper function

Adicionando recursão

Um último detalhe

Fonte

Join Our Newsletter. No Spam, Only the good stuff.

Related