zoukankan      html  css  js  c++  java
  • 关于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我共同讨论下(见博客首页左上角),语言表达能力有所欠缺。感谢来访的博友,我会在后面继续增强个人技术以及语言水平,写出更好的博客,大家互相学习进步。

     

  • 相关阅读:
    LeetCode Find Duplicate File in System
    LeetCode 681. Next Closest Time
    LeetCode 678. Valid Parenthesis String
    LeetCode 616. Add Bold Tag in String
    LeetCode 639. Decode Ways II
    LeetCode 536. Construct Binary Tree from String
    LeetCode 539. Minimum Time Difference
    LeetCode 635. Design Log Storage System
    LeetCode Split Concatenated Strings
    LeetCode 696. Count Binary Substrings
  • 原文地址:https://www.cnblogs.com/a546558309/p/4201241.html
Copyright © 2011-2022 走看看