首页 > 代码库 > jquery源码解析：jQuery工具方法Callbacks详解
jquery源码解析：jQuery工具方法Callbacks详解
我们首先来讲下Callbacks是如何使用的：第一个例子
function a(){}
function b(){}
var cb = $.Callbacks();
cb.add(a);
cb.add(b);
cb.fire(); //就会先执行a方法，再执行b方法
上面大概的意思是：add方法，就是把方法添加到数组list中，每执行一次，就添加一个方法。而fire方法，就是把list数组中的方法按顺序执行。
使用场景：第二个例子
function a(n){ }
(function(){
function b(n){}
})
在这里你无法调用b方法，因为b方法是局部变量。因此，你可以使用Callbacks来解决这个问题。
function a(n){}
var cb = $.Callbacks();
cb.add(a);
(function(){
function b(n){}
cb.add(b);
})
cb.fire("hello");
这时，b方法即使是局部变量，也可以通过cb.fire()进行调用。而且fire中的参数"hello"，也可以传入a，b方法。
Callbacks 可以传4个值，jQuery.Callbacks(options)，options有四个值：once,memory,unique,stopOnFalse 。
在第一个例子中，假设我们调用两次cb.fire(); 那么第一次会执行a,b方法，第二次也会调用a,b方法。但是如果你定义cb时这样，var cb = $.Callbacks("once");那么只有第一次会执行a,b方法，第二次不会执行。once的意思是只执行list数组中的方法一次，之后你调用fire，不会执行list数组中的方法。
memory的作用是：
var cb = $.Callbacks();
cb.add(a);
cb.fire();
cb.add(b);
针对以上代码，方法a会执行，b方法不会执行。但是你在定义cb时，var cb = $.Callbacks("memory");这时，a，b方法都会执行。它具有记忆性。
unique的作用：去重，add如果添加相同的方法，在没有unique的情况下，添加几个相同的方法，就会执行几次相同的方法，但是你传入了unique，不管你添加多少次相同的方法，它都只会执行一次。
stopOnFalse的作用：
function a(){ return false;}
function b(){}
var cb = $.Callbacks();
cb.add(a);
cb.add(b);
cb.fire();
方法a，b都会执行。但是如果你定义cb时，var cb = $.Callbacks("stopOnFalse");只会执行a方法。因为a方法返回了false，而stopOnFalse的作用就是当方法返回false时，就停止循环list。因此b方法就不会执行了。
当然这四种参数，你可以组合使用，比如：var cb = $.Callbacks("once memory");
接下来，源码解析：由于代码比较多，因此给大家一个线索，$.Callbacks -> return self; -> self.add(a) -> list.push(a) -> self.add(b) -> list.push(b) -> self.fire() ->self.fireWith -> 私有方法fire() -> 循环list数组，执行里面的a,b方法。请按照此顺序看代码，然后再根据4个参数分别代表什么意思，再按顺序看一次。里面有详细的代码解释。
var optionsCache = {};
function createOptions( options ) {
var object = optionsCache[ options ] = {}; //optionsCache[once] = {}
jQuery.each( options.match( core_rnotwhite ) || [], function( _, flag ) {
//core_rnotwhite = /\S+/g, 取字符，options.match( core_rnotwhite ) = ["once"]，此正则是为了处理多个值时，比如"once match"变成["once","memory"]
object[ flag ] = true; //_是index值0，flag是value值"once"
});
return object; //optionsCache[once] = { "once":true }
}
jQuery.Callbacks = function( options ) { //options有四个值：once,memory,unique,stopOnFalse
options = typeof options === "string" ? ( optionsCache[ options ] || createOptions( options ) ) : jQuery.extend( {}, options );
//当传入参数时，就是字符串，比如：once，那么就会先去optionsCache中取once属性，如果之前没有此值，就调用createOptions(once)方法
var memory,
fired,
firing,
firingStart,
firingLength,
firingIndex,
list = [],
stack = !options.once && [], //如果有once，那么stack就是false，如果没有，那么stack就死[]，if条件里面空数组为真，因此在fire()->fireWith()时，就可以再次执行list数组中的方法了。
fire = function( data ) { //这里才是真正执行list数组中方法的地方
memory = options.memory && data;
fired = true;
firingIndex = firingStart || 0;
firingStart = 0;
firingLength = list.length;
firing = true; //正在触发list数组中的方法
for ( ; list && firingIndex < firingLength; firingIndex++ ) {
if ( list[ firingIndex ].apply( data[ 0 ], data[ 1 ] ) === false && options.stopOnFalse ) {
//如果回调方法返回false，并且有传入stopOnFalse参数，就会停止for循环，停止执行list数组中后面的方法
memory = false;
break;
}
}
firing = false; //方法执行结束
if ( list ) { //当list数组中的方法执行结束后，就会判断stack是否有值
if ( stack ) {
if ( stack.length ) {
fire( stack.shift() ); //如果有值，就会再次触发fire执行
}
} else if ( memory ) { //如果有once，stack就是false，就会走else
list = []; //如果有传入了memory，只会清空list数组。举个例子：var cb = $.Callbacks("once memory");cb.add(a),cb.fire();cb.add(b);cb.fire()。因为有once，所以只会执行一次，因此第二个fire没用。又由于有memory，所以a，b方法都会执行一次。如果这里没有memory，就会执行下面的else语句，这时只会执行a方法，b方法也不会执行。
} else {
self.disable(); //阻止后面的所有fire操作
}
}
},
self = {
add: function() { //此add方法，就是往list数组中push方法（fire时调用的方法）
if ( list ) { //[]为真
var start = list.length;
(function add( args ) {
jQuery.each( args, function( _, arg ) {
var type = jQuery.type( arg );
if ( type === "function" ) { //如果是方法就push到list中
if ( !options.unique || !self.has( arg ) ) { //如果有唯一判断，比如传入unique，就必须判断list数组中是否有此方法了，如果没有，才push到list中。self.has(arg)方法就是判断list数组中是否有arg方法。
list.push( arg );
}
} else if ( arg && arg.length && type !== "string" ) {
add( arg ); //此时add([a,b])是立即执行方法add而不是self.add。
}
});
})( arguments ); //这里处理add(a,b)，add([a,b]),同时添加多个方法的情况
if ( firing ) {
firingLength = list.length;
} else if ( memory ) { //第一次调用add时，memory是undefined。当调用fire时，如果你传入了memory，则memory就会变成true，这时你再调用add，就会进入if语句，进行fire。所以你传入memory，fire后，再调用add(b)，b方法会执行。
firingStart = start;
fire( memory );
}
}
return this;
},
remove: function() { //去掉list数组中相应的方法
if ( list ) {
jQuery.each( arguments, function( _, arg ) {
var index;
while( ( index = jQuery.inArray( arg, list, index ) ) > -1 ) {
list.splice( index, 1 ); //主要通过数组的splice方法去掉
if ( firing ) {
if ( index <= firingLength ) {
firingLength--;
}
if ( index <= firingIndex ) {
firingIndex--;
}
}
}
});
}
return this;
},
has: function( fn ) { //jQuery.inArray( fn, list )，如果fn在list中就返回1，不在，就返回-1
return fn ? jQuery.inArray( fn, list ) > -1 : !!( list && list.length ); //如果不传入值，就判断list中是否有值，有值就返回true。
},
empty: function() {
list = [];
firingLength = 0;
return this;
},
disable: function() { //后面所有的操作都失效
list = stack = memory = undefined;
return this;
},
disabled: function() {
return !list;
},
lock: function() { //只会锁住后面的fire操作，让cb.fire方法失效。
stack = undefined;
if ( !memory ) {
self.disable();
}
return this;
},
locked: function() {
return !stack;
},
fireWith: function( context, args ) { //这里执行list数组中的方法
if ( list && ( !fired || stack ) ) { //第一次调用时fired是undefined，第二次调用时，fired为true，就要看stack了。
args = args || []; //如果fire中传了值，就是args，如果没传，就是空数组
args = [ context, args.slice ? args.slice() : args ];
if ( firing ) { //当for循环在执行list数组中的方法时，firing为真，这时调用fire()->fireWith的话，只会把args添加到stack中。当list数组中的方法执行完之后。就会根据stack中是否有值来进行处理。举个例子：var cb = $.Callbacks();function a(){ cb.fire()};funciton b(){};cb.add(a,b);cb.fire();执行a方法，这时又触发fire()，但是不会再次执行a方法,因为这时firing为true，所以只会把stack加1，而是先等b方法执行结束后，才会又重新执行a方法。私有fire方法中会判断stack的值，如果有值，就会继续循环list数组中的方法进行调用执行。
stack.push( args );
} else {
fire( args ); //真正执行list数组中的方法是私有方法fire。
}
}
return this;
},
fire: function() { //fire方法其实就是执行list中的方法
self.fireWith( this, arguments ); //它调用的是fireWith方法.arguments就是fire中传入的参数，它可以给list数组中的方法传值进去
return this;
},
fired: function() {
return !!fired; //只要调用过一次fire就会返回true
}
};
return self; //返回的是self对象。当调用var cb = $.Callbacks()，cb =self。所以调用cb.add，fire,其实就是self.add和fire方法
};
加油！
jquery源码解析：jQuery工具方法Callbacks详解