處理連接字符串與另一個函數的最佳方法

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

是的，如果別的東西以錯誤的方式使用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 2

我已經清理你的代碼：

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="https://stackoverflow.com/users/' + v1.id + '">' + v1.name + '</a> '; // flipped use of ' and ", it's more correct 
    }); 
    return str + "<br />"; // return str 
} 

我看不出有任何不妥的地方。我想可能有更有效的方法來做到這一點，買什麼？這似乎是一個體面的，最重要的是：明顯的方式來做到這一點。

此外，JSLint，它會傷害你的感情，但節省您的頭痛

Answer 3

這可能是有點快一步到位做串聯，像

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

    }); 
}