读jQuery源码有感2
那么就来读读jQuery源码的Callbacks部分。
一上来看原版源码
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; for ( ; list && firingIndex < firingLength; firingIndex++ ) { if ( list[ firingIndex ].apply( data[ 0 ], data[ 1 ] ) === false && options.stopOnFalse ) { memory = false; // To prevent further calls using add break; } } firing = false; if ( list ) { if ( stack ) { if ( stack.length ) { fire( stack.shift() ); } } else if ( memory ) { list = []; } 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" ) { 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? if ( firing ) { firingLength = list.length; // With memory, if we're not firing then // we should call right away } 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 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 empty: function() { list = []; firingLength = 0; return this; }, // Have the list do nothing anymore disable: function() { list = stack = memory = undefined; return this; }, // Is it disabled? disabled: function() { return !list; }, // Lock the list in its current state 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 ) { 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; };
如你所见,一开始声明了好几个变量,英文注释也说明变量干什么用,但事实上,你还是不知道这些个变量具体作用在哪。
那好,进入http://api.jquery.com/category/callbacks-object/
这里每个api说明,都有个demo,每个demo就相当于一个测试用例。
那么,依据测试用例,给源码设断点,一步步调试,看数据走向。但是一环嵌一环,绕来绕去,都记不住这些个变量变化的意义。
反正,一,句,话。我不知道作者为什么这么写,这个模块的设计思路是怎样。
怎么办,凉拌。
既然有了测试用例,那我就根据它来自己实现。如果实现的过程中,遇到困难,再看看源码,这样就更接近作者的思维,从而知道那些变量,判断的意义所在。
1.首先要实现的就是add和fire功能。
其思路是,引入一个函数管理数组变量,add就是把函数加进数组里,fire就是遍历数组,一个个调用函数。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>add和fire的功能</title> <script type="text/javascript"> var callbacks = { callbacks_list: [], add: function(fn) { this.callbacks_list.push(fn); }, fire: function() { var arg = arguments; this.callbacks_list.forEach(function(fn) { fn.apply(this, arg); }) } } var foo = function(value) { console.log("foo: " + value); }; var bar = function(value) { console.log("bar: " + value); }; callbacks.add(foo); callbacks.fire("hello"); callbacks.add(bar); callbacks.fire("world"); </script> </head> <body> 现在的callback有add,fire功能 </body> </html>
2.加入remove功能。
思路是,遍历函数管理数组,判断其成员和传进来的参数是否一致,一致则移除。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>加入remove功能</title> <script type="text/javascript"> var callbacks = { callbacks_list: [], add: function(fn) { this.callbacks_list.push(fn); }, fire: function() { var arg = arguments; this.callbacks_list.forEach(function(fn) { fn.apply(this, arg); }) }, remove: function(fn){ for(var i=0, l = this.callbacks_list.length; i < l; i++){ if(this.callbacks_list[i] == fn){ this.callbacks_list.splice(i,1); } } } } var foo = function(value) { console.log("foo: " + value); }; var bar = function(value) { console.log("bar: " + value); }; callbacks.add( foo ); callbacks.fire( "hello" ); callbacks.remove( foo ); callbacks.fire( "world" ); </script> </head> <body> 现在的callback有add,fire,remove功能 </body> </html>
3.加入disable功能。
disable在测试用例中所展示的意思就是,一旦disable了,再怎么fire,也不执行。
内部实现就是,把函数管理数组设置为undefined,然后在fire那边判断undefined,则跳出函数。
我这里忘了在add函数里,判断函数管理数组callbacks_list的undefined。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>3.加入disabled功能</title> <script type="text/javascript"> var callbacks = { callbacks_list: [], add: function(fn) { this.callbacks_list.push(fn); }, fire: function() { if(this.callbacks_list == undefined || this.callbacks_list == null){ return; } var arg = arguments; this.callbacks_list.forEach(function(fn) { fn.apply(this, arg); }) }, remove: function(fn) { for (var i = 0, l = this.callbacks_list.length; i < l; i++) { if (this.callbacks_list[i] == fn) { this.callbacks_list.splice(i, 1); } } }, disable: function() { this.callbacks_list = undefined; return this; }, disabled: function() { return !callbacks_list; } } var foo = function(value) { console.log(value); }; callbacks.add(foo); callbacks.fire("foo"); callbacks.disable(); callbacks.fire("foobar"); // foobar isn't output </script> </head> <body> 现在的callback有add,fire,remove,disable功能 </body> </html>
4.加入has功能
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>4.加入has功能</title> <script type="text/javascript"> var callbacks = { callbacks_list: [], add: function(fn) { this.callbacks_list.push(fn); }, fire: function() { if (this.callbacks_list == undefined || this.callbacks_list == null) { return; } var arg = arguments; this.callbacks_list.forEach(function(fn) { fn.apply(this, arg); }) }, remove: function(fn) { for (var i = 0, l = this.callbacks_list.length; i < l; i++) { if (this.callbacks_list[i] == fn) { this.callbacks_list.splice(i, 1); } } }, disable: function() { this.callbacks_list = undefined; return this; }, disabled: function() { return !callbacks_list; }, has: function(fn) { for (var i = 0, l = this.callbacks_list.length; i < l; i++) { if (this.callbacks_list[i] == fn) { return true; } } return false; } } var foo = function(value1, value2) { console.log("Received: " + value1 + "," + value2); }; // A second function which will not be added to the list var bar = function(value1, value2) { console.log("foobar"); }; // Add the log method to the callbacks list callbacks.add(foo); // Determine which callbacks are in the list console.log(callbacks.has(foo)); // true console.log(callbacks.has(bar)); // false </script> </head> <body> 现在的callback有add,fire,remove,disable,has功能 </body> </html>
5.加入empty功能
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>5.加入empty功能</title> <script type="text/javascript"> var callbacks = { callbacks_list: [], add: function(fn) { this.callbacks_list.push(fn); }, fire: function() { if (this.callbacks_list == undefined || this.callbacks_list == null) { return; } var arg = arguments; this.callbacks_list.forEach(function(fn) { fn.apply(this, arg); }) }, remove: function(fn) { for (var i = 0, l = this.callbacks_list.length; i < l; i++) { if (this.callbacks_list[i] == fn) { this.callbacks_list.splice(i, 1); } } }, disable: function() { this.callbacks_list = undefined; return this; }, disabled: function() { return !callbacks_list; }, has: function(fn) { for (var i = 0, l = this.callbacks_list.length; i < l; i++) { if (this.callbacks_list[i] == fn) { return true; } } return false; }, empty:function(){ this.callbacks_list = []; return this; } } // A sample logging function to be added to a callbacks list var foo = function(value1, value2) { console.log("foo: " + value1 + "," + value2); }; // Another function to also be added to the list var bar = function(value1, value2) { console.log("bar: " + value1 + "," + value2); }; // Add the two functions callbacks.add(foo); callbacks.add(bar); // Empty the callbacks list callbacks.empty(); // Check to ensure all callbacks have been removed console.log(callbacks.has(foo)); // false console.log(callbacks.has(bar)); // false </script> </head> <body> 现在的callback有add,fire,remove,disable,has,empty功能 </body> </html>
6.加入lock功能
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>6.加入lock功能</title> <script type="text/javascript"> var callbacks = { callbacks_list: [], memory: "", has_locked : false, add: function(fn) { this.callbacks_list.push(fn); }, fire: function() { if (this.callbacks_list == undefined || this.callbacks_list == null) { return; } else { if(this.has_locked == true){ var callback_this = this; var arg = callback_this.memory this.callbacks_list.forEach(function(fn) { fn.apply(callback_this, arg); }) } else{ var arg = arguments; var callback_this = this; this.memory = arg; this.callbacks_list.forEach(function(fn) { fn.apply(callback_this, arg); }) } } }, remove: function(fn) { for (var i = 0, l = this.callbacks_list.length; i < l; i++) { if (this.callbacks_list[i] == fn) { this.callbacks_list.splice(i, 1); } } }, disable: function() { this.callbacks_list = undefined; return this; }, disabled: function() { return !callbacks_list; }, has: function(fn) { for (var i = 0, l = this.callbacks_list.length; i < l; i++) { if (this.callbacks_list[i] == fn) { return true; } } return false; }, empty: function() { this.callbacks_list = []; return this; }, lock: function() { this.callbacks_list = []; this.has_locked = true; } } /*demo1*/ var foo = function(value) { console.log("foo:" + value); }; var bar = function(value) { console.log("bar:" + value); }; callbacks.add(foo); callbacks.fire("hello"); callbacks.lock(); callbacks.fire("world"); /*demo2*/ // Add the foo function to the callback list again callbacks.add(foo); // Try firing the items again callbacks.fire("silentArgument"); // Outputs "foo: hello" because the argument value was stored in memory // Add the bar function to the callback list callbacks.add(bar); callbacks.fire("youHadMeAtHello"); </script> </head> <body> 现在的callback有add,fire,remove,disable,has,empty,lock功能 </body> </html>
还有未完成的就是,$.Callbacks()的参数once,memory,unique,stopOnFalse。
我一直思考的是,代码构建过程和纯逻辑思路,代码阅读。
一般来说,一个库的形成,是因为作者编写的过程中,发现一个个需求,或者一个个bug,然后需求和bug形成测试用例,根据测试用例,构造库。
它的库代码最后为什么会这个样子,一次次引入新变量,一个个判断来嵌套,还有为了库的使用便利,对函数参数做了各种判断处理,导致直接阅读有难度,不能通俗易懂。
那我们能否根据测试用例提取出这个模块的纯逻辑思路。至于逻辑思路的实现,交给开发自己代码能力实现。
合乎自然而生生不息。。。