一、参数标记
/** once: 确保回调列表仅只fire一次* unique: 在执行add操作中，确保回调列表中不存在重复的回调* stopOnFalse: 当执行回调返回值为false，则终止回调队列的执行* momery: 记录上一次fire时的参数，并在add中传递给fire和执行fire，执行时firingIndex为上一次fire时的firingLength*/
二、源码解读分析
var optionsCache = {},// Used for splitting on whitespacecore_rnotwhite = /\S+/g;// Convert String-formatted options into Object-formatted ones and store in cache function createOptions( options ) {// 多个变量指向同一对象(或数组)引用时，其中一个变量修改了被引用对象的内部结构，其他引用变量也会表现出来var object = optionsCache[ options ] = {};jQuery.each( options.match( core_rnotwhite ) || [], function( _, flag ) {object[ flag ] = true; // optionsCache[ options ][ 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 ] ( optionsCache[ options ] || createOptions( options ) ) :// 说明也可以这样$.Callbacks({once:true, memory:true})使用 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 listlist = [],// Stack of fire calls for repeatable listsstack = !options.once && [],// Fire callbacks// data为fireWith内部整理的args数组fire = function( data ) {memory = options.memory && data;fired = true;// 处理在add中，options.memory = true;的情况firingIndex = firingStart || 0;firingStart = 0;firingLength = list.length;firing = true;for ( ; list && firingIndex < firingLength; firingIndex++ ) {// 正在执行的回调返回值为false 且 options.stopOnFalse为true，则终止回调队列的执行if ( list[ firingIndex ].apply( data[ 0 ], data[ 1 ] ) === false && options.stopOnFalse ) {memory = false; // To prevent further calls using addbreak;}}firing = false;if ( list ) {// 处理正在执行的回调中执行fireWith的操作;if ( stack ) {if ( stack.length ) {fire( stack.shift() );}}// 上一分支状态为回调执行过，且可以执行多次// 此时 options.once = true; 这里将list设置为[]，只是确保下次执行fire时，无回调执行// 但是如果 options.memory = true; 仍然会执行add中的fire操作，因为此时回调列表中已有回调else if ( memory ) {list = [];}else {self.disable();}}},// Actual Callbacks objectself = {// Add a callback or a collection of callbacks to the listadd: function() {if ( list ) {// First, we save the current lengthvar start = list.length;(function add( args ) {jQuery.each( args, function( _, arg ) {var type = jQuery.type( arg );if ( type === "function" ) {// 回调不唯一 或 唯一且不存在，则pushif ( !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操作，则更新firingLengthif ( firing ) {firingLength = list.length;// With memory, if we're not firing then// we should call right away// 如果options.memory为true，则再次执行fire，且参数相同，fire中的firingIndex为此时的firingStart }else if ( memory ) {firingStart = start;fire( memory );}}return this;},// Remove a callback from the listremove: 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// 正在执行的回调执行了remvoe操作，则更新firingLength和firingIndex的值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 listempty: function() {list = [];return this;},// Have the list do nothing anymore// 禁用add,remove,fire主要方法的工作disable: function() {list = stack = memory = undefined;return this;},// Is it disabled?disabled: function() {return !list;},// Lock the list in its current statelock: function() {// 如果回调执行过，则将阻止self.fire操作// 但如果 options.memory = true，则仍然会执行fire操作stack = undefined;// 回调未执行，则禁用if ( !memory ) {self.disable();}return this;},// Is it locked?locked: function() {return !stack;},// Call all callbacks with the given context and argumentsfireWith: function( context, args ) {args = args || [];args = [ context, args.slice ? args.slice() : args ];// 回调未执行 或 已执行且可以执行多次if ( list && ( !fired || stack ) ) {// 正在执行的回调函数执行了fireWith操作( 暗指回调列表已执行过，且可以执行多次，stack = []; )// 该函数需要条件执行，或有移除该函数的操作，否则陷入死循环，详见例2if ( firing ) {stack.push( args );}// 正在执行的回调函数没有执行fireWith操作else {fire( args );}}return this;},// Call all the callbacks with the given argumentsfire: function() {self.fireWith( this, arguments );return this;},// To know if the callbacks have already been called at least oncefired: function() {return !!fired;}};return self; };
三、示例
例1：
$(function(){// 定义三个将要增加到回调列表的回调函数fn1,fn2,fn3 function fn1(arg){console.log( 'fn1 says:' + arg );// 在fn1中执行Callbacks.add操作，此时Callbacks函数内部的firingLength将会得到更新 $callbacks.add(fn2);}function fn2(arg){console.log( 'fn2 says:' + arg );}function fn3(arg){console.log( 'fn3 says:' + arg );}// Callbacks传递了memory// 也可以这样使用$.Callbacks({ memory: true });var $callbacks = $.Callbacks('memory');// 将fn1增加到回调列表中，因为在fn1中有执行了add(fn2)操作，因此回调列表中的回调为fn1,fn2 $callbacks.add(fn1);// output: fn1 says:foo// output: fn2 says:foo$callbacks.fire('foo');// 将之前fire的参数传递给最近增加的回调fn3，并执行fn3// output: fn3 says:foo $callbacks.add(fn3);// 再执行一次fire，注意此时回调列表中的回调一次是fn1,fn2,fn3,fn2// output: fn1 says:baz// output: fn2 says:baz// output: fn3 says:baz// output: fn2 says:baz// 如果期望回调列表中只有fn1,fn2,fn3，只需在Callbacks函数中传入unique$callbacks.fire('baz'); });
例2
$(function(){ function fn1(arg){console.log( 'fn1 says:' + arg );}function fn2(arg){console.log( 'fn2 says:' + arg );$callbacks.fireWith(window, ['yjh']);// 一定要执行这一步，否则将会陷入死循环 $callbacks.remove(fn2);}var $callbacks = $.Callbacks();$callbacks.add(fn1);// output: fn1 says:foo$callbacks.fire('foo'); $callbacks.add(fn2); // output: fn1 says:baz// output: fn2 says:baz// output: fn1 says:yjh$callbacks.fire('baz'); });
PS:
此前写过一篇关于jQuery.Callbacks源码分析的随笔，理解不透彻，今天又重新翻阅了一下，记录一下自己的源码阅读，相比之前，感觉好多了。
阅读前，可以先看API，弄清楚四个参数标志，'once', 'memory', 'unique', 'stopOnFalse', 简单的执行add, fire操作，然后再看源码；
阅读顺序：
1、先阅读var声明的变量，fire函数的前半部分，self对象中的add, remove函数，有些难以理解暂时往下看；
2、然后阅读self对象中的fire，fireWith，最后再来阅读fire函数，弄清楚后再看其他self对象中的方法。
转载请注明出处：博客园华子yjh