Javascript вложенный цикл

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:

• https://github.com/janl/mustache.js/
• https://github.com/jquery/jquery-tmpl

Answer 2

Вы можете использовать функцию jQuery each() , чтобы сделать этот вид лучше:

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 , чтобы избежать этого. Или, как указывает Детройтпро, используйте шаблонизатор. Кроме того, остерегайтесь последствий для производительности при использовании $.each - это медленнее, чем цикл for, но это не будет иметь большого значения, если вы не сделаете это много раз.

Answer 3

Если вы используете jQuery, у него есть методы fiew, которые могут вам помочь:

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();
}

Answer 4

было бы заманчиво поместить два внутренних цикла в их собственные функции. Это упростит код, удалив все эти вложенные дочерние ссылки. Хотя вызовы функций будут стоить времени, многие ссылки на массивы будут удалены, так что вы, вероятно, в конечном итоге окажетесь на месте. что еще более важно, это был бы более простой код.