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
Top comments (0)