使用js callback的一个小技巧
In: 前端开发
3
04
2009
很多情况下，我们需要跨域读取数据，或者是调用别人json格式的api，都要用到js callback这种机制。通常做法是页面上定义一个A方法，再调用第三方的url并且把回调函数名A传过去。这样做固然没什么问题，但有没有更好的方法呢？
用过jQuery的同学肯定都知道，jQuery有一个getJSON的方法，只需要两个参数（callback地址和匿名函数）就能正常工作。摘录官方示例如下：
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=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);
}
});
演示地址
7 Responses to 使用js callback的一个小技巧
Miller
04月 3rd, 2009 at 11:32 pm
这样确实省去了比较恶心的自己管理具名函数的麻烦，代码里都给做了，但是每次调用都会生成一个引用，这里可以考虑优化一下。
Jerry Qu
04月 3rd, 2009 at 11:41 pm
to Miller:
确实如此，jQuery里是有垃圾回收的，我这个山寨版的只是为了演示一下大体思路能省则省了。
JK
04月 7th, 2009 at 11:41 am
又可以省一个字节了：
输出日期的整数值，
以前的写法
alert(new Date()-0)
—->>>
可以省一个字节的写法
alert(+new Date())
GreatGhoul
05月 20th, 2009 at 8:39 am
jquery的方法真是好用.
xw332
08月 11th, 2009 at 9:20 am
jquery的getJSON是不是不能指定返回的函数名？
samuel
07月 8th, 2010 at 11:33 am
非常棒，很有参考价值。比去看jQuery代码舒服多了。
samuel
07月 8th, 2010 at 11:37 am
很棒。你自己写的demo，比去看jquery代码简单多了。