使用js callback的一个小技巧

很多情况下，我们需要跨域读取数据，或者是调用别人json格式的api，都要用到js callback这种机制。通常做法是页面上定义一个A方法，再调用第三方的url并且把回调函数名A传过去。这样做固然没什么问题，但有没有更好的方法呢？

用过jQuery的同学肯定都知道，jQuery有一个getJSON的方法，只需要两个参数（callback地址和匿名函数）就能正常工作。摘录官方示例如下：

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tag
mode=any&format=json&jsoncallback=?",

        function(data){
        $.each(data.items, function(i,item){
            $("<img/>").attr("src", item.media.m).appendTo("#images");
            if ( i == 3 ) return false;
        });
    });

很神奇吧！在这个例子中，我们并不用指定callback函数名，回调也仅仅只是一个匿名函数而已，那么它是怎么完成函数调用的呢？去看下jQuery的源代码，你会 发现其实原理很简单。如果懒得看太多代码，看看下面我写的山寨版loadJSON，也能明白。

function loadJSON(url,callback){

        var cn = "jscallback"+(+new Date());
        var s = document.createElement("script");
        s.type = "text/javascript";
        s.src = url+cn;
        window[cn] = callback;
        document.getElementsByTagName("head")[0].appendChild(s);
    };
    loadJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=",function(o){
        for(var i=0;i<3;i++){
            var img = document.createElement("img");
            img.src = o.items[i].media.m;
            document.body.appendChild(img);
        }
    });

演示地址