jQueryでulリストを簡単に生成する関数を書いてみた

別にulじゃなくてolでもいいんですが、「もっと簡単にリストを生成したい」とか思ってしまったんで、書いてみた。

まず最初に書いたのがこれ。

Code

$.toList1 = function(arr, callback){
  return '<ul><li>' + $.map(arr, function(x, i){
      return callback.call(this, x, i);
    }).join('</li><li>') + '</li></ul>';
}

実際のリストの内容は引数として渡されるcallback Functionで行う構造なので結構応用が利くはず。

内部処理は変数の宣言を必要としない「いかにもjQuery的」な感じなのだが、やっぱりjQueryに頼りすぎると処理速度が不安になる。

ということで、もう一つ、mapを使わないのも書いてみた。

$.toList2 = function(arr, callback){
  var lst = [];
  for (var i = 0, k = arr.length; i < k; i++)
    lst.push(callback.call(this, arr[i], i));

  return '<ul><li>' + lst.join('</li><li>') + '</li></ul>';
}

Usage

ブログのフィードを取得してリストにして表示する。

$.gFeed({
  'q': 'http://googleblog.blogspot.com/feeds/posts/default'
  }, function(feed){
      $(document.body).append($.toList(feed.entries, function(entry, i){
        return '<a href=\'' + entry.link + '\'>' + entry.title + '</a> ';
      }));
});

処理時間を計測し、比較してみる

書いたら実際に処理にかかる時間を比較しなければ、ということで上記のブログのフィードを取得してリストにして表示する処理を10000 x 100回行い処理速度を比較してみた。

console.time("test");
for (var i = 0, k = 10000; i < k; i++){
  // something...
}
console.timeEnd("test");

10000 x 100 avg.:Result


相対的な比較ということを念のため。

約1.5倍ですか、結構差があるものですね。