jQueryは使っても楽しいのですが、ソースを読むのはもっと楽しかったりします。

いっそjQuery自身にjQueryを読ませたら読むのも楽になるのでは?

jQuery Source Browser

というわけでこさえたのがこちらです。

Open in New Window 
select from the menu on the left

こんなのがあっという魔に作れるところも、jQueryの魅力です。

で、実際にソースを見てみると、白魔術も黒魔術も使いまくりですね。

たとえばjQuery.isType()。toString.call(obj)とはね。

たとえばjQuery.globalEval()はeval()を全く使っていないし。

あとこれ書いて気づいたのですが、jQueryってDOMノードの大きさを変えるだけではなく、変えないのにも訳に立つのですね。

Enjoy!

Dan the jQuerier

HTML+CSS



JS


(function($){

var names = ['jQuery'], srcOf = { 'jQuery':$.toString() };

var jo = $('body');

for (var p in jo) {
  if (typeof jo[p] === 'function'){
    names.push(p);
    srcOf[p] = jo[p].toString().replace(/\t/g, '  ');
  }
}

for (var p in $) {
  if (typeof $[p] === 'function'){
    var n = 'jQuery.' + p;
    names.push(n);
    srcOf[n] = $[p].toString().replace(/\t/g, '  ');
  }
}

var whole  = $('#jQbrowser'), 
    select = $('#jQbrowser select'),
    pre    = $('#jQbrowser pre'),
    iframe = $('#jQbrowser iframe');
whole.height($(window).height() * 0.9);
var selectw =  select.width(),
    prew    = pre.width(),
    preh    = pre.height();

$.map(names.sort(), function(v){
  $('<'+'option/>').text(v).appendTo(select);
});

var urlroot = iframe.attr('src');

select.bind('change', function(ev){
  var name = $(this).val();
  var code = srcOf[name];
  if ($.browser.msie) code = code.replace(/\n/g, '\r\n');
  select.width(selectw).height(preh);
  pre.stop().hide().text(code).width(prew).height(preh).fadeIn();
  iframe.attr('src', urlroot + name + '/');
});

select.width(selectw).height(preh);
pre.width(prew).height(preh).parent().height(preh);

})(jQuery);