jQuery表行生成器

使用jQuery构建DOM有一种可维护的方法吗？ 看看这段代码的append方法

$.getJSON("api/test", function(data) {
    $.each(data, function () {
        $("#tests").append($('<tr><td><input type="radio" name="' + this["name"] + '"/><td>' + this["name"] + '</td><td>' + this["descr"] + '</td></tr>'));
    });
});

$.getJSON（“api/test”，函数（数据）{
$。每个（数据、函数（）{
$（“#测试”）。追加（$（''+此[“名称”]+''+此[“说明”]+''）；
});
});

---

我认为（或者至少我希望）有更好的办法。你能把它重构得更清晰吗？

看看模板插件

您的代码现在可以如下所示：

$.getJSON("api/test", 
    function(data) 
    {
        var t = $.template('<tr><td><input type="radio" name="{name}"/><td>{name}</td><td>{descr}</td></tr>');
        $.each(data, function () 
        {
            $("#tests").append(t, this);
        }
    }
  );

$.getJSON（“api/test”，
功能（数据）
{
var t=$.template（'{name}{descr}'）；
$。每个（数据、函数（）
{
$（“#测试”）。附加（t，this）；
}
}
);

编辑

正如redsquare正确指出的那样，如果您有大量的行，那么在每次迭代中进行DOM操作可能会非常慢。除非您分析了代码并发现这个特定循环是瓶颈，否则不要更改代码

如果我借你的钱，你可以这样做

$.getJSON("api/test", 
    function(data) 
    {
        var template = '<tr><td><input type="radio" name="{name}"/><td>{descr}</td><td>{1}</td></tr>';
        var html = [];
        $.each(data, function () 
        {
            html.push(template.format(this));
        }
        $('#tests').append(html.join(''));
    }
  );

$.getJSON（“api/test”，
功能（数据）
{
变量模板='{descr}{1}'；
var html=[]；
$。每个（数据、函数（）
{
push（template.format（this））；
}
$（'#tests'）.append（html.join（''）；
}
);

编辑：采用基于名称的键。现在，模板代码可以使用{name}，{descr}而不是使用{0}，{1}。函数将尝试在传递给函数的参数中查找具有相同名称的属性

另外，看看Rick Strahl的方法，看看它是否对你更有意义

---

查看模板插件

您的代码现在可以如下所示：

$.getJSON("api/test", 
    function(data) 
    {
        var t = $.template('<tr><td><input type="radio" name="{name}"/><td>{name}</td><td>{descr}</td></tr>');
        $.each(data, function () 
        {
            $("#tests").append(t, this);
        }
    }
  );

$.getJSON（“api/test”，
功能（数据）
{
var t=$.template（'{name}{descr}'）；
$。每个（数据、函数（）
{
$（“#测试”）。附加（t，this）；
}
}
);

编辑

正如redsquare正确指出的那样，如果您有大量的行，那么在每次迭代中进行DOM操作可能会非常慢。除非您分析了代码并发现这个特定循环是瓶颈，否则不要更改代码

如果我借你的钱，你可以这样做

$.getJSON("api/test", 
    function(data) 
    {
        var template = '<tr><td><input type="radio" name="{name}"/><td>{descr}</td><td>{1}</td></tr>';
        var html = [];
        $.each(data, function () 
        {
            html.push(template.format(this));
        }
        $('#tests').append(html.join(''));
    }
  );

$.getJSON（“api/test”，
功能（数据）
{
变量模板='{descr}{1}'；
var html=[]；
$。每个（数据、函数（）
{
push（template.format（this））；
}
$（'#tests'）.append（html.join（''）；
}
);

编辑：采用基于名称的键。现在，模板代码可以使用{name}，{descr}而不是使用{0}，{1}。函数将尝试在传递给函数的参数中查找具有相同名称的属性

另外，看看Rick Strahl的方法，看看它是否对你更有意义

---

我不会在each中追加。最好使用stringbuilder或推送到数组并用.join（）追加一次

选择取决于您尝试为哪个浏览器进行优化。由于屏幕的原因，附加到DOM是非常具有侵入性的，因此我会尽量减少调用.append的次数

网络上有许多性能比较，详细讨论了这两个选项的性能

数组联接示例

$.getJSON("api/test", 
    function(data) 
    {
        var rowsToAppend=[];

        $.each(data, function () 
        {
            rowsToAppend.push( '<tr><td></td></tr>' );
        }

        $("#tests").append( rowsToAppend.join() );
    }
  );

$.getJSON（“api/test”，
功能（数据）
{
var rowsToAppend=[]；
$。每个（数据、函数（）
{
rowsToAppend.push（“”）；
}
$（“#测试”）.append（rowsToAppend.join（））；
}
);

我不会在each中追加。最好使用stringbuilder或推送到数组并用.join（）追加一次

选择取决于您尝试为哪个浏览器进行优化。由于屏幕的原因，附加到DOM是非常具有侵入性的，因此我会尽量减少调用.append的次数

网络上有许多性能比较，详细讨论了这两个选项的性能

数组联接示例

$.getJSON("api/test", 
    function(data) 
    {
        var rowsToAppend=[];

        $.each(data, function () 
        {
            rowsToAppend.push( '<tr><td></td></tr>' );
        }

        $("#tests").append( rowsToAppend.join() );
    }
  );

$.getJSON（“api/test”，
功能（数据）
{
var rowsToAppend=[]；
$。每个（数据、函数（）
{
rowsToAppend.push（“”）；
}
$（“#测试”）.append（rowsToAppend.join（））；
}
);

这是一种低效的方法。最好是使用字符串，或者最好是推送到数组并只追加一次。对于大数据集，这将导致爬行。这是一种低效的方法。最好是使用字符串，或者最好是推送到数组并只追加一次。对于大数据集，这将导致爬行对于数据，这将爬行是的，在一个循环中执行几个DOM操作将非常缓慢。但是在你的帖子中，你没有考虑作者的原始问题。我相信他可以计算出要推送到数组的标记。关键点不是要引导他走慢路。你错过了作者问题的关键点。他没有完成lain说代码比较慢，他觉得保持HTML的这种方式是不可维护的，我可以想象为什么。我不是说你没有提出在循环中进行dom操作的有效观点，而是说他可以解决“标记”问题，这意味着你甚至没有回答最初的问题。是的，进行了多次dom操作循环中的将非常慢。但是在你的帖子中，你没有注意到作者的原始问题。我相信他可以计算出将其推送到数组的标记。关键点不是要引导他走慢的道路。你错过了作者问题的关键点。他没有抱怨代码速度慢，他觉得保留HT这种方式是不可维护的，我可以想象为什么。我不是说你没有提出在循环中进行dom操作的有效观点，而是说他可以解决“标记”问题，这意味着你甚至没有回答最初的问题。