小兔JS教程(三)-- 彻底攻略JS回调函数

1481251863707078043.jpg

这一讲来谈谈回调函数。

其实一句话就能概括这个东西:

回调函数就是把一个函数当做参数,传入另一个函数中。传进去的目的仅仅是为了在某个时刻去执行它。

如果不执行,那么你传一个函数进去干嘛呢?

就比如说对弈下棋,如果你都不想赢,那么你为什么要下棋?当然了,如果你达到了某种至高无上的境界,参悟出一个“道”来,就不一样了。

所谓手中无剑,心中有剑。写了一个函数,我虽然没有去执行它,但是在我心中已经执行了。

在此我们先不谈那么高大上的境界,先说点俗的,你想想啊,你好不容易写了一个function,你不去执行执行它,那你为什么要写呢?

1.回调函数快速入门

先来个快速入门吧。

比如我有两个数字,分别为10和20,还定义了两个函数,一个是做加法,一个是做减法。

var num1 = 10;
var num2 = 20;

//加法
function add(num1,num2){
    alert(num1 + num2);
}

//减法
function minus(num1,num2){
    alert(num1 - num2);
}

这样应该没问题,你肯定能看懂。

运行一下:

add(num1,num2);
minus(num1,num2);

1481253220519069590.png

1481253230113024982.png

好的,没问题。现在来思考,有没有什么办法,我创造一个函数,同时具备了加法和减法的功能呢?

当然有了,我大不了传一个标志位flag,如果是0,代表加法,如果是1,就代表减法。

像这样:

function addOrMinus(flag,num1,num2){
    if(flag == 0){
        alert(num1 + num2);
    }
    
    if(flag == 1){
        alert(num1 - num2);
    }
}

这样固然是可以的,但是还有个问题,如果用户突然说,我不想要加减法了,我要做乘除法,那又该怎么办?用户的需求是千变万化的,如果我们把函数里面的内容写死,那么就显得非常不灵活。这个时候,你就会想,有没有什么办法,让函数的功能变得不确定起来呢?

我们在刚才的例子中,是这样实现加减法的,即传入一个标志位flag,如果flag = 1,就做减法,如果flag = 2,就做加法。也就是说,加法和减法的逻辑已经实现在函数里面写好了,所以,一旦我们需要做乘法和除法,就不得不修改函数体,对不对。

那与其这样,我们为什么不能把具体的逻辑实现交给用户呢?你要做加法,你就给我传一个加法的逻辑进来,你要做减法,你就给我传一个减法的逻辑进来。这样不就好了?看代码:

function addOrMinus(flag,num1,num2){
    if(flag == 0){
        alert(num1 + num2);
    }
     
    if(flag == 1){
        alert(num1 - num2);
    }
}

callback就是回调函数的意思,,定义一个函数和定义一个其他变量都是差不多的。比如你定义一个数字:

var a = 100;

是不是这样做的,那么定义一个函数不就是:

var fun = function(){   
   alert('你好!');
}

不是一个意思吗,不知道我这样写你是不是好理解一点呢?

我们定义了一个变量a,它的值为100,那么如果我们使用这个a,是不存在什么执不执行的问题的,直接调用就OK了,这就是所谓的执行了一次右查询。

比如我写:alert(a),那么a的值就被我拿到了,并且使用了。

可函数的话呢,有点不一样。比如上面的例子,你总不可能这么写吧。

fun;

你觉得这样子会执行吗?肯定不会嘛,因为函数它必须要打一个括号才能执行啊!你不打括号的话它就执行不了的。

fun();

这样子写,它才会执行函数体里面的内容。

再回过头来看之前的例子:

function compute (a,b,callback){
   callback(a,b);
}

我定义了一个函数,叫做compute,它接受了三个参数,分别是a,b,callback。你不要觉得害怕,说callback是啥玩意啊,是不是一定要写callback呢?不是的啊,你不要多想了,callback只是为了让别人一看就知道是回调函数,这样显得更加语义化。实际上你写aaa,bbb,ccc都没有问题。他只是一个参数的名字啊。你叫阿猫阿狗都没事的。你信不信咯?它无非就只是一个变量的名字而已。

比如你写 var a = 10; 这个你肯定知道,我写a只是随便写的,写b、c、都可以,没有问题。那callback不也是一个意思吗?我之所以要这么啰嗦,是希望以后如果你看到别人js框架里面,或者某个API文档也写callback,你不要再害怕了,也不要再恐惧了,觉得哎呀好难,callback是什么东西??它就是一个名字而已。

OK,回到这个函数。

function compute (a,b,callback){
  callback(a,b);
}

