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();返回的延迟对象不能修改状 ...
随机推荐
- 用jxl导出数据到excel
需要jxl.jar 测试结果没问题,代码: package com; import java.io.File; import java.io.IOException; import java.util ...
- 用一个案列详细讲解UITextFiled
一. 登陆界面的搭建 首先涉及到登录界面状态栏颜色的问题,我们需要将状态栏颜色改为白色,可以在控制器内实现方法更改 - (UIStatusBarStyle)preferredStatusBarStyl ...
- 【Redis】Redis的基本安装及使用
在Linux上安装Redis Redis的安装很简单.基本上是下载.解压.运行安装脚本.我用的Redis版本是3.2.1. [nicchagil@localhost app]$ wget -q htt ...
- 我的android学习经历31
最近把四大组件,网络编程,以及一些常用的控件都学完了,不过感觉还不是特别牢固,所以决定再花一点时间重新过一遍,你们有这样的感觉吗?
- Bootstrap_标签
一.标签 在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息,比如说在导航上添加了一个新导航项,可能就会加一个“new”标签,来告诉用户. 那么在Bootstrap框架中特意将这样的效果提 ...
- KNN算法与Kd树
最近邻法和k-近邻法 下面图片中只有三种豆,有三个豆是未知的种类,如何判定他们的种类? 提供一种思路,即:未知的豆离哪种豆最近就认为未知豆和该豆是同一种类.由此,我们引出最近邻算法的定义:为了判定未知 ...
- JavaScript格式化时间
最近最练习遇到一个问题,就是从数据库中获取时间,利用EasyUI界面来显示时间类型的生日,发现它是按照毫秒来计算的long型数据,在界面显示并不能到达到一目了然,这里可以用两种方法来解决这个问题 在d ...
- Linux变量
变量:(大的分为环境变量与本的变量) 本地变量: 本地变量在用户现在的shell生命期的脚本中使用.例如,本地变量file-name="loop.doc",这个值只在用户当前she ...
- Nginx模块之————RTMP模块在Ubuntu 14.04年的设置与搭建
Nginx的设置,RTMP在Ubuntu 14.04 https://www.vultr.com/docs/setup-nginx-rtmp-on-ubuntu-14-04
- MFC编程入门之八（对话框：创建对话框类和添加控件变量）
创建好对话框资源后要做的就是生成对话框类了.生成对话框类主要包括新建对话框类.添加控件变量和控件的消息处理函数. 例程Addition是基于对话框的程序,所以程序自动创建了对话框模板IDD_ADDIT ...