如何使這段代碼更清晰？

Question

對不起，如果這是一個簡單的問題給你。但我真的很難與這個問題

在我們的應用程序中，我們有大量的每個頁面的ajax調用。我們正在使用jQuery ajax。目前我們正在做的是

當我們從類似myresults得到結果時，我們傳遞給函數populate，在那裏我們正在構建結果。

function populate(myresults) 
{   
    var str='<table>';  
    for(var i in myresults){ 
     str+='<tr>'; 
     str+=myresults[i].name; 
     str+='</tr>';  
    } 
    str+='</table>'; 

    $('#divId').html(str); 
} 

不完全是我們正在所有地方建造餐桌。代碼工作完美，但我認爲這樣寫代碼並不是正確的方法。我怎樣才能美化我的代碼。我可以使用jQuery或JavaScript。

Answer 1

您應該嘗試尋找TemplateEngine - 它可以允許減少代碼數並使其更清晰。 What Javascript Template Engines you recommend?

Answer 2

也許，創建一個新的DOM元素更正確？

像這樣：

function populate(myresults) 
    {   
    var str= $('<table />)';  
     for(var i in myresults){ 
     str.append($('<td />').text(myresults[i].name).appendTo($('<tr />'))); 
     } 
    $('#divId').empty().append(str); 
    } 

Answer 3

您應該運行通過像JSLint的或JSHint一個掉毛引擎你的代碼，你應該熟悉很好的做法。

這裏的（超過一個可能的解決方案）的一種方式來優化你的代碼：由別人的建議

function populate(myResults) 
{   
    var tab = $('<table />');  
    for(var i in myResults){ 
     if (myResults.hasOwnProperty(i)) { 
      var tr = $('<tr />'); 
      tr.append($('<td /'>, {text: i.name})); 
      tab.append(tr); 
     } 
    } 
    $('#divId').append(tab); 
} 

使用模板引擎：

function populate(myresults) { 
    var table = $(document.createElement('table'));  

    $(myresults).each(function (i) { 
     var row = $(document.createElement('tr')), 
      cell = $(document.createElement('td')).text(myresults[i].name); 
     row.append(cell); 
     table.append(row); 
    }); 

    $('#divId').append(table); 
} 

Answer 4

你可以這樣做會更好，因爲這是一種更好，更易於維護的方法。