<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
1.add的参数兼容，比如cb.add(fn1).add(fn2)等同于add(fn1,fn2)等同于add([fn1,fn2])。
2.$.Callbacks("memory")，第一次fire，执行之前的函数队列。fire之后add的时候，就执行加入的函数。
3.$.Callbacks("unique")，add的时候判断当前函数，是否已存于执行队列中。
4.$.Callbacks("once")，第一次fire的时候，打个标记表明once了。第二次fire的时候，有once，就不执行队列。
5.$.Callbacks("stopOnFalse")，判断执行队列中函数的执行结果，为false，则中断函数队列的遍历执行。
6.$.Callbacks("memory once")，字符串对象化，使得字符串顺序变换也没关系。之后各回各家，该干嘛干嘛去。
7.$.Callbacks是一个对象工厂。
8.$.Callbacks的lock和disable的区别。lock只是不再add，但还能fire。disable不仅不能add，连fire也不行。
9.$.Callbacks的remove方法，就是从队列去除指定函数。
10.fire的时候可以指定上下文
</body>
<script type="text/javascript">
function showType(type, obj) {
var clas = Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
return obj !== undefined && obj !== null && clas === type;
}
var $={};
// 依赖 类型判断showType，遍历处理
$.Callbacks = function(strArg){
var list = [];
var fired_flag=false;
var lock_flag=false ,disable_flag = false;
var str_list = strArg.split(" ");
var fire_args = [];
var cbArg_obj = {
"once":false,
"unique":false,
"memory":false,
"stopOnFalse":false
};
for(var i=0,l=str_list.length; i<l; i++){
cbArg_obj[str_list[i]] = true;
}
var once_flag = cbArg_obj["once"],
unique_flag= cbArg_obj["unique"],
memory_flag= cbArg_obj["memory"],
stopOnFalse_flag= cbArg_obj["stopOnFalse"];
var self = {
"add":function(){
if(lock_flag || disable_flag){
return;
}
// 参数兼容
var arg = arguments;
(function add(arg){
for(var i=0,l = arg.length; i< l; i++){
var argItem = arg[i];
if(list.indexOf(argItem)>-1 && unique_flag){
return;
}
if(showType("function",argItem) ){
list.push(argItem);
if(memory_flag && fired_flag){
argItem.apply(null,fire_args);
}
}
else if(showType("array",argItem)){
add(argItem);
}
}
})(arg);
// 为了链性调用
return this;
},
"fire":function(){
if( (once_flag && fired_flag) || disable_flag){
return;
}
if(arguments.length){
fire_args = arguments || [];
}
for(var i =0,l= list.length; i< l; i++){
if( (list[i].apply(this,fire_args) == false) && stopOnFalse_flag){
break;
}
}
fired_flag = true;
},
"remove":function(fn){
for(var i=0,l= list.length; i<l; i++){
if(list[i] == fn){
list.splice(i,1);
}
}
},
"lock":function(){
lock_flag = true;
},
"disable":function(){
disable_flag = true;
}
};
return self;
};
function fn1(){
alert(1);
}
function fn2(){
alert(2);
}
function fn3(){
alert(3);
}
function fn4(){
alert(4);
}
function fnThis(arg){
alert(arg);
}
function fnFalse(){
return false;
}
var cb = $.Callbacks("once memory");
cb.add(fn1).add(fn2).add(fn4);
cb.fire("hi");
cb.add(fnThis);
cb.fire("aaa");
</script>
</html>
源代码阅读这件事：
第一步，查看API。先明白这些API怎么用，因为API就是这些代码的需求。
第二步，思考为什么这么写。一个需求实现，可以有多种实现方式。但是作者偏偏用这种，是为了代码性能优化、解耦，抑或偷懒？
第三步，自己重新实现。有时候，第二步你怎么想，也想不出作者这样写的原因。自己动手重新实现，实现过程中，才更能理解作者的用心。
时间： 2024-07-29 12:45:22