对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 相关文章推荐
JavaScript 基础问答三
Dec 03 Javascript
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
编写针对IE的JS代码两种编写方法
Jan 30 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 Javascript
AngularJS 自定义过滤器详解及实例代码
Sep 14 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
May 18 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
Sep 07 Javascript
ReactNative 之FlatList使用及踩坑封装总结
Nov 29 Javascript
js实现下拉框二级联动
Dec 04 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
Nov 13 Javascript
vuex管理状态仓库使用详解
Jul 29 Javascript
React实现评论的添加和删除
Oct 20 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
PHP采用XML-RPC构造Web Service实例教程
2014/07/16 PHP
PHP实现通用alert函数的方法
2015/03/11 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
项目实践之javascript技巧
2007/12/06 Javascript
JQUERY复选框CHECKBOX全选,取消全选
2008/08/30 Javascript
lyhucSelect基于Jquery的Select数据联动插件
2011/03/29 Javascript
javascript 学习笔记(一)DOM基本操作
2011/04/08 Javascript
JavaScript和CSS通过expression实现Table居中显示
2013/06/28 Javascript
用正则表达式替换图片地址img标签
2013/11/22 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
2014/10/17 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
2016/04/18 Javascript
老生常谈 js中this的指向
2016/06/30 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
2017/01/05 Javascript
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
2017/08/08 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
详解Node 定时器
2018/02/26 Javascript
[57:36]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第三场 2月1日
2021/03/11 DOTA
python 排列组合之itertools
2013/03/20 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
Python 内置函数globals()和locals()对比详解
2019/12/23 Python
Python列表操作方法详解
2020/02/09 Python
python音频处理的示例详解
2020/12/23 Python
HTML5 Canvas的常用线条属性值总结
2016/03/17 HTML / CSS
毕业生物理教师求职信
2013/10/17 职场文书
大学生创业策划书
2014/02/02 职场文书
庆中秋节主题活动方案
2014/02/03 职场文书
护理专科毕业自荐信范文
2014/04/21 职场文书
服务承诺书怎么写
2014/05/24 职场文书
拾金不昧感谢信范文
2015/01/21 职场文书
大学生读书笔记大全
2015/07/01 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书
Python控制台输出俄罗斯方块移动和旋转功能
2021/04/18 Python
JavaScript 数组去重详解
2021/09/15 Javascript