JavaScript:回调模式(Callback Pattern)
函数就是对象,所以他们可以作为一个参数传递给其它函数;
当你将introduceBugs()作为一个参数传递给writeCode(),然后在某个时间点,writeCode()有可能执行(调用)introduceBugs();
这种情况下,introduceBugs()被称为回调函数(callback function)或简称为回调(callback:):
- function writeCode(callback) {
- // do something...
- callback();
- // ...
- }
- function introduceBugs() {
- // ... make bugs
- }
- writeCode(introduceBugs);
function writeCode(callback) {
// do something...
callback();
// ...
}
function introduceBugs() {
// ... make bugs
}
writeCode(introduceBugs);
注意introduceBugs()作为一参数传递给writeCode()是没有使用括号的;
使用括号会立即执行函数,然而在这种情况下,我们希望的是只传递一个指向函数的引用,让writeCode()在适当的时候去执行;
一个回调的例子(A Callback Example)
- 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;
- };
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)的数组是个好主意,但没有对实际的元素做任何事情;
- 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());
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()返回的的数组;
- // 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;
- };
// 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()检查了可选的回调函数是否有被提供,如果有,就执行它;
- // a callback function
- var hide = function(node) {
- node.style.display = "none";
- };
- // find the nodes and hide them as you go
- findNodes(hide);
// a callback function
var hide = function(node) {
node.style.display = "none";
};
// find the nodes and hide them as you go
findNodes(hide);
回调函数可以是一个在代码中已经存在的函数,也可以是一个匿名函数(当你调用主函数的时候才会创建);
- // passing an anonymous callback
- findNodes(function (node) {
- node.style.display = "block";
- });
// passing an anonymous callback
findNodes(function (node) {
node.style.display = "block";
});
回调和作用域(Callbacks and Scope)
在前面这个例子中,回调函数执行的部分可能像:
- callback(parameters);
callback(parameters);
虽然这样很简单并且在很多情况下都已经足够了;
- var myapp = {};
- myapp.color = "green";
- myapp.paint = function(node) {
- node.style.color = this.color;
- };
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);
- }
- // ...
- };
var findNodes = function(callback) {
// ...
if (typeof callback === "function") {
callback(found);
}
// ...
};
如果你调用了findNodes(myapp.paint),它并不能按照预期的那样工作,因为this.color将会是undefined;
- findNodes(myapp.paint, myapp);
findNodes(myapp.paint, myapp);
紧跟着,我们需要去修改findNodes()去绑定(bind)传递进来的对象:
- var findNodes = function(callback, callback_obj) {
- //...
- if (typeof callback === "function") {
- callback.call(callback_obj, found);
- }
- // ...
- };
var findNodes = function(callback, callback_obj) {
//...
if (typeof callback === "function") {
callback.call(callback_obj, found);
}
// ...
};
- findNodes(myapp.paint, myapp);
findNodes(myapp.paint, myapp);
会变成:
- findNodes("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);
- }
- // ...
- };
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)
回调模式在日常中被经常使用,比如,当你附加一个事件监听器给页面上的某个元素时,你实际上提供了一个指向了回调函数的引用,并且在事件发生时被调用;
- document.addEventListener("click", console.log, false);
document.addEventListener("click", console.log, false);
绝大部分客户端浏览器都是事件驱动的(event-driven);
Timeouts
- var thePlotThickens = function () {
- console.log('500ms later...');
- };
- setTimeout(thePlotThickens, 500);
var thePlotThickens = function () {
console.log('500ms later...');
};
setTimeout(thePlotThickens, 500);
再次注意一下,thePlotThickens是如何被作为一个参数传递的,没有使用括号;
类库中的回调(Callbacks in Libraries)
JavaScript:回调模式(Callback Pattern)的更多相关文章
- JavaScript:回调模式(Callback Pattern) (转载)
JavaScript:回调模式(Callback Pattern) 函数就是对象,所以他们可以作为一个参数传递给其它函数: 当你将introduceBugs()作为一个参数传递给writeCode() ...
- JavaScript学习笔记(十二) 回调模式(Callback Pattern)
函数就是对象,所以他们可以作为一个参数传递给其它函数: 当你将introduceBugs()作为一个参数传递给writeCode(),然后在某个时间点,writeCode()有可能执行(调用)intr ...
- js作为参数,并且返回值;js的回调模式 callback
有这样一个情景,当我们弹出一个 prompt的时候,要求用户在文本框输入一个文字,然后点击确认,就可以拿到返回值 var temp=prompt("请输入您的名字"); a ...
- React Render Callback Pattern(渲染回调模式)
React Render Callback Pattern,渲染回调模式,其实是将this.props.children当做函数来调用. 例如: 要根据user参数确定渲染Loading还是Profi ...
- 理解javascript中的回调函数(callback)【转】
在JavaScrip中,function是内置的类对象,也就是说它是一种类型的对象,可以和其它String.Array.Number.Object类的对象一样用于内置对象的管理.因为function实 ...
- 理解javascript中的回调函数(callback)
以下内容来源于:http://www.jb51.net/article/54641.htm 最近在看 express,满眼看去,到处是以函数作为参数的回调函数的使用.如果这个概念理解不了,nodejs ...
- JavaScript系列之回调函数callback
JavaScript系列之回调函数callback JavaScript回调函数的使用是很常见的,引用官方回调函数的定义: A callback is a function that is passe ...
- 理解 JavaScript 回调函数并使用
JavaScript中,函数是一等(first-class)对象:也就是说,函数是 Object 类型并且可以像其他一等对象(String,Array,Number等)一样使用.它们可以"保 ...
- javascript运行模式:并发模型 与Event Loop
看了阮一峰老师的JavaScript 运行机制详解:再谈Event Loop和[朴灵评注]的文章,查阅网上相关资料,把自己对javascript运行模式和EVENT loop的理解整理下,不一定对,日 ...
随机推荐
- Visual Studio 2013更新内容简介
前言 VS2013终于发布了,虽然之前自己使用VS2010和VS2012的时间也不长,尤其是VS2012这自己刚刚也没用多久,看到VS2013发布了,自己忍不住也下载了下来,官网肯定可以下载,不过自己 ...
- MVC layout 命名空间引用问题
虽然用MVC做了很多项目,但是都是在别人搭好的框架上实现 今天碰到一个很简单的命名空间引用问题 如图所示,Scripts和Styles 都没有引用命名空间 解决方法一: 直接使用 System.Web ...
- php里获取第一个中文首字母并排序
需求里结算首页需要按门店的首字母A-Z排序.我的数据结构原本是这样的: Array ( [0] => Array ( [sid] => 2885842 [recetcstoredpay] ...
- SCU 4438:Censor
Censor frog is now a editor to censor so-called sensitive words (敏感词). She has a long text p . Her j ...
- Linux 下crontab 详解转
http://yaksayoo.blog.51cto.com/510938/162062 Linux计划任务工具cron用法详解 linux下大名鼎鼎的计划任务工具crontab的使用介绍baidu. ...
- 【Atcoder】ARC102 题解
C - Triangular Relationship 题解 枚举一个数%K的值然后统计另两个 代码 #include <bits/stdc++.h> #define enter putc ...
- ModelDriven 和 Preparable 拦截器
Params 拦截器 Parameters 拦截器将把表单字段映射到 ValueStack 栈的栈顶对象的各个属性中. 如果某个字段在模型里没有匹配的属性, Param 拦截器将尝试 ValueSta ...
- P1736 创意吃鱼法 图的DP
题目描述 回到家中的猫猫把三桶鱼全部转移到了她那长方形大池子中,然后开始思考:到底要以何种方法吃鱼呢(猫猫就是这么可爱,吃鱼也要想好吃法 ^_*).她发现,把大池子视为01矩阵(0表示对应位置无鱼,1 ...
- C向C++改造
步骤: 1. 把c文件后缀名换成cpp2. Android.mk文件中的hello.c也要换成hello.cpp3. c++的使用的环境变量结构体中,访问了c使用的结构体的函数指针,函数名全部都是一样 ...
- MATLAB检查指定路径中的子文件夹中的文件名中是否带有空格
测试文件夹为: clear;close all;clc; %% %程序实现的功能 %检查指定路径中的子文件夹中的文件名中是否带有空格,并去掉文件名中的空格 %% %程序中用到的之前不清楚的函数如下 % ...