Question

我在Javascript中编写的代码不多，但我有以下片段，恕我直言看起来很可怕，我必须经常在我的代码中进行这种嵌套迭代。有没有人有更漂亮/更容易阅读的解决方案？

function addBrowse(data) {
var list = $('<ul></ul>')

for(i = 0; i < data.list.length; i++) {
    var file = list.append('<li class="toLeft">' + data.list[i].name + '</li>')
    for(j = 0; j < data.list[i].children.length; j++) {
        var db = file.append('<li>' + data.list[i].children[j].name + '</li>')
        for(k = 0; k < data.list[i].children[j].children.length; k++)
            db.append('<li class="toRight">' + data.list[i].children[j].children[k].name + '</li>')
    }
}

$('#browse').append(list).show()}

这是一个示例数据元素

{"file":"","db":"","tbl":"","page":"browse","list":[
  {
     "name":"/home/alex/GoSource/test1.txt",
     "children":[
        {
           "name":"go",
           "children":[
              {
                 "name":"validation1",
                 "children":[

                 ]
              }
           ]
        }
     ]
  },
  {
     "name":"/home/alex/GoSource/test2.txt",
     "children":[
        {
           "name":"go",
           "children":[
              {
                 "name":"validation2",
                 "children":[

                 ]
              }
           ]
        }
     ]
  },
  {
     "name":"/home/alex/GoSource/test3.txt",
     "children":[
        {
           "name":"go",
           "children":[
              {
                 "name":"validation3",
                 "children":[

                 ]
              }
           ]
        }
     ]
  }]}

非常感谢

Answer 1

查看JavaScript模板引擎可能会更好：

Answer 2

您可以使用jQuery's each() function使其看起来更漂亮：

function addBrowse(data) {
  var list = $('<ul></ul>')

  $.each(data.list, function(_, item) {
    var file = list.append('<li class="toLeft">' + item.name + '</li>');
    $.each(item.children, function(_, child) {
      var db = file.append('<li>' + child.name + '</li>');
      $.each(child.children, function(_, grandchild) {
        db.append('<li class="toRight">' + grandchild.name + '</li>');
      });
    });
  });

  $('#browse').append(list).show();
}

但是，问题在于您引入了XSS个漏洞。但是，您可以使用jQuery's text function来避免这种情况。或者，正如底特律指出的那样，使用模板引擎。此外，请注意使用$.each时的性能影响 - 它比for循环慢，但除非您多次执行此操作，否则无关紧要。

Answer 3

将两个内部循环放在自己的函数中是很诱人的。这将通过删除所有嵌套的子引用来简化代码。虽然函数调用会花费很多时间，但很多数组引用都会被删除，所以你可能最终会成功。更重要的是，这将是更简单的代码。

Answer 4

如果你正在使用jQuery，它有一些方法可以帮助你：

function addBrowse(data) {
    var list = $(document.createElement('ul')),
        li = $(document.createElement('li')),
        get_li;

    get_li = function(value, className) {
        className = className === undefined ? '' : className;
        return li.clone().text(value).addClass(className);
    };

    $.each(data.list, function (i, v) {
        list.append(get_li(v.name, 'toLeft'));
        $.each(v.children, function(i, v2) {
            list.append(get_li(v2.name));
            $.each(v2.children, function(i, v3) {
                list.append(get_li(v3.name, 'toRight'));
            });
        });
    });
    $('#browse').append(list).show();
}

Javascript嵌套循环

4 个答案: