前言： 作为参数传递给另一个函数执行的函数我们称为回调函数，那么该回调又是否是异步的呢，何谓异步，如：作为事件处理器，或作为参数传递给 (setTimeout，setInterval)这样的异步函数，或作为ajax发送请求，应用于请求各种状态的处理，我们可以称为异步回调，jQuery.Callbacks 为我们封装了一个回调对象模块，我们先来看一个应用场景： // 为什么jQuery中的ready事件可以执行多个回调，这得益于我们的jQuery.Deferred递延对象(是基于jQuery.Callbacks回调模块) jQuery(function($) { console.log('document is ready!'); // do something }); jQuery(function($) { // do something }); // 实现原型 // jQuery.Deferred版代码 var df = jQuery.Deferred(); df.resolve(); // 在ready事件中调用 // 可以多次执行绑定的函数 df.done(fn1, fn2, fn3); df.done(fn4); // ... // jQuery.Callbacks版代码 var cb = jQuery.Callbacks('once memory'); cb.fire(); // 在ready事件中调用 // 可以多次执行绑定的函数 cb.add(fn1, fn2, fn3); cb.add(fn4); // ... 现在我们知道jQuery中的ready事件是可以这样执行多个回调的，要想深入理解其源码，让我们继续看下面吧 一、jQuery.Callbacks设计思路 使用一个私有变量list(数组)存储回调，执行jQuery.Callbacks函数将返回一个可以操作回调列表list的接口对象， 而传入jQuery.Callbacks函数的options参数则用来控制返回的回调对象操作回调列表的行为 回调对象中的方法 { add: 增加回调到list中 remove: 从list中移除回调 fire: 触发list中的回调 fired: 回调对象是否执行过fire方法 fireWith: 触发list中的回调，第一个参数为执行域 has: 判断函数是否在list中 empty: 将list致空，list = []; lock: 锁定list locked: 是否锁定 disable: 禁用回调对象 disabled: 是否禁用 } 参数标志: options = { once: 回调对象仅触发(fire)一次 memory: 跟踪记录每一次传递给fire函数的参数，在回调对象触发后(fired)， 将最后一次触发(fire)时的参数(value)传递给在add操作后即将被调用的回调 unique: 在add操作中，相同的函数仅只一次被添加(push)到回调列表中 stopOnFalse:当回调函数返回false，中断列表中的回调循环调用，且memory === false，阻止在add操作中将要触发的回调 }
二、源码解析 var // Used for splitting on whitespace core_rnotwhite = /S+/g; var optionsCache = {}; // Convert String-formatted options into Object-formatted ones and store in cache // 将字符串格式选项转化成对象格式形式，并存储在缓存对象optionsCache[options]中 // 该缓存起作用适用于执行多次jQuery.Callbacks函数，且传递options参数一致，我们在jQuery.Deferred // 源码就可以看到tuples二维数组中执行了两次jQuery.Callbacks('once memory') function createOptions( options ) { var object = optionsCache[ options ] = {}; jQuery.each( options.match( core_rnotwhite ) || [], function( _, flag ) { object[ flag ] = true; }); return object; } jQuery.Callbacks = function( options ) { // Convert options from String-formatted to Object-formatted if needed // (we check in cache first) options = typeof options === "string" ? ( optionsCache[ options ] || createOptions( options ) ) : jQuery.extend( {}, options ); var // Flag to know if list is currently firing firing, // Last fire value (for non-forgettable lists) memory, // Flag to know if list was already fired fired, // End of the loop when firing firingLength, // Index of currently firing callback (modified by remove if needed) firingIndex, // First callback to fire (used internally by add and fireWith) firingStart, // Actual callback list list = [], // Stack of fire calls for repeatable lists stack = !options.once && [], // Fire callbacks fire = function( data ) { memory = options.memory && data; fired = true; firingIndex = firingStart || 0; firingStart = 0; firingLength = list.length; firing = true; // 迭代list回调列表，列表中的回调被应用(或执行回调) for ( ; list && firingIndex < firingLength; firingIndex++ ) { // 如果回调返回false，且options.stopOnFlase === true，则中断循环 // 注：data[1]是一个伪数组(self.fire方法中的arguments(参数集合)) if ( list[ firingIndex ].apply( data[ 0 ], data[ 1 ] ) === false && options.stopOnFalse ) { memory = false; // To prevent further calls using add // 阻止在add操作中可能执行的回调 break; } } firing = false; if ( list ) { // (options.once === undefined)，回调对象可以触发多次 if ( stack ) { // 处理正在执行的回调中的fireWith操作 // 注：如果执行的回调中真的拥有fire或fireWith操作，那么列表中的回调将会无限循环的执行，请看实例1 if ( stack.length ) { fire( stack.shift() ); } } // (options.once === true && options.memory === true) // 回调列表致空，但允许add继续添加并执行回调 else if ( memory ) { list = []; } // (options.once === true && options.memory === undefined) // 禁用回调对象 else { self.disable(); } } }, // Actual Callbacks object self = { // Add a callback or a collection of callbacks to the list add: function() { if ( list ) { // First, we save the current length var start = list.length; (function add( args ) { jQuery.each( args, function( _, arg ) { var type = jQuery.type( arg ); if ( type === "function" ) { // 回调不唯一 或 唯一且不存在，则push if ( !options.unique || !self.has( arg ) ) { list.push( arg ); } } else if ( arg && arg.length && type !== "string" ) { // Inspect recursively // 递归检查 add( arg ); } }); })( arguments ); // Do we need to add the callbacks to the // current firing batch? // 如果正在执行的回调执行了add操作，更新firingLength，将列表中新加进来的最后一个回调加入到回调执行的队列中 if ( firing ) { firingLength = list.length; // With memory, if we're not firing then // we should call right away // 如果可能(options.memory === true)，在回调对象不能再次fire(options.once === true)时， // 我们应该使用memory(记录的最后一次fire时的参数)立即调用回调 } else if ( memory ) { firingStart = start; fire( memory ); } } return this; }, // Remove a callback from the list remove: function() { if ( list ) { jQuery.each( arguments, function( _, arg ) { var index; while( ( index = jQuery.inArray( arg, list, index ) ) > -1 ) { list.splice( index, 1 ); // Handle firing indexes // 在回调对象触发(fire)时，如果firingLength、firingIndex(正在执行的回调在列表list中的索引index) // 大于等于 移除的回调的索引(index)，分别减一，确保回调执行队列中未执行的回调依次执行 if ( firing ) { if ( index <= firingLength ) { firingLength--; } if ( index <= firingIndex ) { firingIndex--; } } } }); } return this; }, // Check if a given callback is in the list. // If no argument is given, return whether or not list has callbacks attached. // 检查给定的回调是否在列表中 // 如果未给定回调参数，返回列表是否有回调 has: function( fn ) { return fn ? jQuery.inArray( fn, list ) > -1 : !!( list && list.length ); }, // Remove all callbacks from the list // 将列表致空，list = []; firingLenght = 0; empty: function() { list = []; firingLength = 0; return this; }, // Have the list do nothing anymore // 禁用回调对象 // 将list赋值为undefined就可以使self中的add，remove，fire，fireWith方法停止工作 // 我认为这里把stack、memory赋值为undefined与否是没有任何关系的 disable: function() { list = stack = memory = undefined; return this; }, // Is it disabled? disabled: function() { return !list; }, // Lock the list in its current state // 锁定回调列表 // 如果(fired !== true || options.memory === false)，则视为禁用(disable) // 如果(fired === true && options.memory === true)，则视为options.once === true // 请看实例2 lock: function() { stack = undefined; if ( !memory ) { self.disable(); } return this; }, // Is it locked? locked: function() { return !stack; }, // Call all callbacks with the given context and arguments fireWith: function( context, args ) { // 回调对象未执行过fire 或且 可以执行多次(options.once === false) // 如果(fired === true && options.once === true)，则不会执行fire操作 if ( list && ( !fired || stack ) ) { args = args || []; args = [ context, args.slice ? args.slice() : args ]; if ( firing ) { stack.push( args ); } else { fire( args ); } } return this; }, // Call all the callbacks with the given arguments fire: function() { self.fireWith( this, arguments ); return this; }, // To know if the callbacks have already been called at least once fired: function() { return !!fired; } }; return self; };
三、实例 实例1、 处理回调函数中的fire，或fireWidth操作 var cb = jQuery.Callbacks(); var fn1 = function(arg){ console.log( arg + '1' ); }; var fn2 = function(arg){ console.log( arg + '2' ); cb.fire(); }; var fn3 = function(arg){ console.log( arg + '3' ); }; cb.add(fn1, fn2, fn3); cb.fire('fn'); // 其中回调fn1,fn2,fn3无限制的循环调用 /* 控制台将无限制输出如下: fn1 fn2 fn3 fn1 fn2 fn3 fn1 fn2 fn3 . . . */ 实例2、 锁定(lock)操作各种场景中的用法 var cb1 = jQuery.Callbacks(); var cb2 = jQuery.Callbacks('memory'); var cb3 = jQuery.Callbacks('memory'); var fn1 = function(arg){ console.log( arg + '1' ); }; var fn2 = function(arg){ console.log( arg + '2' ); }; var fn3 = function(arg){ console.log( arg + '3' ); }; // 如果options.memory !== true，锁定操作视为禁用回调对象 cb1.add(fn1); cb1.lock(); // 以下操作无任何反应 cb1.add(fn2); cb1.fire('fn'); // 如果fried !== true，锁定操作也视为禁用回调对象 cb2.add(fn1); cb2.lock(); // 以下操作无任何反应 cb2.add(fn2); cb2.fire('fn'); // 如果(fired === true && options.memory === true)，锁定操作类似控制标志once(options.once === true); cb3.add(fn1); cb3.fire('fn'); // fn1，此时fired === true cb3.lock(); // 像是传入了'once'标志，jQuery.Callbacks('once memory'); cb3.add(fn2); // fn2 cb3.fire('fn'); // 再次触发，无任何反应 cb3.add(fn3); // fn3 // 再来看看jQuery.Deferred中的一段源码 var tuples = [ // action, add listener, listener list, final state [ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ], [ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ], [ "notify", "progress", jQuery.Callbacks("memory") ] ]; // Handle state if ( stateString ) { list.add(function() { // state = [ resolved | rejected ] state = stateString; // [ reject_list | resolve_list ].disable; progress_list.lock }, tuples[ i ^ 1 ][ 2 ].disable, tuples[ 2 ][ 2 ].lock ); } /* 当执行了tuples中前面两组中任意一个回调对象的fire方法时，后一组回调对象被锁定， 相当于(fired === true && options.memory === true)，后一组回调对象实际为执行 jQuery.Callbacks('once memory')生成的回调对象。 */