你说,我这样一写了之后,compute函数有没有被执行?对了,当然是没有。因为我没打括号嘛,作为一个函数,打了括号才会被执行。同样的,在compute的函数体里面,传进去的callback是不是打了括号,这么写的用意很明显,它就是为了在函数体里面把你传进来的callback函数执行掉。并且在执行的时候,把另外两个参数传给它。

compute函数承担了计算的任务,具体怎么计算,我不管,计算规则由你决定!也就是说,你给我一个回调函数callback,我不管三七二十一,帮你执行掉。就这么简单,回调函数就是这么简单,没有什么更加高深的东西在里面了。

2.回调函数应用场景

快速入门就到这里,接下来,我们来看几个典型的例子。****

首先,我们在运用jQuery的时候,是不是总是写这样的代码:

$(function(){

});

很显然,这个就是回调函数,$本身就是一个函数的名字,没有道理不相信,我就问你,它是不是打了括号?我们把里面的 function(){} 去掉:

$();

是不是就变成这样了?那好,我就想请问一下了,你见过除了函数之外的什么东西要打括号吗?有没有,就问你一句话,有还是没有?只有函数才能打括号啊,你写一个var a = 10; 能打括号吗?所以,对jQuery来说,它本身就是一个函数,这一点要明确。

接下来,是不是传了一个回调函数进去了?

$(function(){

});

没错,的确是的。我在函数体里面alert一下,它肯定会给我弹出一个提示来。为什么会这样呢,毫无疑问,jQuery肯定在里面把这个回调函数执行了。就比如:

var $ = function(callback){   
   callback();
}

当然,这只是举一个例子,实际情况肯定要比这个复杂得多。

$(function(){

});

这个函数类似于window.onload。

接下来,我们来个例子:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <title></title>
        <script>
            
            $(function(){
                $("#box").on('click',function(){
                    alert();
                });
            });

        </script>
    </head>
    <body>
        <div style='padding: 50px;display:inline-block;background: blue;' id='box'></div>
    </body>
</html>

1481681019254059822.png

我在body区域画了一个蓝色的方块,并且通过jQuery的方式,给它绑定了一个点击事件。你可能会说,这么简单的代码我还能看不懂?我天天写这种代码呢!点击事件就是典型的回调函数应用,因为我哪里知道你点击之后要干什么啊?这当然要你自己决定啊。所以,你自己传一个回调函数进去。

$("#box").on('click',function(){
    alert();
});

现在,我给点击事件里面的回调函数加一个参数e。

$("#box").on('click',function(e){
    alert();
});

你可能会觉得奇怪,心想,纳尼,这个e是什么鬼??然后马上又一想,我好像没有在哪里定义一个叫做e的变量啊。如果你这么想了,说明你还是没有理解啥叫函数。亲啊,这是一个函数啊,函数的参数是e,e只是一个名字啊,你写aaa,bbb,ccc都行的!

$("#box").on('click',function(aaa){
    alert();
});

一个名字而已嘛,而且,这里只是定义了一个函数:

function(e){
   alert();
}

我就问你,有没有打括号?如果你说有啊,(e)不是括号吗?如果你真的这么回答,那我就要哭了。。。回到正题,这里是不是还没有打括号?也就是说,我只是写了一个还未被执行的函数传进去了,这是一个回调函数。我知道,我传进去以后,你肯定会在某个地方打一个括号帮我执行的,就算不执行,它也肯定会把这个回调函数赋值给其他变量。这是第一点,第二点,我写的这个函数,还带了一个参数,参数的名字叫e

OK,非常好。也就是说,我只管定义了一个有参数的函数,具体这个参数是啥,什么时候传进来,我不知道。这是由jQueryon函数决定的。如果你还是不理解的话呢,我们先写一个简单点的例子:

function on(event,callback){
    if(event == 'click'){
        var e = "Hello World";
        callback(e);
    }
}

on('click',function(e){
    alert(e);
});

这样就很好理解了吧,对的,就是这么个意思。所以,当你看到别人写回调函数,还加了个参数e,最起码,不要再害怕了,它根本不高端,说来说去都是JavaScript的基础知识。所以有的人不重视基础,虽然也能完成开发任务,但却往往只是照猫画虎而已,真要出了点问题,就很难解决了。

让我们回到代码:

$("#box").on('click',function(e){
    alert();
});

这是jQuery给我们封装好的函数,专门用来绑定事件的。那么在这一讲的最后,我们就来模拟jQuery的写法,封装一个类似的功能吧!

页面上的div是这样的:

<div style='padding: 50px;display:inline-block;background: blue;' id='box'></div>

第一步,是不是要专门写一个函数,取到这个div。在js中,我们可以用document.getElementById的方式取到dom元素,现在我们将这个方法也单独封装起来。

var $ = function(id){
    return document.getElementById(id);
}

