Question

使用jQuery构建DOM有一种可行的方法吗？看一下这段代码的附加方法......

$.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>'));
    });
});

我认为（或者至少我希望）有更好的方法。你能重构一下这个更清晰吗？

Answer 1

查看模板插件。

http://plugins.jquery.com/project/jquerytemplate

您的代码现在看起来像，

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

修改

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

如果我借用'string.Format' method from this post，您可以执行类似
的操作
$.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('')); } );

编辑：Modified the string.Format function以基于名称的密钥开头。现在，您的模板代码可以使用{name}，{descr}而不是{0}，{1}。该函数将尝试在传递给函数的参数中查找具有相同名称的属性。

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

http://www.west-wind.com/WebLog/posts/300754.aspx

Answer 2

我不会在每个内部追加。最好使用stringbuilder或push to a array并使用.join（）

追加一次

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

网上有许多性能比较，详细介绍了两种选项的性能。一个here。

数组连接示例

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

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

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

jQuery表行构建器

2 个答案: