函数就是对象,所以他们可以作为一个参数传递给其它函数;

当你将introduceBugs()作为一个参数传递给writeCode(),然后在某个时间点,writeCode()有可能执行(调用)introduceBugs();

这种情况下,introduceBugs()被称为回调函数(callback function)或简称为回调(callback:):

function writeCode(callback) {
// do something...
callback();
// ...
}
function introduceBugs() {
// ... make bugs
}
writeCode(introduceBugs);

注意introduceBugs()作为一参数传递给writeCode()是没有使用括号的;

使用括号会立即执行函数,然而在这种情况下,我们希望的是只传递一个指向函数的引用,让writeCode()在适当的时候去执行;

一个回调的例子(A Callback Example)

我们先从一个不使用回调的例子开始,然后在后面重构它;
假如,你有一个通用的函数,它会做一些复杂的工作并且返回一个包含很多数据的集合;
这个通用的函数可能被调用,并且它的工作就是去抓取一个页面的DOM树,返回一个数组里面包含着你感兴趣的页面元素的数组,比如findNodes();

var findNodes = function() {
    var i = 100000,
    // big, heavy loop
    nodes = [],
    // stores the result
    found; // the next node found
    while (i) {
        i -= 1;
        // complex logic here...
        nodes.push(found);
    }
    return nodes;
};
将这个函数保持通用性并让它返回一个DOM节点(node)的数组是个好主意,但没有对实际的元素做任何事情;
修改节点的逻辑可能在不同的函数中,比如一个叫hide()的函数,见名知意,它的作用是从页面中隐藏节点:

var hide = function(nodes) {
var i = 0,
max = nodes.length;
for (; i < max; i += 1) {
nodes[i].style.display = "none";
}
};
// executing the functions
hide(findNodes());
这种实现是没有效率的,因为hide()不得不再遍历一次findNodes()返回的的数组;
如果你能避免这个遍历并且让节点在findNodes()中一被选中就隐藏起来会更有效率;
但是如何你在findNodes()实现了隐藏的逻辑,那么它将不再是一个通用的函数,因为查询和修改的逻辑产生了耦合;
加入回调模式——传递你隐藏节点的逻辑作为一个回调函数并且代理它的执行:
// refactored findNodes() to accept a callback
var findNodes = function(callback) {
var i = 100000,
nodes = [],
found;
// check if callback is callable
if (typeof callback !== "function") {
callback = false;
}
while (i) {
i -= 1;
// complex logic here...
// now callback:
if (callback) {
callback(found);
}
nodes.push(found);
}
return nodes;
};
这样的实现是简单明确的,唯一增加的工作就是findNodes()检查了可选的回调函数是否有被提供,如果有,就执行它;
回调函数是可选的,所以重构后的findNodes()仍然能像以前一样被使用,并且不会破坏依赖于旧的API的遗留代码。
 
hide()函数的实现也可以更加简单,因为它不需要去遍历节点数组:

// a callback function
var hide = function(node) {
node.style.display = "none";
};
// find the nodes and hide them as you go
findNodes(hide);
回调函数可以是一个在代码中已经存在的函数,也可以是一个匿名函数(当你调用主函数的时候才会创建);
比如,怎样使用相同的通用函数findNodes()去显示节点:

// passing an anonymous callback
findNodes(function (node) {
node.style.display = "block";
});

回调和作用域(Callbacks and Scope)

在前面这个例子中,回调函数执行的部分可能像:

callback(parameters);
虽然这样很简单并且在很多情况下都已经足够了;
但经常有一些场景,回调函数不是匿名函数或者全局函数,而是一个对象的一个方法;
如果回调函数使用this去访问函数属于的对象,这就会产生意想不到的错误。
 
假如有一个parint()的回调函数,它是myapp对象的一个方法:

var myapp = {};
myapp.color = "green";
myapp.paint = function(node) {
node.style.color = this.color;
};

findNodes()函数做了类似下面的事:

var findNodes = function(callback) {
// ...
if (typeof callback === "function") {
callback(found);
}
// ...
};
如果你调用了findNodes(myapp.paint),它并不能按照预期的那样工作,因为this.color将会是undefined;
这里this将会指向全局对象,因为findNodes()是一个全局函数;
如果findNodes()是一个叫做dom对象的方法,那么在回调函数中的this将会指向dom而不是期望的myapp;
 
