jQuery源码解析(依赖与架构模块)笔记三------回调函数

3-1理解回调函数

回调函数就是一个通过函指针调用的函数。如果你把函数的指针（地址）作为参数传递给另一个函数，当这个指针调用它所指向的函数时，我们就说这是个回调函数。

首先根据我自己的理解，我先说一下回调函数。比如说一个函数a的参数是函数b，当函数a执行完以后再执行函数b，这个过程就叫回调。

eg:

function a(callback) 
{    
    alert("我是parent函数a！"); 
    alert("调用回调函数"); 
    callback(); 
} 
function b(){ 
alert("我是回调函数b"); 
} 
function test() 
{ 
    a(b); 
}

js中函数的理解：

1>能“存储”在变量中

2>能作为函数的实参被传递

3>能在函数中被创建

4>能从函数中返回

jQuery中遍地都是回调的设计：

异步回调：

事件句柄回调

$(document).ready(callback);
$(document).on('click', callback);

Ajax异步请求成功失败回调：

$.ajax({
	url:"arron.html",
	context:document
}).done(function(){
	//成功执行
}).fail(function(){
	//失败执行
});

动画执行完毕调用

$('#clickme').click(function(){
	$('book').animate({
		opacity: 0.25,
		left: '+50',
		height: 'toggle'
	}, 5000, function(){
		//Animation complete
	});
});

都是应用将匿名函数作为参数传递给了另一个参数或方法。

同步回调

比较耗时，比如要求执行某些操作后执行回调函数。

这个例子的目的是test1代码执行完成后执行回调callback

var test1 = function(callback){
	//执行长时间操作
	callback();
}

test1(function(){
	//执行回调函数中的方法
});

理解回调的两个重点：

1>回调函数是作为参数传递费另一个函数的，仅仅起传递的作用，并不会再参数中执行

2>回调函数只会在某个特定的事件点呗回调，并不会立即执行

3-2回调的灵活应用

使用回调函数的情况：

1>事件触发通知

2>资源加载通知

3>定时器延时

4>ajax、动画通知等

jQuery对回调函数抽象设计的举例：

例子一：

jQuery针对DOM的处理提供了append、prepend、before、after等方法的处理，这几个方法的特征：

1>参数的传递可以是HTML字符串，DOM元素，元素数组或者jQuery对象

2>为了优化性能针对节点的处理需要生成文档碎片

高层接口：

before: function(){
	return this.domManip(arguments, function(elem){
		if(this.parentNode){
			this.parentNode.insertBefore(elem, this);
		}
	});
},

after：function(){
	return this.domManip(arguments, fucntion(elem){
		if(this.parentNode){
			this.parentNode.isertBefore(elem, this.nextSibling);
		}
	});
},

底层实现：

domManip:function(args, callback){
	args = concat.apply([], args);
	if(isFunction || self.domManip(args, callback);
		)

	if(l){
		//生成文档碎片
		fragment = jQuery.buildFragment(args, this[0].ownerDocument, false, this);
		callback.call(this[i], node, i);
	}
	return this;
}

通过抽象一个domManip方法，然后在这个方法中处理共性，合并多个参数的处理与生成文档碎片的处理，然后最终把结果通过回调函数返回给每一个调用者。

例子二：

队列处理

function Aaron(List, callback){
	setTimeout(function(){
		var task;
		if(task = List.shift()){
			task();//执行函数
		}
		if(List.length > 0){
			//递归分解
			arguments.callee(List)
		}
		else{
			callback();
		}
	}, 25)
}
//调用
Aaron([
	function(){
		alert('a');
	},
	function(){
		alert('b')
	},
	function(){
		alert('c')
	}
], function(){
	alert('callback')
})
//分别弹出a,b,c,callback

换成jQuery提供的方式

var callbacks = $.Callbacks();
callbacks.add(function(){
	alert('a');
})
callbacks.add(function(){
	alert('b');
})
callbacks.fire();//输出结果:'a','b'

弱化耦合，让调用者与被调用者分开，调用者不关心谁是被调用者，只需知道一个具有某种特定原型、某些限制条件的被调用函数。