这样就行了,可是有个问题,这个函数返回的是一个dom对象,而标准的dom元素是没有绑定事件的方法的。所以,我们不能直接返回dom,而应该返回一个json。(json虽然是后面的内容,这里先提前用一下吧)

我返回一个 json ,json的用处就大了,它是一个实实在在的对象,既有属性也有方法。在json中,属性和方法之间都是用逗号分隔的。

var $ = function(id){
    return {
        element : document.getElementById(id) ,
        on : function(event,callback){
            this.element['on' + event] = callback;
        }
    }
}

关于this呢,我会在以后的章节中详细讲的,现在先这么用。

如果用js的方法给dom元素添加一个点击事件,一般我们会这么写:

dom.onclick = function(){}
dom['onclick'] = function(){}

两种写法都可以哈,这样应该比较好理解了吧。我返回的json中,有一个函数叫做on,专门用来绑定事件的。比如现在我这么调用:

window.onload = function(){
    $('box').on('click',function(){
        $('box').element.style.background = 'green';
    });
}

我给div添加一个点击事件,效果就是变换一下背景色。

1481693653941005444.gif

效果是有的,好的,那么这一讲先到这里了。 作业:

作业要求(自行编写 $ 函数和 operation 函数,实现以下的调用过程,不允许使用jQuery):

​注意“#”的处理,#代表id选择器。
    
  $('#box').operation(function(){
       //自行实现回调函数,将box的背景色变为pink
  });

​作业地址:http://www.xiaotublog.com/demo.html?path=homework/03/index

答案在下一节公布,当然,如果感觉自己做的比较好的,可以在群里小窗我或者直接评论,确实不错的话下次就采用你的答案作为参考答案。随着章节的逐渐增加,以后的难度会越来越高。不过学习嘛,总归是一个迎难而上的过程。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员八阿哥

王老板Python面试(7):年薪20万的阿里巴巴Python工程师面试题

随着人工智能时代的到来,Python工程师的需求量也在与日俱增。现在,很多知名公司都或多或少的在使用Python。而对于Python工程师来说,进入大公司,是一...

13210
来自专栏ThoughtWorks

Scala中的语言特性是如何实现的?

image.png #思特沃克好声音# (图片:网络) 我们学东西不止要知其然,还要知其所以然。成都办公室的崔鹏飞在学Scala的时候,不止学习如何使用Scal...

32370
来自专栏IT派

Python:编写条件分支代码的技巧

编写条件分支代码是编码过程中不可或缺的一部分。 如果用道路来做比喻,现实世界中的代码从来都不是一条笔直的高速公路,而更像是由无数个岔路口组成的某个市区地图。我们...

18100
来自专栏工科狗和生物喵

【我的漫漫跨考路】数据结构之队列的线性实现

正文之前 最近在家流年不利,先是昨天家里路由器还是ADSL调制解调器坏了。反正是没网了!然后,今天上午还停电了,昨晚因为熬夜写码,所以忘了给手机充电了。早上起来...

29180
来自专栏Java技术分享圈

杨老师课堂_Java教程第五篇之函数运用

今天主要是讲解以下知识点: 1、方法基础知识 2、方法高级内容 3、方法案例

10620
来自专栏Jerry的SAP技术分享

为什么ABAP整型的1转成string之后,后面会多个空格

有同事问这个问题:lv_s是从int4转过来的,长度为2,和硬编码的lv_s2(长度为1)相比,后面多了个空格。

15700
来自专栏IMWeb前端团队

相爱相杀——正则与浏览器间的爱恨情仇

在腾爷《作为一个前端,可以如何机智地弄坏一台电脑?》之后,我就觉得需要学习这种低调奢华有内涵的文(biao)章(ti)名(dang)。 嘿嘿嘿,你看,你被我骗进...

23900
来自专栏灯塔大数据

技术 | Python从零开始系列连载(二)

上一期学的upyter相信大家都已经会用了,我们这一期就可以愉快地学习写代码啦! Python的基本数据类型 数据类型在数据结构中的定义是一个值的集合以及定义在...

38660
来自专栏java一日一条

各大排序算法的Objective-C实现以及图形化演示比较

插入排序是从一个乱序的数组中依次取值,插入到一个已经排好序的数组中。 这看起来好像要两个数组才能完成,但如果只想在同一个数组内排序,也是可以的。此时需要想象出两...

11330
来自专栏程序员互动联盟

java到底和C++有啥区别?

作为一名C++程序员,我们早已掌握了面向对象程序设计的基本概念,而且Java的语法无疑是非常熟悉的。事实上,Java本来就是从C++衍生出来的。 然而,C++和...

41060

扫码关注云+社区

领取腾讯云代金券