• 关于js的回调函数的一点看法


          算了一下又有好几个月没写博客了,最近在忙公司android的项目,所以也就很少抽时间来写些东西了。刚闲下来,我就翻了翻之前看的东西。做了android之后更加感觉到手机端开发的重要性,现在做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="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>
    View Code

    这段代码我们主要看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参数就是这么被赋值的,说了这些你们也大概有个了解了,以及怎么使用了。

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

        如果觉得这篇文章不够详细,可以单独q我共同讨论下(见博客首页左上角),语言表达能力有所欠缺。感谢来访的博友,我会在后面继续增强个人技术以及语言水平,写出更好的博客,大家互相学习进步。

     

  • 相关阅读:
    The 2019 ICPC Asia Shanghai Regional Contest H Tree Partition k、Color Graph
    回溯法、子集树、排列树、满m叉树
    顺时针打印矩阵
    单调递增的数字
    nodejs
    nodejs + express + mangodb 项目搭建
    nodejs + express 项目初始化
    星星评分功能(带小数点的那种,5颗星,10分制)
    easyui 增加删除toolbar 显示异常问题
    sql 外键级联,触发器防删
  • 原文地址:https://www.cnblogs.com/a546558309/p/4201241.html
Copyright © 2020-2023  润新知