js的回调函数详解

现在做native App  和Web App是主流，也就是说现在各种基于浏览器的web app框架也会越来越火爆了，做js的也越来越有前途。我也决定从后端开发渐渐向前端开发和手机端开发靠拢，废话不说了，我们来切入正题“js的回调函数”相关的东西。

      说起回调函数，好多人虽然知道意思，但是还是一知半解。至于怎么用，还是有点糊涂。网上的一些相关的也没有详细的说一下是怎么回事，说的比较片面。下面我只是说说个人的一点理解，大牛勿喷。我们来看一下一个粗略的一个定义“函数a有一个参数，这个参数是个函数b，当函数a执行完以后执行函数b。那么这个过程就叫回调。”，这句话的意思是函数b以一个参数的形式传入函数a并执行，顺序是先执行a ，然后执行参数b,b就是所谓的回调函数。我们先来看下面的例子。

   function  a(callback){

      alert('a');

      callback.call(this);//或者是 callback（）,  callback.apply(this),看个人喜好

   }

   function  b(){

       alert('b');

   }

   //调用

   a(b);

       这样的结果是先弹出 'a'，再弹出‘b'。这样估计会有人问了“写这样的代码有什么意思呢？好像没太大的作用呢！”

       是的，其实我也觉得这样写没啥意思，“如果调用一个函数就直接在函数里面调用它不就行了”。我这只是给大家写个小例子，做初步的理解。真正写代码的过程中很少用这样无参数的，因为在大部分场景中，我们要传递参数。来个带参数的：

function  c(callback){

      alert('c');

      callback.call(this,'d');

    }

//调用

c(function(e){

    alert(e);

});

      这个调用看起来是不是似曾相识，这里e参数被赋值为'd'，我们只是简单的赋值为字符窜，其实也可以赋值为对象。Jquery里面是不是也有个e参数，下面我们就来讲讲
Jquery里面的e参数是如何被回调赋值的。

       Jquery框架我想大家不陌生了，出来了好久，开发的时候都在用，比较简单，api网上搜起来很方便，上手快。在Jquery框架下，我们有时候要获取事件中的一些参数，比如我要获取当前点击的坐标，点击的元素对象。这个需求在Jquery里面好办  ：

        $("#id").bind('click',function(e){

          //e.pageX ,e.pageY ,e.target.....各种数据

        });

        用起来倒是挺方便，其实这个e参数的赋值也是通过回调函数来实现的，这个参数是用回调参数给它赋予了一个对象值，仔细研究过JJquery源码的朋友应该发现了这一点。

还有Ajax里面   $.get('',{},function(data){})    data这个参数也是同样的原理。

        我们来看看Jquery事件对象里面是怎么应用回调函数的。

       为了方便，我简单的写了一下$相关的一些实现，之前写过“小谈Jquery”里面有比较接近框架实现的方法，我下面只是写一个简易的选择器。

<div  id="container"   style="width:200px;height:200px;background-Color:green;">

</div>

<script>

     var   _$=function (id)

               { 

                     this.element=  document.getElementById(id); 

                }

       _$.prototype={

            bind:function(evt,callback)

            {

                var   that=this;

                if(document.addEventListener)

                {

                    this.element.addEventListener(evt, function(e){

                        callback.call(this,that.standadize(e));

                    }  ,false);

                }

                else if(document.attachEvent)

                {

                    this.element.attachEvent('on'+evt,function(e){

                        callback.call(this,that.standadize(e));

                    });

                }

                else

                    this.element['on'+evt]=function(e){

                        callback.call(this,that.standadize(e));

                    };

            },

            standadize:function(e){

                 var  evt=e||window.event;

                 var  pageX,pageY,layerX,layerY;

                 //pageX  横坐标  pageY纵坐标   layerX点击处位于元素的横坐标   layerY点击处位于元素的纵坐标

                 if(evt.pageX)

                 {

                     pageX=evt.pageX;

                     pageY=evt.pageY;

                 }

                 else

                 {

                    pageX=document.body.scrollLeft+evt.clientX-document.body.clientLeft;

                    pageY=document.body.scrollTop+evt.clientY-document.body.clientLTop;

                 }

                 if(evt.layerX)

                 {

                     layerX=evt.layerX;

                     layerY=evt.layerY;

                 }

                 else

                 {

                     layerX=evt.offsetX;

                     layerXY=evt.offsetY;

                 }

                 return  {

                    pageX:pageX,

                    pageY:pageY,

                    layerX:layerX,

                    layerY:layerY

                 }

            }

       }

       window.$=function(id)

       {

          return  new _$(id);

       }

        $('container').bind('click',function(e){

            alert(e.pageX);

        });

        $('container1').bind('click',function(e){

             alert(e.pageX);

        });

</script>

这段代码我们主要看standadize函数的实现，兼容性的代码，就不多说了，返回的是一个对象 

     return  {

                    pageX:pageX,

                    pageY:pageY,

                    layerX:layerX,

                    layerY:layerY

                 }

 然后再看bind函数里面的代码    callback.call(this,that.standadize(e))，这段代码其实就是给e参数赋值了，是用callback回调实现的。

callback 函数被调用的时候传入的是匿名函数

         function(e){

        }

而callback.call(this,that.standadize(e))相当于是执行了这么一段代码 

        (function(e){

        })(standadize(e))

   这也是Jquery用回调函数比较经典的地方，e参数就是这么被赋值的，说了这些你们也大概有个了解了，以及怎么使用了。

    回调在各种框架中应用的比较多，有时候自己写一些东西的时候也可以根据实际情况用用看。