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);  }