解决这个问题的方法就是传递一个回调函数,此外再传递这个回调函数属于的对象作为一个参数:

findNodes(myapp.paint, myapp);

紧跟着,我们需要去修改findNodes()去绑定(bind)传递进来的对象:

var findNodes = function(callback, callback_obj) {
//...
if (typeof callback === "function") {
callback.call(callback_obj, found);
}
// ...
};
对于传递一个对象和一个被用来回调的方法,另一个可选的方法就是将方法作为字符串传递,那么你就不会重复对象两次;
换言之:

findNodes(myapp.paint, myapp);

会变成:

findNodes("paint", myapp);

那么findNodes()可能会做一些事,就像下面几行:

var findNodes = function(callback, callback_obj) {
if (typeof callback === "string") {
callback = callback_obj[callback];
}
//...
if (typeof callback === "function") {
callback.call(callback_obj, found);
}
// ...
};

匿名的事件监听器(Asynchronous Event Listeners)

回调模式在日常中被经常使用,比如,当你附加一个事件监听器给页面上的某个元素时,你实际上提供了一个指向了回调函数的引用,并且在事件发生时被调用;

这里有个例子,怎么将console.log()作为一个回调函数监听文档的click事件:

document.addEventListener("click", console.log, false);
绝大部分客户端浏览器都是事件驱动的(event-driven);
当一个页面加载完成,会触发load事件,然后用户可以通过和页面交互触发各种各样的事件,比如:click, keypress, mouseover, mousemove等等;
因为回调模式,JavaScript特别适合事件驱动编程,能让你的程序异步的工作,换言之,就是不受顺序限制。
 
“Don’t call us, we’ll call you” 在好莱坞中是句名言,在好莱坞对于一部电影中的一个角色往往有很候选人,剧组人员不可能一直答复所有候选人打来的电话;
在异步的事件驱动的JavaScript,有个相似的情景,你提供一个回调函数用于在正确的时候被调用(to be called),而不是电话号码;
你甚至可能提供比实际请求还要多的回调函数,因为某些事件可能不会发生;
比如:如果用户不点击“购买”按钮,那么你用于验证表单格式的函数永远不会被调用。
 

Timeouts

 
另一个使用回调模式的例子就是使用浏览器的window对象的setTimeout()和setInterval()方法,这些方法也可以接受和执行回调函数:

var thePlotThickens = function () {
console.log('500ms later...');
};
setTimeout(thePlotThickens, 500);
再次注意一下,thePlotThickens是如何被作为一个参数传递的,没有使用括号;
因为你不想它立即执行;传递字符串"thePlotThickens()"取代函数的引用和eval()类似,是不好的模式。

类库中的回调(Callbacks in Libraries)

回调是一种简单而强大的模式,当你在设计类库的时候会派的上用场;
在软件类库中的代码应该尽可能的通用和复用,回调可以帮助我们解决这种泛化;
你不需要预测和实现你可以想到的所有功能,因为它们会使类库膨胀,并且大部分用户都不会需要这么多功能;
取而代之的是,集中精力在核心的功能并提供以回调函数形式的“钩子”(hook),这会让类库的方法更加简单的去构建,扩展和定制。
 

