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>
JQuery源码解析（十）的更多相关文章
- JQuery源码解析（一）
写在前面:本<JQuery源码解析>系列是基于一些前辈们的文章进行进一步的分析.细化.修改而写出来的,在这边感谢那些慷慨提供科普文档的技术大拿们. 要查阅JQ的源文件请下载开发版的JQ.j ...
- jQuery 源码解析二：jQuery.fn.extend=jQuery.extend 方法探究
终于动笔开始 jQuery 源码解析第二篇,写文章还真是有难度,要把自已懂的表述清楚,要让别人听懂真的不是一见易事. 在 jQuery 源码解析一:jQuery 类库整体架构设计解析 一文,大致描述了 ...
- jquery源码解析：代码结构分析
本系列是针对jquery2.0.3版本进行的讲解.此版本不支持IE8及以下版本. (function(){ (21, 94) 定义了一些变量和函数, jQuery = function() ...
- jquery 源码解析
静态与实力方法共享设计 遍历方法 $(".a").each() //作为实例方法存在 $.each() //作为静态方法存在 Jquery源码 jQuery.prototype = ...
- jQuery源码解析资源便签
最近开始解读jQuery源码,下面的链接都是搜过来的,当然妙味课堂 有相关的一系列视频,长达100多期,就像一只蜗牛慢慢爬, 至少品读三个框架,以后可以打打怪,自己造造轮子. 完全理解jQuery源代 ...
- 三.jQuery源码解析之jQuery的框架图
这张图片是对jQuery源码截图,一点一点拼出来的. 现在根据这张图片来对jQuery框架做一些说明. 一.16~9404行可以发现,最外层是一个自调用函数.当jQuery初始化时,这个自调用函数包含 ...
- jquery源码解析：addClass，toggleClass，hasClass详解
这一课,我们将继续讲解jQuery对元素属性操作的方法. 首先,我们先看一下这几个方法是如何使用的: $("#div1").addClass("box1 box2&quo ...
- jquery源码解析：jQuery数据缓存机制详解2
上一课主要讲了jQuery中的缓存机制Data构造方法的源码解析,这一课主要讲jQuery是如何利用Data对象实现有关缓存机制的静态方法和实例方法的.我们接下来,来看这几个静态方法和实例方法的源码解 ...
- jquery源码解析：jQuery数据缓存机制详解1
jQuery中有三种添加数据的方法,$().attr(),$().prop(),$().data().但是前面两种是用来在元素上添加属性值的,只适合少量的数据,比如:title,class,name等 ...
- jquery源码解析：jQuery工具方法when详解
我们先来看when方法是如何使用的: var cb = $.when(); //when方法也是返回一个延迟对象,源码是return deferred.promise();返回的延迟对象不能修改状 ...
随机推荐
- Moving Tables(贪心或Dp POJ1083)
Moving Tables Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 28304 Accepted: 9446 De ...
- Unity中通过类名字符串取组件类型的方法(Types.GetType用法)
正常调用Type.GetType取不到组件,因为会先创建实例在获取,而Unity组件无法通过new来创建. 第二种创建方式是通过程序集,具体如下 Assembly.GetExecutingAssemb ...
- noi 6045 开餐馆
题目链接:http://noi.openjudge.cn/ch0206/6045/ 解题报告:参考了konjac 蒟蒻的. 题意: 有N个地址,从中选一些开餐馆,要保证相邻餐馆的距离大于k.问最大利润 ...
- ajax 另外两种返回类型（json xml）
返回json类型(例子): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- Spring并发访问的线程安全性问题
Spring并发访问的线程安全性问题 http://windows9834.blog.163.com/blog/static/27345004201391045539953/ 由于Spring MVC ...
- Linux 日常命令
命令 介绍说明 pwd 打印出当前所在目录 mkdir 创建一个目录 rmdir 删除一个目录 rm 删除文件或目录 -r:删除目录时必须加上 cp 复制一个文件或目录 -r:复制 ...
- 单据BE构建
本节来构建单据BE1.新建单据BE实体项目,修改命名空间 2.引入单据基类如下图所示,在UFIDA.U9.Base.BaseBE.MetaData命名空间下将类Doc托至设计BE视图中 3.分别托2个 ...
- win7下的ipython没有的问题
在笔记本上安装python2.7后,执行python是可以的,但是ipython却不行. 一.问题排查 在网上搜索了看到python与ipython的区别: 例如:ipython有tab补全功能,然后 ...
- 基于注解的Spring AOP的配置和使用--转载
AOP是OOP的延续,是Aspect Oriented Programming的缩写,意思是面向切面编程.可以通过预编译方式和运行期动态代理实现在不修改源代码的情况下给程序动态统一添加功能的一种技术. ...
- php短路与 短路或
关于php短路的问题特性,三种写法的区别 $a = 1;$b=0;第一种: $a && $b = 'cccccccc';第二种 $a || $b = 'cccccccc';第三种 if ...