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

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

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

如何让这个代码更清晰？

4 个答案: