JQuery.Callbacks系列一：api使用详解

JQuery.Callbacks是jQuery1.7+之后引入的，用来进行函数队列的add、remove、fire、lock等操作，并提供once、memory、unique、stopOnFalse四个option进行一些特殊的控制。既然是新加入的功能，那么就有其特定的使用场景和优势。本文主要是介绍下Callbacks相关API的使用，关于Callbacks的使用场景以及源码等将会在后续博客中进行说明。我使用的JQuery版本是1.11.1

1、创建Callbacks对象

如果要使用Callbacks的相关API，必须要先创建Callbacks对象。创建Callbacks对象的时候，可以指定参数，也可以不指定参数。不同参数值的Callbacks具有不同的功能，后面再介绍，这里只需要知道如何创建Callbacks对象即可。

// 默认方式创建callback
var callbacks = $.Callbacks();

// 4种形式的callback:once、unique、stopOnFalse、memory
var onceCallbacks = $.Callbacks('once');
var uniqueCallbacks = $.Callbacks('unique');
var stopOnFalseCallbacks = $.Callbacks('stopOnFalse');
var memoryCallbacks = $.Callbacks('memory');

var callbacks1 = $.Callbacks();
var callbacks2 = $.Callbacks();
alert(callbacks1 == callbacks2);//false

2、添加和删除回调函数

Callbacks对象其实就是一个函数队列，获得Callbacks对象之后 ，就可以向这个集合中增加或者删除函数。add和remove功能相反，函数参数是相同的，empty()删除回调列表中的所有函数。

function fn1( value ) {
  console.log("fn1:" + value );
}
 
function fn2( value ) {
  console.log( "fn2:" + value );
}

 var callbacks = $.Callbacks();

 // 方式1:添加1个单独函数
  callbacks.add( fn1 );
  callbacks.add( fn2 );

// 方式2:添加多个函数
  callbacks.add(fn1,fn2);

// 方式3:添加函数数组
  callbacks.add([fn1,fn2]);

// 方式4 函数和数组混合
  callbacks.add(fn1, [fn2]);

var callbacks = $.Callbacks();
callbacks.add(fn1);
callbacks.add(fn1);

// 调用callbacks中的函数
callbacks.fire("hi!");

var callbacks = $.Callbacks();
callbacks.add(functio(){console.log("fn1:" + value );});

// not work
callbacks.remove(functio(){console.log("fn1:" + value );});

callbacks.add( fn1 );
callbacks.add( fn1 );
callbacks.add( fn2);

callbacks.fire( "foo!" );
callbacks.remove(fn1,fn2);
callbacks.fire( "foo!" );//fn1和fn2都不会再触发

var callbacks = $.Callbacks();
callbacks.remove(fn1,fn2);

3、触发回调函数

通过fire或firefireWith可以调用回调列表的函数。fire()函数中的参数列表可以传递多个实参，但是不能是参数数组。

function fn(a,b) {
	console.log("a="+a);
	console.log("b="+b);
}

var callbacks = $.Callbacks();
callbacks.add(fn);
callbacks.fire(1,2);//a=1,b=2
callbacks.fire([3,4]);a=[3,4],b=undefined

function fn(a,b) {
	console.log("a="+a);
	console.log("b="+b);
}

var callbacks = $.Callbacks();
callbacks.add(fn);

// Function.prototype.apply: Arguments list has wrong type 

callbacks.fireWith(null,[1,2]);//a=1,b=2
callbacks.fireWith(null,1,2);

function fn(a) {
    console.log(this); 
    console.log("a="+a); 
}

var callbacks = $.Callbacks();
callbacks.add(fn);

callbacks.fire(1);//a=1,this就是callbacks对象

var me = {"name":"aty","age":26};
callbacks.fireWith(me,[2]);//a=2,this是me

4、Callbacks对象的状态判断

判断Calllbacks对象的状态相关API有has()、disabled()、locked()、fired()。

disabled()和locked()判断Callbacks对象是否处于disabled状态或是locked状态。可以通过disable()、locke()改变Callbacks对象的状态。这个地方有点奇怪，一旦将Callbacks禁用或者锁定，那么就无法再恢复。

var callbacks1 = $.Callbacks();
callbacks1.lock();
console.log(callbacks1.locked());

var callbacks2 = $.Callbacks();
callbacks2.disable();
console.log(callbacks2.disabled());

has()的参数是一个函数，用来判断该函数是否已经存在于回调列表中，不想重复添加时很有用。

var callbacks = $.Callbacks();
callbacks.has(fn1);//false
callbacks.add(fn1);
callbacks.has(fn1);//true

5、创建Callbcks对象时的4种类型

前面我们创建Callbacks对象的时候，没有指定任何参。在jquery1.11.1版本中有once、unique、stopOnFalse、memory这4种参数值可以指定，或者是他们的组合。

var onceCallbacks = $.Callbacks('once');
//2种标志的组合
var stopOnFalseCallbacks = $.Callbacks('once stopOnFalse');

//使用once
var onceCallbacks = $.Callbacks('once');
onceCallbacks.add(fn1);
onceCallbacks.fire(1); // 打印1
onceCallbacks.fire(1); // fn不再触发

//使用unique,可以使用has判断去重，使用unique属性则更方便
var uniqueCallbacks = $.Callbacks('unique');
uniqueCallbacks.add(fn1);
uniqueCallbacks.add([fn1, fn2]); // 再次添加fn1
uniqueCallbacks.fire(2); 

// 使用stopOnFalse
function f1() {
    console.log("f1");
}
function f2() {
    console.log("f2");
    return false // 注意这里
}
function f3() {
    console.log("f3");
}
var stopOnFalseCallbacks = $.Callbacks('stopOnFalse');
stopOnFalseCallbacks.add(f1, f2, f3);
stopOnFalseCallbacks.fire();//不会触发f3

function fn1( value ) {
  console.log( "fn1 says:" + value );
}
 
function fn2( value ) {
  console.log( "fn2 says:" + value );
}

//使用memory
var memoryCallbacks = $.Callbacks('memory');
memoryCallbacks.add(fn1);

//第一次fire会缓存传入的参数
memoryCallbacks.fire('foo');

//fire过一次之后，以后的add都会自动调用fire，传入的参数是上次fire传入的'foo'
memoryCallbacks.add(fn2);

//此次fire的参数新传入的'bar'
//fn1 says bar
//fn2 says bar
memoryCallbacks.fire('bar');

6、lock()和disable()

这2个API使用很简单，就是将Callbacks对象置成disabled或者locked状态。这2个API源码如下：

// Have the list do nothing anymore
disable: function() {
	list = stack = memory = undefined;
	return this;
},

// Lock the list in its current state
lock: function() {
	stack = undefined;
	if ( !memory ) {
		self.disable();
	}
	return this;
},

JQuery.Callbacks系列一：api使用详解

原文：http://blog.csdn.net/aitangyong/article/details/44657119