js的回调函数详解


Posted in Javascript onJanuary 05, 2015

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

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

Javascript 相关文章推荐
javascript 动态修改样式和层叠样式表代码
Apr 27 Javascript
JS循环遍历JSON数据的方法
Jul 08 Javascript
JS模拟键盘打字效果的方法
Aug 05 Javascript
使用jquery提交form表单并自定义action的方法
May 25 Javascript
javascript淘宝主图放大镜功能
Oct 20 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 Javascript
JavaScript面向对象精要(下部)
Sep 12 Javascript
浅谈React中的元素、组件、实例和节点
Feb 27 Javascript
解决layui弹出层layer的area过大被遮挡的问题
Sep 21 Javascript
vue引用外部JS的两种种方法
Jan 28 Javascript
详解React的回调渲染模式
Sep 10 Javascript
判断浏览器的内核及版本号方法汇总
Jan 05 #Javascript
jQuery中removeProp()方法用法实例
Jan 05 #Javascript
jQuery中prop()方法用法实例
Jan 05 #Javascript
jQuery中removeAttr()方法用法实例
Jan 05 #Javascript
jQuery实现鼠标滚轮动态改变样式或效果
Jan 05 #Javascript
jquery.cookie.js使用指南
Jan 05 #Javascript
在Google 地图上实现做的标记相连接
Jan 05 #Javascript
You might like
swfupload 多文件上传实现代码
2008/08/27 PHP
那些年一起学习的PHP(二)
2012/03/21 PHP
php  单例模式详细介绍及实现源码
2016/11/05 PHP
PHP精确计算功能示例
2016/11/29 PHP
php7基于递归实现删除空文件夹的方法示例
2017/06/15 PHP
js常用自定义公共函数汇总
2014/01/15 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
2016/11/09 Javascript
javascript标准库(js的标准内置对象)总结
2018/05/26 Javascript
nodejs的路径问题的解决
2018/06/30 NodeJs
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
浅谈express.js框架中间件(middleware)
2019/04/07 Javascript
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
[01:30]我们共输赢 完美世界城市挑战赛开启全新赛季
2019/04/19 DOTA
跟老齐学Python之关于循环的小伎俩
2014/10/02 Python
python实现的简单RPG游戏流程实例
2015/06/28 Python
Python中Scrapy爬虫图片处理详解
2017/11/29 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
Python 利用高德地图api实现经纬度与地址的批量转换
2019/08/14 Python
解决python 上传图片限制格式问题
2019/10/30 Python
Django框架创建项目的方法入门教程
2019/11/04 Python
解决python replace函数替换无效问题
2020/01/18 Python
Luxplus荷兰:以会员价购买美容产品等,独家优惠
2019/08/30 全球购物
办公室文员工作职责
2014/01/31 职场文书
优秀教师事迹简介
2014/02/02 职场文书
大学生通用个人的自我评价
2014/02/10 职场文书
运动会通讯稿500字
2014/02/20 职场文书
理工类毕业自我鉴定
2014/02/20 职场文书
会计核算科岗位职责
2014/03/19 职场文书
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
2014年食堂工作总结
2014/11/20 职场文书
关于Python OS模块常用文件/目录函数详解
2021/07/01 Python
Nginx实现负载均衡的项目实践
2022/03/18 Servers