前端开发博客

这里会共享一些前端方面的咨询、技术以及自己写的一些代码,主要是记录自己的学习过程的一个博客。

当前位置:首页 > javascript

使用js callback的一个小技巧

时间:2013-09-09 11:33:31  来源:  作者:

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

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

 
    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);
};
    for(var i=0;i<3;i++){
        var img = document.createElement("img");
        img.src = o.items[i].media.m;
        document.body.appendChild(img);
    }
});