JavaScript学习笔记(十二) 回调模式(Callback Pattern)的更多相关文章

  1. python3.4学习笔记(十二) python正则表达式的使用,使用pyspider匹配输出带.html结尾的URL

    python3.4学习笔记(十二) python正则表达式的使用,使用pyspider匹配输出带.html结尾的URL实战例子:使用pyspider匹配输出带.html结尾的URL:@config(a ...

  2. Go语言学习笔记十二: 范围(Range)

    Go语言学习笔记十二: 范围(Range) rang这个关键字主要用来遍历数组,切片,通道或Map.在数组和切片中返回索引值,在Map中返回key. 这个特别像python的方式.不过写法上比较怪异使 ...

  3. JavaScript:回调模式(Callback Pattern) (转载)

    JavaScript:回调模式(Callback Pattern) 函数就是对象,所以他们可以作为一个参数传递给其它函数: 当你将introduceBugs()作为一个参数传递给writeCode() ...

  4. java jvm学习笔记十二(访问控制器的栈校验机制)

    欢迎装载请说明出处:http://blog.csdn.net/yfqnihao 本节源码:http://download.csdn.net/detail/yfqnihao/4863854 这一节,我们 ...

  5. JavaScript:回调模式(Callback Pattern)

    函数就是对象,所以他们可以作为一个参数传递给其它函数: 当你将introduceBugs()作为一个参数传递给writeCode(),然后在某个时间点,writeCode()有可能执行(调用)intr ...

  6. JavaScript学习笔记(二)——字符串

    在学习廖雪峰前辈的JavaScript教程中,遇到了一些需要注意的点,因此作为学习笔记列出来,提醒自己注意! 如果大家有需要,欢迎访问前辈的博客https://www.liaoxuefeng.com/ ...

  7. (C/C++学习笔记) 十二. 指针

    十二. 指针 ● 基本概念 位系统下为4字节(8位十六进制数),在64位系统下为8字节(16位十六进制数) 进制表示的, 内存地址不占用内存空间 指针本身是一种数据类型, 它可以指向int, char ...

  8. Python学习笔记(十二)—Python3中pip包管理工具的安装【转】

    本文转载自:https://blog.csdn.net/sinat_14849739/article/details/79101529 版权声明:本文为博主原创文章,未经博主允许不得转载. https ...

  9. JavaScript权威设计--命名空间,函数,闭包(简要学习笔记十二)

    1.作为命名空间的函数 有时候我们需要声明很多变量.这样的变量会污染全局变量并且可能与别人声明的变量产生冲突. 这时.解决办法是将代码放入一个函数中,然后调用这个函数.这样全局变量就变成了 局部变量. ...

随机推荐

  1. 深入javascript作用域链到闭包

    我之前用过闭包,用过this,虽然很多时候知道是这么一回事,但是确实理解上还不够深入.再一次看javascript高级程序设计这本书时,发现一起很多疑难问题竟然都懂了,所以总结一下一些理解,难免有错, ...

  2. CAShapeLayer 与贝塞尔曲线

    一 CAShapeLayer 简介 1,CAShapeLayer继承至CALayer,可以使用CALayer的所有属性 2,CAShapeLayer需要与贝塞尔曲线配合使用才有意义:单独使用毫无意义 ...

  3. 将linux默认python升级到2.7.4版本

    第一步:下载python2.7.4版本源码: wget http://python.org/ftp/python/2.7.4/Python-2.7.4.tgz 解压文件 [aa@localhost ~ ...

  4. Mysql 导入 MSSQL

    .安装mysql数据库的ODBC驱动,mysql-connector-odbc--win32.msi .打开控制面板\管理工具\数据源ODBC,在用户DSN中添加一个MySQL ODBC .51数据源 ...

  5. [HDOJ5289]Assignment(RMQ,二分)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5289 题意:求满足区间内最大值和最小值差为k的区间个数. 预处理出区间的最值,枚举左端点,根据最值的单 ...

  6. QT 加载c语言编译的动态库

    QLibrary lib("./libprint.so");//库的路径if(lib.load()){    typedef void(*AddFunction)(char *st ...

  7. 新浪博客地址 http://blog.sina.com.cn/u/2145079955

    原来 新浪博客地址 http://blog.sina.com.cn/u/2145079955

  8. Javascript 简单学习

    一直就崇拜JS如此牛叉的来操作Html标签, 抽出时间来学习学习,哈哈. Js是Netscape公司语言, 基于对象和事件驱动. 与Java不同之处: 1:所属公司不同 2:js是基于对象,java是 ...

  9. HDU5716, HDU5745【dp+bitset】

    DP+bitset  HDU5716 dp[i][j] = dp[i-1][j-1] && (s[i] in set[j]); 第二维压bitset #include <bits ...

  10. 简单的php性能注意点

    什么情况,可能遇到性能问题: 1.php语法使用的不恰当 2.使用php语言做了它不擅长做的事 3.用php语言连接的服务不给力 4.php自身的短板 5.我也不知道的问题 一般情况:php性能问题不 ...