javascript - 如何使这段代码更清晰？

Question

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

在我们的应用程序中，每个页面都有大量的 ajax 调用。我们正在使用 jQuery ajax。目前我们正在做的是

当我们从 like 获得结果时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 - 它可以减少代码数量并使其更清晰。 你推荐什么 Javascript 模板引擎？

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

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

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

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