Javascript 处理将字符串与另一个函数连接的最佳方法

我正在清理一些被采用的代码——有很多重复

有一组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 />";
}

功能位置\u视图（r）{
str=“”；
$。每个（r.数据，函数（k，v）{
str+=v.location.name+“
”；
迭代用户（v.users）；
});
$（“#位置”）.html（str）；
} 
函数迭代用户（用户）{
str+='用户：'+users.length+'
'；
$.each（用户、函数（k1、v1）{
str+=”；
});
str+=“
”；
}

---

这似乎管用，但看起来有点难看。有没有更好的办法。另外，我希望最小化内存消耗（返回字符串而不是使用全局

str

会导致性能问题）。有没有更好、更优雅的方法？拥有多个

str

副本会导致问题吗？例如，如果我的产品视图也使用了

str

？

是，如果其他产品以错误的方式（即全局）使用

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 />";
}

功能位置\u视图（r）{
var str=“”；
$。每个（r.数据，函数（k，v）{
str+=v.location.name+“
”；
str+=迭代用户（v.users）；
});
$（“#位置”）.html（str）；
} 
函数迭代用户（用户）{
var str='用户：'+users.length+'
'；
$.each（用户、函数（k1、v1）{
str+=”；
});
返回str+“
”；
}

这样会更好。如果有其他函数使用

迭代用户

，它们也需要更改

---

此外，如果您还没有这样做，请考虑在<代码> V1. Name < /Cord>中跳过HTML，以防止脚本注入。您也可以改用jQuery/DOM操作。

我已经清理了您的代码：

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
}

功能位置\u视图（r）{
var str=“”；//不要忘记var
$。每个（r.数据，函数（k，v）{
str+=v.location.name+“
”；
str+=iterate_users（v.users）；//iterate_users现在返回一个字符串，concat
});
$（“#位置”）.html（str）；
} 
函数迭代用户（用户）{
var str='用户：'+users.length+'
；//在本地重新定义str
$.each（用户、函数（k1、v1）{
str+=''；//翻转了“and”的用法，更正确
});
return str+“
”；//return str
}

我看不出有什么错。我想可能有更有效的方法来做，为什么？这似乎是一个体面的，而且最重要的是：显而易见的方法

---

而且，它会伤害你的感情，但也会让你头疼

一步串联起来可能会快一点，比如

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

功能位置\u视图（r）{
var peices=[]，br=“
”；
$。每个（r.数据，函数（k，v）{
peices.push（v.location.name，br）；
peices.push.apply（peices，迭代用户（v.users））；
});
$（“#位置”）.html（peices.join（“”）；
}

功能位置\u视图（r）{
变量$loc=$（“#位置”）；
$。每个（r.数据，函数（k，v）{
$loc.append（v.location.name+“
”）；
$loc.append（“用户：”+v.users.length+“
”）；
$。每个（v.users，function（k1，v1）{
$loc.追加（“”）；
});
$loc.追加（“
”）；
});
}

使用globals总是不被鼓励的。我不知道为什么它会导致巨大的性能变化……我认为str问题会发生，但我重新加载了20次，但无法让它做到这一点。仅举一个例子，但好奇的是javascript引擎是否能够正确地管理它。凭直觉，我同意你的看法。在最初的问题中但是，由于将str作为参数传递，我遇到了一些问题。

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 />");

    });
}