jQuery源码分析之Callbacks详解
代码的本质突出顺序、有序这一概念，尤其在javascript——毕竟javascript是单线程引擎。
javascript拥有函数式编程的特性，而又因为javascript单线程引擎，我们的函数总是需要有序的执行。优秀代码常常把函数切割成各自的模块，然后在某一特定条件下执行，既然这些函数是有序的执行，那么我们为什么不编写一个统一管理的对象，来帮助我们管理这些函数——于是，Callbacks（回调函数）诞生。
什么是Callbacks
javascript中充斥着函数编程，例如最简单的window.onload承接的就是一个函数，悲催的是window.onload直接赋值的话只能接收一个函数，如果有好几个函数想要在onload中执行，那么我们就需要编写如下代码：
functiona(elem){
elem.innerHTML='我是函数a，我要改变Element的HTML结构';
};
functionb(elem){
elem.innerHTML='我的函数b，我要改变Element的style';
}
window.onload=function(){
varelem=document.getElementById('test');
a(elem);
b(elem);
};
回调函数初衷就是建立在这么个玩意儿的上面，不再让我们分散这些函数，而是把这些函数统一整理。可以看见，我们在window.onload中希望针对一个Element做两件事情：先改变html结构，然后改变这个html的style。两个函数同样是针对一个Element操作，而这两个函数最终的执行都是有序进行的。那么我们为什么不编写一个这样的对象管理这些函数呢。当然，这只是回调函数的最基础的存在意义，我们需要的不仅仅是这样一个简单的回调函数对象，我们需要一个更加强大的回调函数。好吧，这只是一个简单的用例，那么我可以告诉你这个回调函数除了一个个执行函数之外，它还可以做什么。
Callbacks本质就是控制函数有序的执行，Javascript是单线程引擎，也就说，javascript同一时间只会有一处代码在运行——即便是Ajax、setTimeout。这两个函数看起来好像都是异步的，其实并非如此，浏览器在运行javascript代码的时候，这些代码都会被有序的压入一个队列中，当你运行Ajax的时候，浏览器会把Ajax压入代码队列，浏览器在处理javascript代码是从这个代码队列中一个一个取代码执行的——Callbacks，迎合了这种单线程引擎。
当然，我们要的，不仅仅是这样一个简单的工具对象——在jQuery源码中，Callbacks提供了一组函数的基本管理，为Deferred（异步队列）提供了基础，同时也服务于Queue（同步队列）。Deferred用于抹平/扁平化金字塔编程（大量的回调函数嵌套，例如Ajax中需要根据请求返回码决定执行的代码）；而Queue，驱动着jQuery.animate（动画引擎）。
那么我们就来编写一个Callbacks吧。
Callbacks模型
Array（数组）：
既然我们Callbacks要承接一系列函数，那么必然需要有一个容器。我们可以使用一个数组，并把每一个函数压到该数组中，需要执行的时候，循环数组项执行。
工作模型：
这个Callbacks需要非常的强大，并不仅仅是压入函数，然后执行这么简单，这个Callbacks应该拥有良好的执行模型。
once：当前Callbacks对象中所有的函数只会执行一次，执行一次完之后就会被释放掉，我们可以为使用Callbacks对象的用户提供一个稳定有效的方案，确保函数只会执行一次，之后不再执行，稳定了这些函数的线程。
auto：自动执行模型，这是个有意思的模型，有些函数依赖上一层函数，例如函数b的执行依赖于函数a，那么我们提供一个自动执行的模型：第一次执行这个Callbacks之后，每次添加函数到Callbacks的时候，自动执行过去添加的那些函数，并把最后一次给定的参数数据传递给过去的那些函数，这样就从Callbacks中抹平了这些依赖函数之间需要反复触发的关系，这是个有意思的模型。
once&auto：我们可以让它更强大，同时工作once和auto模型，即：当每次添加函数到Callbacks中的时候，过去的函数都会执行，然后，释放掉这些过去的函数，下次继续添加函数的时候，过去的那些函数不会再执行，因为once模型，已经把它们释放掉了。
API：
add(function)-添加一个（或多个）函数到Callbacks对象中：当然，如果你并不添加函数只是好奇看看Callbacks，我们也将让你继续享受你的乐趣——我们并不会抛出异常，因为这对于我们来说并不擅长。
remove(function)-移除一个Callbacks中的一个函数：既然有了添加，那么我们也应该提供反悔的方案，我们是多么的平易近人，容忍着别人过去所做的一切。
has(function)-判断Callbacks中是否包含一个函数：哦？你竟然不确定是否包含这个函数，当初可是你丢进来的啊！你怎么如此马虎？不过既然你问我的话，我仍然会告诉你Callbacks是否包含这个函数，我知道你很繁忙，并不能记住和确定所有的事情。
empty()-清空Callbacks：这些函数对于你失去了意义了么？什么？已经执行过你就不想要了？所以你希望可以清空它？好吧，为了内存君我还是忍下你这个需求。
disable()-废掉一个Callbacks：为了和别人的代码稳定的存在，我选择了自我牺牲——没错，这个方法可以废掉Callbacks，彻底的废掉，就如同它曾经尚未存在过一般。
disabled()-判断这个Callbacks是否已经被废掉：如果你仍然不相信Callbacks是否真的自我牺牲，那么这个方法可以让你安心。
lock(boolean)-锁定这个Callbacks对象：你害怕它并不稳定，但是你又不想舍弃它，lock是个不错的方法，它接收一个Boolean的参数，表示是否需要锁定这个对象，当然，无参的它用于让你确定Callbacks是否被锁定。
fire(data)-执行这个Callbacks中的函数：我们做的这一切，不都是为了这一刻执行的宿命么？参数将会成为这些需要执行的函数的参数。
fireWith(context,data)-执行Callbacks中的函数，并且指定上下文。在fire()里，所有的函数的Context(上下文)都是Callbacks对象，而fireWidth()，可以让你重新定义这些要执行的函数的上下文，多么自由的编程啊，Callbacks为你考虑了一切。
fired()-判断这个Callbacks过去是否已经执行过：我们相信，多数时候你并不知道过去做过什么，但是我们记录了你做的一切，如果你过去曾经执行过这个Callbacks对象，那么你休想否认，因为我们知道过去你是否执行了这个Callbacks。
基本模块实现
简单的实现：
我们先来简单的实现一个Callbacks：
(function(window,undefined){
varCallbacks=function(){
//通过闭包保护这些私有变量
varlist=[],//回调函数列表
fired;//是否执行过
//返回一个闭包的Callbakcs对象
return{
add:function(fn){
//当Callbacks废弃掉的时候，list为undefined
if(list){
//添加一个回调函数
list.push(fn);
//支持链式回调
}
returnthis;
},
fireWith:function(context,data){
//触发回调函数，并指定上下文
if(list){
fired=true;
for(vari=0,len=list.length;i<len;i++){
//当Callbacks中某一个函数返回false的时候，停止Callbacks后续的执行
if(list[i].apply(context,data)===false)
break;
}
}
returnthis;
},
fire:function(){
//触发回调函数
//调用fireWith并指定上下文
returnthis.fireWith(this,arguments);
},
empty:function(){
//清空list即可
if(list)//当这个Callbacks废弃掉的时候，Callbacks不应该可以继续使用
list=[];
returnthis;
},
disable:function(){
//废弃这个Callbacks对象，后续的回调函数列表不再执行
list=undefined;
returnthis;
},
disabled:function(){//检测这个Callbacks是否已经废掉
//转换为boolean返回
return!list;
},
fired:function(){//这个callbacks是否执行过
return!!fired;
}
};
};
//注册到window下
window.Callbacks=Callbacks;
}(window));
然后我们测试一下这个Callbacks：
vartest=newCallbacks();
test.add(function(value){
console.log('函数1，value是：'+value);
});
test.add(function(value){
console.log('函数2，value是：'+value);
});
test.fire('这是函数1和函数2的值');
console.log('查看函数是否执行过：'+test.fired());
test.disable();//废弃这个Callbacks
console.log('查看函数是否被废弃：'+test.disabled());
test.add(function(){
console.log('添加第三个函数，这个函数不应该被执行');
});
test.fire();
打开浏览器的控制台我们可以看见运行结果正常。
once和auto(memory)实现
once：
once让这个callbacks中的函数运行一次之后就不再运行。原理非常的简单，上面的代码中，我们可以看见有一个变量list承接函数列表，所以我们只需要把过去执行过的代码清空即可。我们用一个全局变量，保存当前执行模型，如果是once模型，就在fireWith()里让这个list失效即可：
(function(window,undefined){
varCallbacks=function(once){
//通过闭包保护这些私有变量
varlist=[],//回调函数列表
fired;//是否执行过
//返回一个闭包的Callbakcs对象
return{
//...省略部分代码
fireWith:function(context,data){
//触发回调函数，并指定上下文
if(list){
fired=true;
for(vari=0,len=list.length;i<len;i++){
//当Callbacks中某一个函数返回false的时候，停止Callbacks后续的执行
if(list[i].apply(context,data)===false)
break;
}
}
//如果配置了once模型，则全局变量once为true，则list重置
if(once)list=undefined;
returnthis;
}
//...省略部分代码
};
};
//注册到window下
window.Callbacks=Callbacks;
}(window));
auto：
auto（memory）模型在jQuery中是以memory命名的，最初被这个命名给混淆了，仔细看了用法才确定改成auto——它的作用就是“第一次fire()之后，后续add()的函数自动执行”，以下情况可以用到：当添加一组函数到Callbacks之后，临时又需要追加一个函数，那么即时运行这个新追加的函数——不得不说，为了使用的便利，这个模式变得有点难以理解。实现起来就是在add()的时候判断是否是auto模型，如果是auto模型，则执行这个函数。但是，我们需要在第一次fire()之后才自动执行，没有fire()过的Callbacks并不该被自动执行，并且，每次自动执行后，还需要把最后一次使用的参数传递传递给这个自动执行的函数。
或许大家会想到如下代码：
(function(window,undefined){
varCallbacks=function(once,auto){
varlist=[],
fired,
lastData;//保存最后一次执行的参数
return{
add:function(fn){
if(list){
list.push(fn);
//—自动执行模式
//最后一次使用的参数传递过去，这里丢失了Context(上下文)
//为了不让这里丢失上下文，我们或许还需要声明一个变量保存最后一次使用的Context
if(auto)this.fire(lastData);
}
returnthis;
},
fireWith:function(context,data){
if(list){
lastData=data;//—记录最后一次使用的参数
fired=true;
for(vari=0,len=list.length;i<len;i++){
if(list[i].apply(context,data)===false)
break;
}
}
if(once)list=[];
returnthis;
}
//部分代码省略
};
};
//注册到window下
window.Callbacks=Callbacks;
}(window));
但是在jQuery里采用了更奇妙的用法，获取jQuery作者也自豪这种用法，所以命名这个模型为memory——就是让上面的变量auto不仅仅表示当前是auto执行模式，并且作为最后一次参数的容器，它既表示了auto，也表示了memory。（下面的代码非jQuery是根据jQuery代码思路而写，非源码）：
(function(window,undefined){
varCallbacks=function(auto){
varlist=[],
fired,
memory,//主演在这里，就是memory
coreFire=function(data){
//真正的触发函数方法
if(list){
//&&表达式妙用
memory=auto&&data;//记录最后一次的参数，如果不是auto模式则不会记录这个参数
//如果是auto模式，那么这个auto将不会为false，它会是一个数组
fired=true;
for(vari=0,len=list.length;i<len;i++){
if(list[i].apply(data[0],data[1])===false)
break;
}
}
};
return{
add:function(fn){
if(list){
//添加一个回调函数
list.push(fn);
//自动执行模式，注意如果auto模型
//memory是在coreFire()里赋值的，默认是false
if(memory)coreFire(auto);
}
//支持链式回调
returnthis;
},
fireWith:function(context,data){
if(once)list=[];
//这里调用coreFire，把参数转换为数组了
coreFire([context,data]);
returnthis;
}
/*部分代码省略*/
};
};
window.Callbacks=Callbacks;
}(window));
我们在上一个auto实现的代码中看到我们丢失了Context，jQuery早在fireWith()中修复了这个bug——在fireWith()中修复参数。jQuery把fireWith()中本来应该执行函数的逻辑给抽离出来，我们暂时将它命名为coreFire()，在原fireWith()中，将参数拼接成一个数组：第一个参数表示上下文，第二个参数表示传递进来的参数。然后执行coreFire()。
在add()的时候，jQuery并没有给变量auto（memory）赋值，而是选择在coreFire()中给auto（memory）赋值，这样就保证了第一次fire()之后才会开启自动执行。
按照上面所说，coreFire()接收的参数其实是一个数组，第一个参数是上下文，第二个参数是外面传递进来的参数。同时把这个数组赋值给auto（memory），这样，变量auto（是否自动执行模式）的定义就变成了memory（记忆最后一次传递的参数）。
真是一石二鸟的神思路，神想法，不得不点赞。我定义这个为auto是因为它的本身就是一个自动执行的模型，顺便保存了最后一次fire()的参数，而jQuery定义为memory或许也是作者感叹这里的鬼斧神工吧。
至于once&auto就是把这两个代码揉合到一起而已，只需要在coreFire()里判定如果是auto模式，那么就把list重置为一个新的数组，否则直接设置为undefined即可。
源码
这份代码是自己对应jQuery手写的一份，将一些jQuery公有的函数都写了进来，并非代码片段，所以可以直接引用运行。
(function(window,undefined){
/*
*一个回调函数工具对象，注意这个工作对象工作完成之后就会清空数组:
* 提供一组普通的API，但它有如下工作模型-
* once-单次执行模型：每次工作一次，后续不再工作
* auto-自动执行模型：每添加一个回调函数，自动执行现有的回调函数集合里的所有回调函数，并将本次的参数传递给所有的回调函数
*
*/
//工具函数 varisIndexOf=Array.prototype.indexOf, //Es6 toString=Object.prototype.toString, //缓存toString方法 toSlice=Array.prototype.slice, //缓存slice方法 isFunction=(function(){ //判定一个对象是否是Function return"object"===typeofdocument.getElementById? isFunction=function(fn){ //ie下对DOM和BOM的识别有问题 try{ return/^\s*\bfunction\b/.test(""+fn); }catch(x){ returnfalse } }: isFunction=function(fn){returntoString.call(fn)==='[objectFunction]';}; })(), each=function(){ //循环遍历方法 //第一个参数表示要循环的数组，第二个参数是每次循环执行的函数 if(arguments.length<2||!isFunction(arguments[1]))return; //为什么slice无效？？ varlist=toSlice.call(arguments[0]), fn=arguments[1], item; while((item=list.shift())){//没有直接判定length，加速 //为什么这里用call就可以，而apply就不行？ //搞定-apply的第二个参数必须是一个array对象（没有验证array-like是否可以，而call没有这个要求） //apply是这样描述的：如果argArray（第二个参数）不是一个有效的数组或者不是arguments对象，那么将导致一个TypeError。 fn.call(window,item); } }, inArray=function(){ //检测数组中是否包含某项，返回该项索引 //预编译 returnisIndexOf?function(array,elem,i){ if(array) returnisIndexOf.call(array,elem,i); return-1; }:function(elem,array,i){ varlen; if(array){ len=array.length; i=i?i<0?Math.max(0,len+i):i:0; for(;i<len;i++){ if(iinarray&&array[i]===elem){ returni; } } } return-1; } }();
varCallbacks=function(option){ option=toString.call(option)==='[objectObject]'?option:{}; //使用闭包，因为每个新建的callbacks都有自己的状态 varlist=[], //回调列表 _list=[], //如果锁定这个callbacks对象，则清空list，将原list置入_list fired, //是否执行过 firingStart, //当前回调函数列表执行的函数索引（起点） firingLength, //回调函数的数组长度 auto, //标志是否自动执行，如果需要自动执行，则auto记忆着最后一次回调的参数（最后一次fire的参数），这是一个很诡异的且奇葩的用法 //这个变量用法很诡异和犀利，既包含了是否指定执行的标志，又记录了数据 //这个auto配合once简直就是丧心病狂：【第一次】执行了fire后才会自动执行，配合once可以做到：一次执行，后面不再追加和执行代码，保证了一组回调数据的稳定和安全 stack=!option.once&&[], //一个callbacks栈，如果当前正在执行回调数组，而在执行中又新添了回调函数，那么把新的回调函数，那么新的回调函数都会压入该栈 firing=false,//callbacks是否正在工作/执行 //触发回调函数 fire=function(data){ //注意这个data是个数组，如果配置了auto模式，那么auto永远不会为false，因为auto会是个数组 auto=option.auto&&data;//在这里，如果配置要求记忆最后的参数，则记忆这个参数（非常犀利的用法，直接取了数据） fired=true; firingIndex=firingStart||0; firingStart=0;//清空firingStart（不清空下次执行有出问题啦） firingLength=list.length; //缓存list长度，外界可以访问 firing=true;//正在执行回调函数 for(;firingIndex<firingLength;firingIndex++){ if(list[firingIndex].apply(data[0],data[1])===false){ //注意，如果配置了option.auto（自动执行），并且stack（栈）里存在函数，那么add()代码里有一段对于auto判定会直接执行本方法的代码 //我们要阻止掉那段代码，所以设置auto为false auto=false; break; }//当函数返回false，终止执行后续队列 } firing=false;//标志状态已经执行完毕回调函数[stack(栈)里面的函数尚未执行] //如果这个栈在没有配置once的情况下肯定是[]，所以一定存在 //这里主要作用是，如果没有配置once，则拦截下面的代码，如果配置了once，执行完代码清空数据 if(stack){ if(stack.length)//先把下面清空list状态的代码拦截掉，再判定是否有栈 fire(stack.shift());//从栈头部取出，并递归fire()方法 } elseif(auto) //代码走到这里，证明已经配置了option.once（只执行一次），于是把list清空 list=[]; else //证明没有配置auto，但是配置了once，那么祭出终极大法，直接废了这个callbacks对象 self.disable(); }; varself={ add:function(){//添加一个回调函数 if(list){ varstart=list.length; (functionaddCallback(args){ each(args,function(item){ if(isFunction(item)){//是函数，则压入回调列表 list.push(item); //注意typeof和Object.prototype.toString是不一样的 }elseif(toString.call(item)==='[objectArray]'){//如果是个数组，则递归压入回调列表，这个判定抛弃了array-like addCallback(item); } }); })(arguments); } if(firing)//如果当前正有回调函数在执行，那么需要更新当前回调函数列表的length，否则这个新压入的回调函数就会被掠过。 firingLength=list.length; elseif(auto){//如果当前没有执行回调函数，并且要求自动执行 //注意这里是给firingStart赋值，上面fire方法中正在使用的是firingIndex，这里不会影响到上面代码的执行线路 firingStart=start; //执行我们新加入的小伙伴 fire(auto); } returnthis; }, fire:function(){//触发回调函数 self.fireWith(this,arguments); returnthis; }, fireWith:function(context,args){//触发回调函数，并指定上下文 //如果配置了once，stack将为undefined，而once又需要保证只执行一次，所以一旦执行过一次，这里的代码不会再执行 if(list&&(!fired||stack)){ //修正参数 //在这里,context索引为0 //而参数列表索引为2 //转换为数组访问是因为对象表示更加的消耗资源，在顶层的fire()代码中有auto[记忆参数，自动执行]这个功能，如果采用对象则开销了更大的内存 args=[context, args? args.slice&&args.slice() ||toSlice.call(args): [] ]; fire(args); } returnthis; }, remove:function(){//移除一个回调函数 if(list){ each(arguments,function(item){ varindex; //可能有多项，index可以在循环中表示检索的范围，之前检索的过的可以不用再检索 while((index=inArray(item,list,index))>-1){ list.splice(index,1); if(firing){ //保证上面fire中正在执行的函数列表能够正确运行，fire中设定全局这些变量为的就是这里可以异步移除 if(index<=firingLength)//修正长度 firingLength--; if(index<=firingLength)//修正索引 firingIndex--; } } }); } returnthis; }, has:function(fn){//是否包含一个回调函数 returnfn?inArray(fn,list)>-1:list&&list.length; }, empty:function(){//清空这个callbacks对象 list=[]; firingLength=0; returnthis; }, disable:function(){//废掉这个callbacks对象，后续的回调函数列表不再执行 list=stack=auto=undefined; returnthis; }, disabled:function(){//是否已经废掉 return!list;//转换为boolean }, lock:function(isLock){//锁定或解锁这个callbacks对象 //无参，判断这个callbacks是否被锁定 if(isLock==null)return!!_list; if(isLock){//锁 _list=stack&&list.concat(stack)||list; list=undefined; }else{//解锁，jQuery并没有提供解锁功能，解锁让Callbacks变得不稳定 list=_list; _list=undefined; } returnthis; }, fired:function(){//这个callbacks是否执行过 //转换为boolean，包括undefined，null,''等 return!!fired; } }; returnself; }; window.$=window.$||{}; window.$.Callbacks=window.Callbacks=Callbacks; }(window));