目录
回调的使用有一点像事件绑定,先绑定好,等到有点击事件或者其他时就触发。
<script src="js/jquery-2.0.3.js"></script>
<script>
function aaa(){
alert(1);
}
function bbb(){
alert(2);
}
function ccc(){
alert(3);
}
var cb=$.Callbacks();
cb.add(aaa);
cb.add(bbb);
cb.add(ccc);
cb.fire();
//看起来有点像事件绑定,add负责添加,fire负责触发
</script>
工作原理相当于add方法负责收集事件list,fire负责统一触发,触发时以for循环来做到。
回调对象的好处是统一管理。
看一个未使用回调对象的例子:
<script src="js/jquery-2.0.3.js"></script>
<script>
function aaa(){
alert(1);
}
(function(){
function bbb(){
alert(2);
}
})();
aaa();//可调用
bbb();//报错,说not defined
</script>
那么为了能够调用匿名函数里的bbb函数,可以绑定到全局的回调对象上。
<script src="js/jquery-2.0.3.js"></script>
<script>
var cb=$.Callbacks();
function aaa(){
alert(1);
}
cb.add(aaa);
(function(){
function bbb(){
alert(2);
};
cb.add(bbb);
})();
cb.fire();//依次弹出1和2
</script>
2.callbacks的参数说明
1.4个选项
回调函数有once、memory、unique、stopOnFalse个选项。
once的作用是只能触发一次。
<script src="js/jquery-2.0.3.js"></script>
<script>
function aaa(){
alert(1);
}
function bbb(){
alert(2);
}
var cb=$.Callbacks('once');
cb.add(aaa);
cb.add(bbb);
cb.fire();//生效
cb.fire();//并不生效
</script>
memory的作用是记忆功能。
<script src="js/jquery-2.0.3.js"></script>
<script>
function aaa(){
alert(1);
}
function bbb(){
alert(2);
}
var cb=$.Callbacks('memory');
cb.add(aaa);
cb.fire();//两个函数都生效
cb.add(bbb);
</script>
unique的作用是对相同的函数去重。
<script src="js/jquery-2.0.3.js"></script>
<script>
function aaa(){
alert(1);
}
function bbb(){
alert(2);
}
var cb=$.Callbacks('unique');
cb.add(aaa);
cb.add(aaa);
cb.fire()//这样就只触发一次aaa
</script>
stopOnFalse的作用是当函数返回值为false时就不再执行后续函数。
<script src="js/jquery-2.0.3.js"></script>
<script>
function aaa(){
alert(1);
return false;
}
function bbb(){
alert(2);
}
var cb=$.Callbacks('stopOnFalse');
cb.add(aaa);
cb.add(bbb);
cb.fire()//遇到返回False,那么后续就不再执行
</script>
另:callbacks接收多个选项的组合,比如 var cb=$.Callbacks('once unique'); 。
2.options源码
有3个部分
var optionsCache = {};
这里定义了选项缓存的空对象。
function createOptions( options ) { var object = optionsCache[ options ] = {}; //定义了一个options作为属性的对象 jQuery.each( options.match( core_rnotwhite ) || [], function( _, flag ) { object[ flag ] = true; }); //options.match( core_rnotwhite )根据空格分割字符串,并返回结果数组 return object; }
那么传进来的选项options进行字符串分割, var cb=$.Callbacks('once unique'); 的option匹配的结果是 ['one','unique'] 。接下来在each循环里第一个选项时索引,第二个选项分别是one和unique。
所以把选项存进optionsCache并返回object。
<script>
var optionsCache={};
function cache (options){
var object = optionsCache[ options ] = {};
object[options]=true;
console.log(object);//{once:true}
}
cache('once');
</script>