精簡了一系列的JavaScript函數

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

儘量避免使用匿名函數，它總是少混亂，如果他們都有名字和聲明的任何外部其他功能。

Answer 3

我會重新調整代碼，這樣的文本處理功能（linkify，hashify，listify）不是each函數內，也不是他們甚至裏面的getTweets本身。如果它在getTweets中，那麼每次調用該函數時都必須重新定義它們。更糟糕的是，在你有他們的each裏面，這些函數被重新定義爲返回的tweet-set中的每個項目。

此外，沒有必要將每個函數的返回值存儲在自己的var中，因爲您以後只使用它們，並且在使用它們之前不執行任何檢查。只需嵌套函數調用。

最後，既然你打電話追加一遍又一遍相同的元素（each內）對我預先查詢的，而不是每次each功能執行

這些變化時查詢它該元素，沿我爲自己的性能偏好所做的一些事情在下面粘貼的代碼示例中展示。

還有其他的事情我會做，但是我不會在這裏展示它們 - 你可以在我的發佈的答案Trouble Converting jQuery Script to Plugin中看到它 - 關於製作一個與你的代碼完全相同的jQuery插件的問題） 。您應該將格式化的tweets存儲在一個數組中，而不是在獲取時添加它們。建立該數組後，您應該將它合併爲一個字符串，然後調用該字符串追加一次。製作這個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 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