Question

我正在努力清理一些采用的代码 - 有很多重复。

有一组jQuery回调我们得到这样的JSON：

[
{"location":{"id":164,"name":"place 1"},"users":[{"id":1,"name":"joe"},{"id":2,"name":"jack"}]},
{"location":{"id":162,"name":"place 2"},"users":[{"id":3,"name":"joe"},{"id":4,"name":"jon"}]}
]

我完成了这些功能：

function locations_view(r) {
    str = "";

    $.each(r.data, function(k, v) {
        str += v.location.name + "<br />";
        iterate_users(v.users);
    });

    $("#locations").html(str);
} 

function iterate_users(users) {
    str += '<strong>users:</strong>' + users.length + '<br />';

    $.each(users, function(k1, v1) {
        str += "<a href='/users/" + v1.id + "'>" + v1.name + "</a> ";   
    });

    str += "<br />";
}

这似乎有效，但看起来有点难看。有一个更好的方法吗。此外，我想最小化内存消耗（返回字符串而不是全局str导致性能问题）。有没有更好，更优雅的方式来做到这一点？拥有str的多个副本是否会导致问题？就像我的products_view也使用str？

一样

Answer 1

在一步中进行连接可能会快一点，比如

function locations_view(r) {
    var peices = [], br = "<br />";

    $.each(r.data, function(k, v) {
        peices.push(v.location.name, br);
        peices.push.apply(peices, iterate_users(v.users));
    });

    $("#locations").html(peices.join(""));
}

Answer 2

是的，如果其他东西以错误的方式使用str（也就是全局），则会导致问题。最好不要有任何全局变量。您可以将它们更改为：

function locations_view(r) {
    var str = "";

    $.each(r.data, function(k, v) {
        str += v.location.name + "<br />";
        str += iterate_users(v.users);
    });

    $("#locations").html(str);
} 

function iterate_users(users) {
    var str = '<strong>users:</strong>' + users.length + '<br />';

    $.each(users, function(k1, v1) {
        str += "<a href='/users/" + v1.id + "'>" + v1.name + "</a> ";   
    });

    return str + "<br />";
}

那会更好。如果还有其他功能使用iterate_users，则还需要更改它们。

另外，如果您还没有这样做，请考虑转义v1.name中的HTML以防止脚本注入。您也可以使用jQuery / DOM操作。

Answer 3

我已经清理了你的代码：

function locations_view(r){
    var str = ""; // don't forget var
    $.each(r.data, function(k,v){
        str += v.location.name + "<br />";
        str += iterate_users(v.users);  // iterate_users now returns a string, concat it
    });
    $("#locations").html(str);
} 

function iterate_users(users){
    var str = '<strong>users:</strong>' + users.length + '<br />'; // redefine str locally
    $.each(users, function (k1,v1){
        str += '<a href="/users/' + v1.id + '">' + v1.name + '</a> '; // flipped use of ' and ", it's more correct
    });
    return str + "<br />"; // return str
}

我没有看到太多错误。我想可能有更有效的方法去做，为什么要买？这似乎是一个体面的，最重要的：明显的方式。

另外，JSLint，它会伤害你的感情，但会让你头疼

Answer 4

function locations_view(r) {

    var $loc = $("#locations");

    $.each(r.data, function (k, v) {

        $loc.append(v.location.name + "<br/>");
        $loc.append('<strong>users:</strong>' + v.users.length + '<br />');
        $.each(v.users, function (k1, v1) {
           $loc.append("<a href='/users/" + v1.id + "'>" + v1.name + "</a> ");
        });
        $loc.append("<br />");

    });
}

处理串联字符串与另一个函数的最佳方法

4 个答案: