如何使这段代码更清晰

How to make make this code clearer?

本文关键字：清晰 代码 何使这 段代码      更新时间：2023-09-26

如果这对你来说是一个简单的问题，我很抱歉。但是我真的很纠结这个问题

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

您应该尝试寻找TemplateEngine -它可以减少代码计数并使其更清晰。你推荐哪些Javascript模板引擎?

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

这里有一种方法(不止一种可能的解决方案)来优化你的代码:

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

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

你可以这样做:

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

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

相关文章：