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、無參數的默認處理
一、參數是string形式 使用typeof進行判斷便可，非此類參數則須要進行處理。

typeof options === "string"

二、參數是多個的時候，須要對參數進行切割，並依次傳入。

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