读jQuery之十九(多用途回调函数列表对象)
来源:互联网 发布:lcd1602数据手册 编辑:程序博客网 时间:2024/05/16 11:54
转载 自:http://www.cnblogs.com/snandy/archive/2012/11/15/2770237.html
$.Callbacks是在版本1.7中新加入的。它是一个多用途的回调函数列表对象,提供了一种强大的方法来管理回调函数队列。
整个$.Callbacks的源码不到200行,它是一个工厂函数,使用函数调用方式(非new,它不是一个类)创建对象,它有一个可选参数flags用来设置回调函数的行为。
$.Callbacks是在jQuery内部使用,如为$.ajax,$.Deferred等组件提供基础功能的函数。它也可以用在类似功能的一些组件中,如自己开发的插件。
$.Callbacks构造的对象(以callbacks示例)主要包括以下方法:
- callbacks.add
- callbacks.remove
- callbacks.has
- callbacks.empty
- callbacks.disable
- callbacks.fire
- callbacks.fireWith
- callbacks.fired
- callbacks.lock
- callbacks.locked
1. callbacks.add 添加一个函数到回调队列
function
fn1() {
console.log(1)
}
function
fn2() {
console.log(2)
}
var
callbacks = $.Callbacks();
// 方式1
callbacks.add(fn1);
// 方式2 一次添加多个回调函数
callbacks.add(fn1, fn2);
// 方式3 传数组
callbacks.add([fn1, fn2]);
// 方式4 函数和数组掺和
callbacks.add(fn1, [fn2]);
传数组进去实际在add内部判断如果是数组会递归调用私有的add函数。此外,需注意add方法默认不去重,比如这里fn1添加两次,fire时会触发两次。私有add方法有趣,它使用了具名函数立即执行其名仅在函数内可用。如图中所圈之处
2. callbacks.remove 从回调队列中删除一个函数
function
fn1() {
console.log(1)
}
function
fn2() {
console.log(2)
}
var
callbacks = $.Callbacks();
callbacks.add(fn1, fn2);
callbacks.remove(fn1);
此时fire只会触发fn2了。
此外remove方法会把添加多次的函数如fn1,全部删除掉。为此还和cmc和nick讨论为啥remove内部不用if而用while(开始我以为是jQuery写错了)。如下
var
callbacks = $.Callbacks();
callbacks.add(fn1, fn2, fn1, fn2);
callbacks.remove(fn1);
此时会把add两次的fn1都删掉,fire时只触发fn2两次。换成if则只删fn1一次。
3. callbacks.has 判断是否添加过某回调函数,不想重复添加时很有用
function
fn1() {
console.log(1)
}
var
callbacks = $.Callbacks();
callbacks.add(fn1);
if
(!callbacks.has(fn1)) {
callbacks.add(fn1);
}
4. callbacks.empty 清空所有的回调函数
function
fn1() {
console.log(1)
}
function
fn2() {
console.log(2)
}
var
callbacks = $.Callbacks();
callbacks.add(fn1);
callbacks.add(fn2);
callbacks.empty();
此时再fire不会触发任何函数。empty函数实现很简单,只是把内部的队列管理对象list重置为一个空数组。这里可以了解清空数组的几种方式。
5. callbacks.disable 禁用该对象
function
fn1() {
console.log(1)
}
function
fn2() {
console.log(2)
}
var
callbacks = $.Callbacks();
callbacks.disable();
callbacks.add(fn1);
// 不起作用
callbacks.add(fn2);
// 不起作用
callback.remove(fn1);
// 不起作用
callbacks.fire();
// 不起作用
调用后再使用add, remove, fire等方法均不起作用。该方法内不是实际是将队列管理对象list、stack、memory都置undefined了。
6. callbacks.fire 主动触发添加回调函数
function
fn() {
console.log(
this
);
// 上下文是callbacks
console.log(arguments);
// [3]
}
var
callbacks = $.Callbacks();
callbacks.add(fn);
callback.fire(3);
前面已经提到了,fire方法用来触发回调函数,默认的上下文是callbacks对象,还可以传参给回调函数。
7. callbacks.fireWith 同fire,但可以指定执行上下文
function
fn() {
console.log(
this
);
// 上下文是person
console.log(arguments);
// [3]
}
var
person = {name:
'jack'
};
var
callbacks = $.Callbacks();
callbacks.add(fn);
callback.fireWith(person, 3);
其实fire内部调用的是fireWith,只是将上下文指定为this了,而this正是$.Callbacks构造的对象。
8. callbacks.fired 判断是否有主动触发过(调用fire或fireWith方法)
function
fn1() {
console.log(1)
}
var
callbacks = $.Callbacks();
callbacks.add(fn1);
callbacks.fired();
// false
callbacks.fire();
callbacks.fired();
// true
注意,只要调用过一次fire或fireWith就会返回true。
9. callbacks.lock 锁定队列的状态
10. callbacks.locked 判断是否锁定状态
$.Callbacks构造时可配置的参数Flags是可选的,字符串类型以空格分隔,有如下
- once
- memory
- unique
- stopOnFalse
1. once 确保回调函数仅执行一次
function
fn() {
console.log(1)
}
var
callbacks = $.Callbacks(
'once'
);
callbacks.add(fn);
callbacks.fire();
// 打印1
callbacks.fire();
// fn不再触发
2. memory 记忆callbacks
function
fn1() {
console.log(1)
}
function
fn2() {
console.log(2)
}
var
callbacks = $.Callbacks(
'memory'
);
callbacks.add(fn1);
callbacks.fire();
// 必须先fire
callbacks.add(fn2);
// 此时会立即触发fn2
memory有点绕,本意是记忆的意思。实际它的用法有点诡异,需结合特定场景来看(如jQuery.Deferred)。当首次调用fire后,之后每次add都会立即触发。比如先callbacks.fire(),再callbacks.add(fn1),这时fn1会立即被调用。
如果是批量添加的,也都会被触发
function
fn1() {
console.log(1)
}
function
fn2() {
console.log(2)
}
function
fn3() {
console.log(3)
}
var
callbacks = $.Callbacks(
'memory'
);
callbacks.add(fn1);
callbacks.fire();
callbacks.add([fn2, fn3]);
// output 2, 3
3. unique 去除重复的回调函数
function
fn1() {
console.log(1)
}
function
fn2() {
console.log(2)
}
var
callbacks = $.Callbacks(
'unique'
);
callbacks.add(fn1);
callbacks.add([fn1, fn2]);
// 再次添加fn1
callbacks.fire();
// output 1, 2
这个很好理解,之前用has判断去重,使用unique属性则更方便。本例先add一次fn1,第二次再add时内部则会去重。因此最后fire时只输出“1,2”而不是“1,1,2”。
4. stopOnFalse 回调函数返回false时中断回调队列的迭代
function
fn1() {
console.log(1)
}
function
fn2() {
console.log(2)
return
false
// 注意这里
}
function
fn3() {
console.log(3)
}
var
callbacks = $.Callbacks(
'stopOnFalse'
);
callbacks.add(fn1, fn2, fn3);
callbacks.fire();
// output 1,2
从该属性名就能知了它的意图,即回调函数通过return false来停止后续的回调执行。该示例添加了3个回调,fn2中使用return false,当fire执行到fn2时会停止执行,后续的fn3就不会被调用了。
用$.Callbacks实现观察者模式
// 观察者模式
var
observer = {
hash: {},
subscribe:
function
(id, callback) {
if
(
typeof
id !==
'string'
) {
return
}
if
(!
this
.hash[id]) {
this
.hash[id] = $.Callbacks()
this
.hash[id].add(callback)
}
else
{
this
.hash[id].add(callback)
}
},
publish:
function
(id) {
if
(!
this
.hash[id]) {
return
}
this
.hash[id].fire(id)
}
}
// 订阅
observer.subscribe(
'mailArrived'
,
function
() {
alert(
'来信了'
)
})
observer.subscribe(
'mailArrived'
,
function
() {
alert(
'又来信了'
)
})
observer.subscribe(
'mailSend'
,
function
() {
alert(
'发信成功'
)
})
// 发布
setTimeout(
function
() {
observer.publish(
'mailArrived'
)
}, 5000)
setTimeout(
function
() {
observer.publish(
'mailSend'
)
}, 10000)
注:阅读版本为1.8.3
- 读jQuery之十九(多用途回调函数列表对象)
- jquery之回调函数及jsonp
- jquery回调函数
- 浅析jQuery---回调函数
- JQuery ajax回调函数
- jquery中的回调函数
- 83 jquery 回调函数
- jquery Ajax回调函数
- Jquery 中的回调函数
- jquery 中的回调函数
- jquery 中回调函数
- 4.2.5: jQuery动画之动画回调函数
- 回调函数应用之比较两个对象大小
- List Control(列表)排序,无需回调函数
- jquery post()方法中的回调函数 不执行
- 回调函数之精神
- 回调函数之精神
- android 之 回调函数
- 黑马程序员-10-交通灯管理系统笔记
- 电饭锅地方
- 黑马程序员-11
- 黑马程序员-12
- <!-- 定义一个拦截器 --> <interceptors> <interceptor name="authority"
- 读jQuery之十九(多用途回调函数列表对象)
- python:open/文件操作
- C++类的交叉引用问题
- Qt中字符串转换十六进制
- iOS 7新漏洞:不用输密码就能关闭“找到我的iPhone”并移除iCloud账户
- /usr/lib目录权限更改引发的各种错误
- JS常用方法
- VHD
- openSIPS路由类型