JQuery源码解析(十)
默认回调对象设计
不传入任何参数,调用add的时候将函数add到内部的list中,调用fire的时候顺序触发list中的回调函数:
function fn1(val) { console.log('fn1 says:' + val); } function fn2(val) { console.log('fn2 says ' + val); } var cbs = $.Callbacks(); cbs.add(fn1); cbs.fire('foo'); console.log('........') cbs.add(fn2); cbs.fire('bar')
结果就是按照顺序叠加触发,如下列表:
fn1 says:foo ……………………… fn1 says:bar fn2 says bar
这种就是最简单的处理了,可以直接模拟,代码如下:
function Callbacks() { var list = []; var self; self = { add: function(fn) { list.push(fn) }, fire: function(args) { list.forEach(function(fn) { fn(args); }) } } return self; }
代码:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="http://img.mukewang.com/down/540812440001e40e00000000.js" type="text/javascript"></script> <script src="http://img.mukewang.com/down/541f6ff70001a0a500000000.js" type="text/javascript"></script> <title></title> </head> <body> <script type="text/javascript"> function Callbacks() { var list = []; var self; self = { add: function(fn) { list.push(fn) }, fire: function(args) { list.forEach(function(fn) { fn(args); }) } } return self; } function fn1(val) { show('fn1 says:' + val); } function fn2(val) { show('fn2 says ' + val); } var cbs = Callbacks(); cbs.add(fn1); cbs.fire('foo'); cbs.add(fn2); cbs.fire('bar') </script> </body> </html>
once的设计
once的作用确保回调列表只执行(.fire())一次(像一个递延 Deferred),如下代码:
function fn1(val){ console.log('fn1 says ' + val); } var cbs = $.Callbacks('once'); cbs.add(fn1); cbs.fire('foo'); cbs.fire('foo');
结果你会发现cbs.fire('foo')只执行了一次。
fn1 says foo //只显示一次
once定义是很明确的,确保这个回调列表只执行( .fire() )一次(像一个递延 Deferred),所以针对这种once的处理可以有多种不同的途径实现。
1、add的时候抛弃
2、在fire的时候抛弃多个。
但是jQuery是在执行第一个fire的时候直接给清空list列表了,然后在add的地方给判断下list是否存在,从而达到这样的处理。
function Callbacks(options) { var list = []; var self; self = { add: function(fn) { list.push(fn) }, fire: function(args) { if (list) { list.forEach(function(fn) { fn(args); }) if (options === 'once') { list = undefined; } } } } return self; }
在fire之后,判断参数是否为once,直接把list给清理掉,所以之后的所有fire都被抛弃掉了,而从达到了once的效果。
jQuery.Callbacks的处理
在fire中调用了 self.disable(); 方法
// 禁用回调列表中的回调。 disable: function() { list = stack = memory = undefined; return this; },
实例代码:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="http://img.mukewang.com/down/540812440001e40e00000000.js" type="text/javascript"></script> <script src="http://img.mukewang.com/down/541f6ff70001a0a500000000.js" type="text/javascript"></script> <title></title> </head> <body> <script type="text/javascript"> function Callbacks(options) { var list = []; var self; self = { add: function(fn) { list.push(fn) }, fire: function(args) { if(list){ list.forEach(function(fn) { fn(args); }) if(options === 'once'){ list = undefined; } } } } return self; } function fn1(val) { show('fn1 says:' + val); } function fn2(val) { show('fn2 says ' + val); } var cbs = Callbacks('once'); cbs.add(fn1); cbs.fire('foo'); cbs.fire('foo'); </script> </body> </html>
memory的设计
memory:保持以前的值,将添加到这个列表的后面的最新的值立即执行调用任何回调 (像一个递延 Deferred)。
回调函数是从异步队列Deferred分离出来的,所以很多的接口设计都是为了契合Deferred接口,memory用的很多,这个缓存的设计这里提及一下
主要是用来实现deferred的异步收集与pipe管道风格的数据传递的,具体在Deferred有详解,这里大概了解下作用范围。
memory这个有点不好理解,我们还是通过列子说明下,看下面的代码:
var cbs = Callbacks('once'); cbs.add(fn1); cbs.fire('foo'); cbs.fire('foo'); function fn1(val) { console.log('fn1 says ' + val); } function fn2(val) { console.log('fn2 says ' + val); } function fn3(val) { console.log('fn3 says ' + val); } var cbs = $.Callbacks('memory'); cbs.add(fn1); cbs.fire('foo'); console.log('..........') cbs.add(fn2); cbs.fire('bar'); console.log('..........') cbs.add(fn3); cbs.fire('aaron');
结果可以看出,我们在执行cbs.add(fn2);的时候,此时除了把fn2添加到了回调队列之外而且还立刻执行了这个方法,唯一的区别就是,参数是用的之前的。所以解释就叫“保持以前的值”。
fn1 says foo .......... fn2 says foo fn1 says bar fn2 says bar .......... fn3 says bar fn1 says aaron fn2 says aaron fn3 says aaron
所以这个memory
设计需要解决的问题就是:
1:如何取到上一个参数
2:add后如何执行
看看我们实现的代码:
function Callbacks(options) { var list = []; var self; var firingStart; var memory; function _fire(data) { memory = options === 'memory' && data; firingIndex = firingStart || 0; firingStart = 0; firingLength = list.length; for (; list && firingIndex < firingLength; firingIndex++) { list[firingIndex](data) } } self = { add: function(fn) { var start = list.length; list.push(fn) if (memory) { firingStart = start; //获取最后一值 _fire(memory); } }, fire: function(args) { if (list) { _fire(args) } } } return self; }
首先add之后要能触发fire的动作,所以我们把fire作为内部的一个私有方法实现_fire,比较合逻辑,这样外部的fire只是一个门面方法的调用。
私有变量memory缓存这上一个参数的属性,我们靠firingStart用来定位最后通过add增加的回调数据的索引。在遍历的时候直接通过firingStart的起始索引定位,然后传递memory的参数,而且实现这种“保持以前的值”的设计。
实例代码:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="http://img.mukewang.com/down/540812440001e40e00000000.js" type="text/javascript"></script> <script src="http://img.mukewang.com/down/541f6ff70001a0a500000000.js" type="text/javascript"></script> <title></title> </head> <body> <script type="text/javascript"> function Callbacks(options) { var list = []; var self; var firingStart; var memory; function _fire(data) { memory = options === 'memory' && data; firingIndex = firingStart || 0; firingStart = 0; firingLength = list.length; for (; list && firingIndex < firingLength; firingIndex++) { list[firingIndex](data) } } self = { add: function(fn) { var start = list.length; list.push(fn) if (memory) { firingStart = start; //获取最后一值 _fire(memory); } }, fire: function(args) { if (list) { _fire(args) } } } return self; } function fn1(val) { show('fn1 says ' + val); } function fn2(val) { show('fn2 says ' + val); } function fn3(val) { show('fn3 says ' + val); } var cbs = Callbacks('memory'); cbs.add(fn1); cbs.fire('foo'); cbs.add(fn2); cbs.fire('bar'); cbs.add(fn3); cbs.fire('aaron') </script> </body> </html>
unique的设计
Unique:确保一次只能添加一个回调(所以在列表中没有重复的回调)
function fn1(val) { console.log('fn1 says ' + val); } var callbacks = $.Callbacks( "unique" ); callbacks.add( fn1 ); callbacks.add( fn1 ); // repeat addition callbacks.add( fn1 ); callbacks.fire( "foo" );
结果:过滤了相同的add操作
fn1 says foo
过滤重复的比较简单,因为是数组的保存方式,我们可以在入口处通过indexOf判断即可
function Callbacks(options) { var list = []; var self; var firingStart; var memory; function _fire(data) { memory = options === 'memory' && data; firingIndex = firingStart || 0; firingStart = 0; firingLength = list.length; for (; list && firingIndex < firingLength; firingIndex++) { list[firingIndex](data) } } self = { add: function(fn) { var start = list.length; if (options == 'unique') { if (-1 === list.indexOf(fn)) { list.push(fn) } } else { list.push(fn) } if (memory) { firingStart = start; //获取最后一值 _fire(memory); } }, fire: function(args) { if (list) { _fire(args) } } } return self; }
实例代码:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="http://img.mukewang.com/down/540812440001e40e00000000.js" type="text/javascript"></script> <script src="http://img.mukewang.com/down/541f6ff70001a0a500000000.js" type="text/javascript"></script> <title></title> </head> <body> <script type="text/javascript"> function Callbacks(options) { var list = []; var self; var firingStart; var memory; function _fire(data) { memory = options === 'memory' && data; firingIndex = firingStart || 0; firingStart = 0; firingLength = list.length; for (; list && firingIndex < firingLength; firingIndex++) { list[firingIndex](data) } } self = { add: function(fn) { var start = list.length; if (options == 'unique') { if (-1 === list.indexOf(fn)) { list.push(fn) } } else { list.push(fn) } if (memory) { firingStart = start; //获取最后一值 _fire(memory); } }, fire: function(args) { if (list) { _fire(args) } } } return self; } function fn1(val) { show('fn1 says ' + val); } var callbacks = Callbacks( "unique" ); callbacks.add( fn1 ); callbacks.add( fn1 ); // 重复添加 callbacks.add( fn1 ); callbacks.fire( "foo" ); </script> </body> </html>
stopOnFalse
stopOnFalse: 当一个回调返回false 时中断调用
function fn1(value) { console.log(value); return false; } function fn2(value) { fn1("fn2 says: " + value); return false; } var callbacks = $.Callbacks("stopOnFalse"); callbacks.add(fn1); callbacks.fire("foo"); callbacks.add(fn2); callbacks.fire("bar");
结果虽然fn1被添加到了回调列表,但是因为fn1返回了false,那么意思之后的回调都不会被调用了。如果还有fn3,在f2上返回false,fn3也将不会被调用。
foo bar
这个设计我们只要控制好函数返回的处理的布尔值,通过这个值用来判断是否需要下一个遍历
if (list[firingIndex](data) === false && options === 'stopOnFalse') { break; }
源码如下:
function Callbacks(options) { var list = []; var self; var firingStart; var memory; function _fire(data) { memory = options === 'memory' && data; firingIndex = firingStart || 0; firingStart = 0; firingLength = list.length; for (; list && firingIndex < firingLength; firingIndex++) { if (list[firingIndex](data) === false && options === 'stopOnFalse') { break; } } } self = { add: function(fn) { var start = list.length; if (options == 'unique') { if (-1 === list.indexOf(fn)) { list.push(fn) } } else { list.push(fn) } if (memory) { firingStart = start; //获取最后一值 _fire(memory); } }, fire: function(args) { if (list) { _fire(args) } } } return self; }
以上是几种单独的处理情况的用法,我们可以看到jQuery都是组合使用的,最常见的就是
jQuery.Callbacks("once memory")的组合了,其实以上的思路都讲解过了,无非就是组合起来的时候要考虑一些判断了。
代码示例:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="http://img.mukewang.com/down/540812440001e40e00000000.js" type="text/javascript"></script> <script src="http://img.mukewang.com/down/541f6ff70001a0a500000000.js" type="text/javascript"></script> <title></title> </head> <body> <script type="text/javascript"> function Callbacks(options) { var list = []; var self; var firingStart; var memory; function _fire(data) { memory = options === 'memory' && data; firingIndex = firingStart || 0; firingStart = 0; firingLength = list.length; for (; list && firingIndex < firingLength; firingIndex++) { if (list[firingIndex](data) === false && options === 'stopOnFalse') { break; } } } self = { add: function(fn) { var start = list.length; if (options == 'unique') { if (-1 === list.indexOf(fn)) { list.push(fn) } } else { list.push(fn) } if (memory) { firingStart = start; //获取最后一值 _fire(memory); } }, fire: function(args) { if (list) { _fire(args) } } } return self; } function fn1( value ){ show( value ); return false; } function fn2( value ){ fn1( "fn2 says: " + value ); return false; } var callbacks = Callbacks('stopOnFalse'); callbacks.add(fn1); callbacks.fire("foo1"); callbacks.add(fn2); callbacks.fire("foo2"); </script> </body> </html>