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();返回的延迟对象不能修改状 ...
随机推荐
- (转)函数调用方式与extern "C"
原文:http://patmusing.blog.163.com/blog/static/13583496020103233446784/ (VC编译器下) 1. CALLBACK,WINAPI和AF ...
- Hadoop之Hive(2)--配置Hive Metastore
Hive metastore服务以关系性数据库的方式存储Hive tables和partitions的metadata,并且提供给客户端访问这些数据的metastore service的API.下面介 ...
- Adobe Edge Animate CC 不再开发更新！
Adobe Edge Animate CC停止开发更新! http://blogs.adobe.com/edge/2015/11/30/update-about-edge-tools-services ...
- 连接mysql提示com.mchange.v2.resourcepool.BasicResourcePool
1.com.mchange.v2.resourcepool.BasicResourcePool$ScatteredAcquireTask@6ff9129c com.mchange.v2.resourc ...
- LTE Module User Documentation（翻译13）——频率复用算法（Frequency Reuse Algorithms）
LTE用户文档 (如有不当的地方,欢迎指正!) 19 Frequency Reuse Algorithms(频率复用算法) 本节我们将描述如何在 LTE 仿真中使用频率复用(FR)算法.共有两 ...
- iOS AFNetworking中cookie的读取与设置
参考: http://blog.csdn.net/zhaoxy_thu/article/details/20532879 实际上AFNetworking中并没有专门针对cookie封装的代码,但是由于 ...
- 学习mongo系列（五） AND,$or,$type
MongoDB OR 条件 MongoDB OR 条件语句使用了关键字 $or,语法格式如下: >db.col.find( { $or: [ {key1: value1}, {key2:valu ...
- Android Studio UML 插件 PlantUML 使用语法
活动标签(activity label)以冒号开始,以分号结束. 文本格式支持creole wiki语法. 活动默认安装它们定义的顺序就行连接. @startuml :Hello world; :Th ...
- 与Status Bar和Navigation Bar相关的一些东西
Android Navigation Bar Status Bar 与StatusBar和NavigationBar相关的东西有两种,一是控制它们的显示与隐藏,二是控制它们的透明与否及背景. 在2 ...
- IntelliJ IDEA 设置代码提示或自动补全的快捷键
IntelliJ IDEA 设置代码提示或自动补全的快捷键 点击 文件菜单(File) –> 点击 设置(Settings- Ctrl+Alt+S), –> 打开设置对话框. 在左侧的 ...