jQuery重连接答案

【问题标题】：Jquery heavy concatenationjQuery重连接
【发布时间】：2012-03-21 02:05:15
【问题描述】：

考虑以下关于 Twitter API 的代码 sn-p。 data.followers_count 如果放置在锚标签中，则不起作用。由于括号很多，我无法解决一些简单的串联问题。任何帮助是极大的赞赏。

function(data){
   $('#twitter').html( document.getElementById('twitter').innerHTML + twitterusername[i] + ' ' +
   <a href='someURL' title='someTitle'>data.followers_count</a> + ' Followers' + '<br/>');
}

【问题讨论】：

在这里为您创建了演示 jsfiddle.net/vqnFA/6 ，从下拉列表中选择任何国家，您会看到不同之处，希望这会有所帮助，就像这些人正确指出您在锚标签周围缺少引号一样，干杯！跨度>
你可以在div上追加，不需要全部替换。

标签： php jquery html json

【解决方案1】：

不确定您是否不小心发布了缺少引号的代码，但最好根据您发布的内容猜测。

function(data)
{
    $('#twitter').append( twitterusername[i] + 
      "<a href='someURL'title='someTitle'>" +
      data.followers_count + "</a> Followers<br/>");
}

【讨论】：

【解决方案2】：

我不知道它是否在复制和粘贴时丢失了，但你没有引用你的 a 标签，它应该是这样的：

function(data) {
   $('#twitter').html( document.getElementById('twitter').innerHTML + twitterusername[i]
     + ' ' + "<a href='someURL' title='someTitle'>" + data.followers_count
     + '</a> Followers<br/>');
}

【讨论】：

【解决方案3】：

只需将它们分解成简单的部分

function(data) {

    //twitter container and it's original HTML
    var twitter = $('#twitter');
    var twitterHTML = twitter.html();

    //your link
    var link = $('<a></a>').attr('href', 'someUrl').text(data.followers_count);

    //everything in an array and joined into a string
    var newHtml = [twitterHTML, twitterusername[i], ' ', link, ' Followers<br/>'].join('');

    //put back in
    twitter.html(newHtml);
}

马上！没有连接，也没有加号！

或者更短的解决方案（我刚刚清理了代码并没有注意到它是一个附加操作）：

function(data) {

    //build the link
    var link = $('<a></a>').attr('href', 'someUrl').text(data.followers_count);

    //build the HTML
    var newHtml = [twitterusername[i], ' ', link, ' Followers<br/>'].join('');

    //append HTML
    $('#twitter').append(newHtml);
}

【讨论】：

非常有趣和干净的解决方案:)
对这个干净的解决方案投反对票的人非常嫉妒。讨厌的人会讨厌。
它的价值：看看下面的jsperf.com/jquery-append-vs-html 请记住，调用 .html() 两次将导致所需时间增加一倍。其他一些有趣的阅读：stackoverflow.com/questions/3015335/jquery-html-vs-append。在冗余中声明四个变量，Array jQuery 方法比 .concat() 和类似的方法更快，但永远不会达到本机连接“+”，并且在使用数组时可以说没有连接是公平的。最后（参考第二个链接：jQuery进行的求值次数是天文数字。
不要误会我的意思，它看起来很容易，但令人痛苦的是多余的。我的意思是反对票没有冒犯，但从实际的角度来看，它值得投票。
这不仅仅是关于效率，你必须考虑什么是好的实践，从专业的角度来看什么是合格的编码以及许多其他因素。工作代码并不意味着它是好的代码或确实是合适的答案。想象一下，一段时间后人们看到这段代码并且这是公认的答案，他们开始编写这样的代码，而在你之前，它开始在源代码中到处出现。重点是永远不要跳过批判性思维，尤其是在向他人提供见解时。