Javascriptネストループ

Question

私はJavascriptで多くのコードを書いていませんが、IMHOがひどく見える以下のスニペットがあり、コード内でこのネストされた繰り返しを頻繁にやらなければなりません。誰かがもっときれいな/読みやすいソリューションを持っていますか？ここで

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

JavaScriptのテンプレットエンジンに見て良いかもしれないサンプルデータ要素

{"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

です：

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

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を使用することができます。あるいは、Detroitproが指摘するように、テンプレートエンジンを使用します。また、$.eachを使用した場合のパフォーマンスへの影響に注意してください。ループ回数がforよりも遅いですが、何度もやらなければそれほど重要ではありません。

Answer 3

2つの内部ループを独自の機能に配置することが魅力的です。これにより、これらのネストされたすべての子参照を削除することによってコードが単純化されます。関数呼び出しは時間がかかりますが、多くの配列参照が削除されるため、おそらく正方形になるでしょう。もっと重要なことは、より簡単なコードになります。

Answer 4

あなたは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(); 
}