如何使这段代码更清晰？答案

【问题标题】：How to make make this code clearer?如何使这段代码更清晰？
【发布时间】：2013-04-29 11:28:46
【问题描述】：

如果这对你来说是一个简单的问题，我很抱歉。但我真的在努力解决这个问题

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

【问题讨论】：

句子之间可以使用空格吗（除了javascript和jquery）？
这不是一个真正的问题，可能会被否决。
一个简单的改进是使用模板引擎，比如把手。或者你可以更进一步，使用 knockoutjs、angularjs 或类似的。
您是否尝试过使用 KnockoutJS 编写模板和处理绑定？
尝试使用模板引擎，如jsrender

标签： javascript jquery

【解决方案1】：

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

【讨论】：

【解决方案2】：

您应该通过 JSLint 或 JSHint 之类的 linting 引擎运行您的代码，并且您应该熟悉良好的实践。

这是优化代码的一种方法（不止一种可能的解决方案）：

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

【讨论】：

var table = $(document.createElement('table')); 代码中有一些拼写错误...缺少 jquery 选择器中的 ) 关闭。

【解决方案3】：

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

【讨论】：

【解决方案4】：

你可以这样做：

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

使用其他人建议的模板引擎会更好，因为它是一种更好、更易于维护的方法。

【讨论】：