如何使这段代码更清晰？

对不起，如果这是一个简单的问题给你。但我真的很难与这个问题如何使这段代码更清晰？

在我们的应用程序中，我们有大量的每个页面的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。

来源

2013-04-29 PSR

你可以在句子之间使用空格（除了javascript和jquery）吗？ – 2013-04-29 11:30:10

这不是一个真正的问题，可能会被拒绝。 – MMM 2013-04-29 11:30:37

一个简单的改进就是使用模板引擎，比如把手。或者你可以更进一步，用knockoutjs，angularjs或类似的东西。 – NilsH 2013-04-29 11:30:41

您应该尝试寻找TemplateEngine - 它可以允许减少代码数并使其更清晰。 What Javascript Template Engines you recommend?

来源

2013-04-29 11:31:43

也许，创建一个新的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); 
    }

来源

2013-04-29 11:36:11 Kirill

您应该运行通过像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); 
}

来源

2013-04-29 11:38:10

var table = $（document.createElement（'table'））;'代码中有一些拼写错误...错过了'）'在jquery选择器中关闭。 – 2013-04-29 12:05:00

@圆顶，谢谢你发现。已修复它。 :) – 2013-04-29 12:06:20

你可以这样做会更好，因为这是一种更好，更易于维护的方法。

来源

2013-04-29 11:51:21

如何使这段代码更清晰？

回答

相关问题