Question

有更好，更简洁的方法来做到这一点：

function getTweets(){
                $.getJSON("http://search.twitter.com/search.json?callback=?&q=superfad",

                function(data){
                    tweetsLoaded = true;
                    $.each(data.results, function(i,item){
                        var textPlain = item.text;
                        var textLinked = linkify(textPlain);
                        var textHashed = hashify(textLinked);
                        var textListed = listify(textHashed);

                        function linkify(tweet){
                            return tweet.replace(/(http:\/\/[^\s]*)/g, "<a class='twtr-link' target=\"_blank\" href=\"$1\">$1</a>");
                        }

                        function hashify(tweet){
                            return tweet.replace(/(^|\s+)#(\w+)/gi, function(m, before, hash) {
                                return before + '<a target="_blank" class="twtr-hashtag" href="http://twitter.com/search?q=%23' + hash + '">#' + hash + '</a>';
                              });
                        }

                        function listify(tweet) {
                            return tweet.replace(/\B[@＠]([a-zA-Z0-9_]{1,20})/g, function(m, username) {
                                return '<a target="_blank" class="twtr-atreply" href="http://twitter.com/intent/user?screen_name=' + username + '">@' + username + '</a>';
                            });
                        }

                        $("#twitter_results").append('<li class="twitter"><img class="twitter_img" src="' + item.profile_image_url + '"/>'+ textListed + '</li>');
                    });
                });
            } //end getTweets

Answer 1

// define this globally
function stuffify(match, group1, group2) {
  switch (group1 || group2) {
    case 'http':
      return '<a class="twtr-link" target="_blank" href="' + match + '">' + match + '</a>';
    case '#':
      return '<a class="twtr-hashtag" target="_blank" href="http://twitter.com/search?q=' + encodeURIComponent(match) + '">#' + match + '</a>'

    case '@':
      return '<a class="twtr-atreply" target="_blank" href="http://twitter.com/intent/user?screen_name=' +  encodeURIComponent(match) + '">@' + match + '</a>';
    default: 
      return match;
  }
}

function(data){
  tweetsLoaded = true;
  var interestingParts = /(http):\/\/\S+|(#|@)[^\s.,!?;^()\[\]<>{}]+/g;

  $.each(data.results, function(i,item) {
    var newText = item.text.replace(interestingParts, stuffify);

    $("#twitter_results").append('<li class="twitter"><img class="twitter_img" src="' + item.profile_image_url + '"/>'+ newText + '</li>');
  });
}

Answer 2

我会重新调整代码，使文本操作函数（linkify，hashify，listify）不在each函数内部，也不在内部getTweets本身。如果它在getTweets，那么每次调用该函数时，都必须重新定义它们。更糟糕的是，在您拥有它们的each内部，为返回的推文集中的每个项目重新定义了这些函数。

此外，不需要将每个函数的返回存储在它自己的var中，因为之后只使用它们一次并且在使用它们之前没有执行任何检查。只需嵌套函数调用。

最后，由于你在同一个元素上（在each内）反复调用append，我预先查询了该元素，而不是每次执行each函数时都查询它/ p>

这些更改以及我为自己的性能偏好所做的一些事情都会在下面粘贴的代码示例中展示。

我还会做其他事情，但是我不会在这里展示它们 - 你可以在Trouble Converting jQuery Script to Plugin发布的答案中看到它 - 关于制作一个jQuery插件的问题。你的代码）。您应该将格式化的推文存储在一个数组中，而不是在获取它时附加每个推文。构建该数组之后，您应该将它组合成一个字符串，并使用该字符串调用append一次。使这个jQuery插件对你也很好，因为它不需要你修改代码来改变目标DOM元素。考虑使用String.prototype.link也会很好。

（演示：http://jsfiddle.net/JAAulde/fQ3Lp/2/）

var getTweets = ( function()
{
    /* Privatized text manipulation functions */
    var linkify = function( tweet )
    {
        return tweet.replace( /(http:\/\/[^\s]*)/g, "<a class='twtr-link' target=\"_blank\" href=\"$1\">$1</a>" );
    };

    var hashify = function( tweet )
    {
        return tweet.replace( /(^|\s+)#(\w+)/gi, function(m, before, hash)
        {
            return before + '<a target="_blank" class="twtr-hashtag" href="http://twitter.com/search?q=%23' + hash + '">#' + hash + '</a>';
        } );
    };

    var listify = function( tweet )
    {
        return tweet.replace(/\B[@＠]([a-zA-Z0-9_]{1,20})/g, function(m, username)
        {
            return '<a target="_blank" class="twtr-atreply" href="http://twitter.com/intent/user?screen_name=' + username + '">@' + username + '</a>';
        } );
    };

    var $twitterResultTarget = $( "#twitter_results" );

    /* The actual function which is stored in `getTweets`   */
    return function()
    {
        $.getJSON( "http://search.twitter.com/search.json?callback=?&q=superfad", function( data )
        {        
            tweetsLoaded = true;
            $.each( data.results, function( i, item )
            {
                $twitterResultTarget
                    .append( [
                        '<li class="twitter"><img class="twitter_img" src="',
                        item.profile_image_url,
                        '"/>',
                        listify( hashify( linkify( item.text ) ) ),
                        '</li>'
                    ].join( '' ) );
            } );
        } );
    }
}() );

Answer 3

尽量避免使用匿名函数，如果它们都有名称并且在任何其他函数之外声明，它总是不那么令人困惑。

Answer 4

我可能会用jQuery插件样式写，并且在回调中使用split而不是replace和HTML：

(function($){

  function getTweets(q) {

    var

      $set = this,

      prefixes = {
        'h': 'h',
        '#': 'http://twitter.com/search?q=%23',
        '@': 'http://twitter.com/intent/user?screen_name='
      },

      classes = {
        'h': 'twtr-link',
        '#': 'twtr-hashtag',
        '@': 'twtr-atreply'
      };

    $.getJSON(
      "http://search.twitter.com/search.json?callback=?&q=" + encodeURIComponent(q),
      function(data){
        $.each(data.results, function(i, item){

          var
            $li = $('<li class="twitter"></li>')
              .append('<img class="twitter_img" src="' + item.profile_image_url + '"/> ');

          $.each(
            item.text.split(
              /(\s+)|(https?:\/\/[^\s]*)|(#\w+)|(@[a-zA-Z0-9_]{1,20})/g
            ),
            function(i, chunk) {
              if (/^(https?:\/\/|@|#)/.test(chunk)) {
                $('<a target="_blank"></a>')
                  .addClass(classes[chunk[0]])
                  .attr('href', prefixes[chunk[0]] + chunk.substr(1))
                  .text(chunk)
                  .appendTo($li);
              } else if (chunk) {
                $li.append(document.createTextNode(chunk));
              }
            }
          );

          $li.appendTo($set);

        });
      }
    );

  }

  $.fn.getTweets = getTweets;

})(jQuery);

然后这样称呼：

$('#twitter_results').getTweets('superfad');

我的$ 0.02

精简一系列javascript函数

4 个答案: