Question

嘿所以我有一个简单的函数，以递归方式walkTheDOM，我想添加一些额外的功能。

function walkTheDOM(node) {
    if( node.hasChildNodes() ) {
        Array.prototype.forEach.call(node.children, walkTheDOM );
    } 
}

附加功能，以便我可以对每个功能应用一些东西。使用applyFn对函数遍历的每个元素执行操作。

function walkTheDOM(node,applyFn) {
    //do something to each node
    !applyFn || applyFn(node);
    if( node.hasChildNodes() ) {
        forEach.call(node.children, function(childNode){ return walkTheDOM(childNode, applyFn); } );
    } else {
        console.log("Is Leaf:", node);   
    }
}

我想清理代码与第一个代码示例类似，特别是这一行：

Array.prototype.forEach.call(node.children, walkTheDOM );

因此它调用applyFn而不必将walkTheDOM函数包装在函数内。

是否可以通过调用forEach.call(child, walkTheDom.call(child, applyFn)之类的idk来完成此操作？

基本上，无论如何都要在没有创建这种配置的情况下向这个函数添加额外的参数，其中外部匿名函数包装我的递归调用以添加我的applyFn参数（应用函数）？

我不关心使用某种jQuery函数或其他库来完成此任务，所以请不要用其他方式来完成任务，例如“查看jQuery lib XYZ ...”或“jQuery已经这样做了，试试jQuery.libXYZ ......”等......我只是在JavaScript中探索递归和函数调用。我不关心已经执行此功能的其他第三方，这是我的问题。感谢。

修改也许这个代码可以更好地理解，这更像是一种经典的方法。

function walkTheDOM(node, applyFn) {
    applyFn(node);
    if (node.hasChildNodes()) {
        for (var i = 0; i < node.children.length; i++) {
            walkTheDOM(node.children[i],applyFn);
        }
    }
}

Answer 1

git checkout <branch>

var forEach = Array.prototype.forEach;

var root = document.getElementById("root");

function applyFn(element, index) {
    // do stuff         
    if (element.hasChildNodes()) {
      document.getElementsByClassName("result")[0].innerHTML += "<br>Do something with this node: " + element.className; 
      walkTheDOM(element)
    } else {
        console.log("Is Leaf:", element);   
    }  
}

function walkTheDOM(node) {
    if( node.hasChildNodes() ) {
        forEach.call(node.children, applyFn);
    } else {
        console.log("Is Leaf:", node);   
    }    
}

walkTheDOM(root);

jsfiddle http://jsfiddle.net/zcwc633k/4/

forEach函数，带有额外参数

1 个答案: