js基础 jQuery的Callback入门及原理分析
概念解读
事件函数了解Callbacks 事件通常与函数配合使用,这样可以通过发生的事件来驱动函数的执行。 原则:一个事件对应一个事件函数,在一个事件对应多个事件函数的情况下,后者会覆盖前者。通过添加数组的方法,实现一对多。 callbacks则是把这些处理成一个可控制的容器。
作用:用于管理函数队列。
使用:通过add添加处理函数到队列中,通过fire去执行这些处理函数(按照函数的添加顺序依次执行处理函数)。
参数:字符串参数的形式 支持4中特定的功能。
once 函数队列只执行一次 默认 fire调用后关闭容器,add添加容器的处理函数将不会执行。 unique 往内部队列添加的函数保持唯一,不能重复添加。 stopOnFalse 内部队列的函数是一次执行的 当某个函数的返回值是false时 ,停止继续执行剩下的函数。 memory 当函数队列fire一次过后,内部会记录当前fire的参数,下次调用的时候,会把记录的参数传递给新添加的函数并立即执行这个新添加的函数。fire调用后开放容器,add添加容器的处理函数将会立即执行。
插件基本框架
(function(root){
var_ = {
callbacks:function(){}
};
root._ =_;
})(this)
使用_.callbacks();
callbacks方法内是可接收参数的,所以这里需要对参数进行处理:
0、无参数的默认处理
1、参数是string形式 使用typeof进行判断即可,非此类参数则需要进行处理。
typeof options === "string"
2、参数是多个的时候,需要对参数进行切割,并依次传入。
createOptions(options) {//定义一个处理多个参数的方法 var object = optionsCache[options] = {};//再缓存内进行记录一次 对象形式 options.split(/\s+/).forEach(function(value) {//value 切割参数数组的每一项 object[value] = true;//扩展对应的value属性 }); return object;//返回出去 支持多种参数 }
add fire方法的添加
这里我们直接定义一个对象,执行时返回当前对象。讲add和fire方法添加到对象即可 var self = {
add:function(){
},
fireWidth:function(context,arguments){//控制上下文的绑定 },
fire:function(){//用于传参 self.fireWidth(this,arguments);
}
} return self;
接下来处理add 和 fire
add方法需要将传入的参数成员进行切割、遍历及成员是函数的添加到执行队列。
var args =Array.prototype.slice.call(arguments);//数组化参数 存入变量 args.forEach(function(fn){//遍历参数 if(toString.call(fn)==="[object Function]"){//是function的添加到执行队列 list.push(fn);
}
})
fire则是接收参数,触发fireWidth接受参数 执行处理函数,fireWidth的处理函数即真正在执行fire操作的函数提取到外部。
var fire = function(data){//控制队列执行的函数 }
同时呢 我们需要以下几个变量进行存储及判断使用
list=[];//定义队列 index//index 执行参数的下标 length//参数长度存放到外边 减少for循环内的计算 testing//添加标识,是否是第一次执行 memory //memery时存储已执行的处理函数 start //存储已执行的下标值 starts// memory时的已执行下标值
控制队列执行函数根据memory、传来的下标等、设置stopOnfalse、 对执行函数队列进行判断及执行
memory=options.memory&&data ;
index=starts||0;
start = 0;
testing=true;
length=list.length; for(;index<length;index++){ if(list[index].apply(data[0],data[1]) === false&&options.stopOnfalse){ break;
}
}
当设置once时 非首次执行函数时要能够直接执行,fireWidth中进行处理
if(!options.once || !testing){ fire(args);
}
当设置memory时 监测参数,add时记录何事处理memory 同时直接执行fire即可
if(memory){ starts = start; fire(memory); }