对js中回调函数的一些看法


Posted in Javascript onAugust 29, 2016

最近在忙公司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="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参数就是这么被赋值的,说了这些你们也大概有个了解了,以及怎么使用了。

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

以上这篇对js中回调函数的一些看法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
漂亮的jquery提示效果(仿腾讯弹出层)
Feb 05 Javascript
input标签内容改变的触发事件介绍
Jun 18 Javascript
extjs 如何给column 加上提示
Jul 29 Javascript
45个JavaScript编程注意事项、技巧大全
Feb 11 Javascript
深入理解angularjs过滤器
May 25 Javascript
Bootstrap开关(switch)控件学习笔记分享
May 30 Javascript
Bootstrap3 模态框使用实例
Feb 22 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
微信小程序滚动Tab实现左右可滑动切换
Aug 17 Javascript
vue 添加vux的代码讲解
Nov 30 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
May 18 Javascript
Node.js实现简单的爬取的示例代码
Jun 25 Javascript
Web打印解决方案之普通报表打印功能
Aug 29 #Javascript
jQuery获取select选中的option的value值实现方法
Aug 29 #Javascript
js 判断各种数据类型的简单方法(推荐)
Aug 29 #Javascript
Web打印解决方案之证件套打的实现思路
Aug 29 #Javascript
浅谈js数据类型判断与数组判断
Aug 29 #Javascript
判断js的Array和Object的实现方法
Aug 29 #Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
Aug 29 #Javascript
You might like
模仿OSO的论坛(三)
2006/10/09 PHP
PHP中使用memcache存储session的三种配置方法
2014/04/05 PHP
php实现的mongodb操作类实例
2015/04/03 PHP
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
javascript中clipboardData对象用法详解
2015/05/13 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
详解vue中引入stylus及报错解决方法
2017/09/22 Javascript
jquery实现左右轮播切换效果
2018/01/01 jQuery
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
微信网页登录逻辑与实现方法
2019/04/29 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
JavaScript实现tab栏切换效果
2020/03/16 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
[38:44]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第二局
2016/02/25 DOTA
[10:14]2018DOTA2国际邀请赛寻真——paiN Gaming不仅为自己而战
2018/08/14 DOTA
Python中针对函数处理的特殊方法
2014/03/06 Python
python中通过预先编译正则表达式提高效率
2017/09/25 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
numpy.delete删除一列或多列的方法
2018/04/03 Python
python使用pymongo操作mongo的完整步骤
2019/04/13 Python
Python CSS选择器爬取京东网商品信息过程解析
2020/06/01 Python
详解python UDP 编程
2020/08/24 Python
Pandas DataFrame求差集的示例代码
2020/12/13 Python
python中str内置函数用法总结
2020/12/27 Python
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
英国最全面的橄榄球联盟门票网站:Live Rugby Tickets
2018/10/06 全球购物
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
会计的岗位职责
2014/03/15 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
2014年无财产无子女离婚协议书范本
2014/10/09 职场文书
优秀教育工作者事迹材料
2014/12/24 职场文书
工程合作意向书范本
2015/05/09 职场文书
感恩信:写给爸爸妈妈的一封感谢信
2019/09/12 职场文书