摘要:概念解讀事件函數(shù)了解事件通常與函數(shù)配合使用,這樣可以通過發(fā)生的事件來驅(qū)動(dòng)函數(shù)的執(zhí)行。作用用于管理函數(shù)隊(duì)列。往內(nèi)部隊(duì)列添加的函數(shù)保持唯一,不能重復(fù)添加。調(diào)用后開放容器,添加容器的處理函數(shù)將會(huì)立即執(zhí)行。
概念解讀
事件函數(shù)了解Callbacks 事件通常與函數(shù)配合使用,這樣可以通過發(fā)生的事件來驅(qū)動(dòng)函數(shù)的執(zhí)行。 原則:一個(gè)事件對(duì)應(yīng)一個(gè)事件函數(shù),在一個(gè)事件對(duì)應(yīng)多個(gè)事件函數(shù)的情況下,后者會(huì)覆蓋前者。通過添加數(shù)組的方法,實(shí)現(xiàn)一對(duì)多。 callbacks則是把這些處理成一個(gè)可控制的容器。
作用:用于管理函數(shù)隊(duì)列。
使用:通過add添加處理函數(shù)到隊(duì)列中,通過fire去執(zhí)行這些處理函數(shù)(按照函數(shù)的添加順序依次執(zhí)行處理函數(shù))。
參數(shù):字符串參數(shù)的形式 支持4中特定的功能。
once 函數(shù)隊(duì)列只執(zhí)行一次 默認(rèn) fire調(diào)用后關(guān)閉容器,add添加容器的處理函數(shù)將不會(huì)執(zhí)行。 unique 往內(nèi)部隊(duì)列添加的函數(shù)保持唯一,不能重復(fù)添加。 stopOnFalse 內(nèi)部隊(duì)列的函數(shù)是一次執(zhí)行的 當(dāng)某個(gè)函數(shù)的返回值是false時(shí) ,停止繼續(xù)執(zhí)行剩下的函數(shù)。 memory 當(dāng)函數(shù)隊(duì)列fire一次過后,內(nèi)部會(huì)記錄當(dāng)前fire的參數(shù),下次調(diào)用的時(shí)候,會(huì)把記錄的參數(shù)傳遞給新添加的函數(shù)并立即執(zhí)行這個(gè)新添加的函數(shù)。fire調(diào)用后開放容器,add添加容器的處理函數(shù)將會(huì)立即執(zhí)行。
插件基本框架
(function(root){ var_ = { callbacks:function(){} }; root._ =_; })(this)
使用_.callbacks();
callbacks方法內(nèi)是可接收參數(shù)的,所以這里需要對(duì)參數(shù)進(jìn)行處理:
0、無參數(shù)的默認(rèn)處理
1、參數(shù)是string形式 使用typeof進(jìn)行判斷即可,非此類參數(shù)則需要進(jìn)行處理。
typeof options === "string"
2、參數(shù)是多個(gè)的時(shí)候,需要對(duì)參數(shù)進(jìn)行切割,并依次傳入。
createOptions(options) {//定義一個(gè)處理多個(gè)參數(shù)的方法 var object = optionsCache[options] = {};//再緩存內(nèi)進(jìn)行記錄一次 對(duì)象形式 options.split(/s+/).forEach(function(value) {//value 切割參數(shù)數(shù)組的每一項(xiàng) object[value] = true;//擴(kuò)展對(duì)應(yīng)的value屬性 }); return object;//返回出去 支持多種參數(shù) }
add fire方法的添加
這里我們直接定義一個(gè)對(duì)象,執(zhí)行時(shí)返回當(dāng)前對(duì)象。講add和fire方法添加到對(duì)象即可 var self = { add:function(){ }, fireWidth:function(context,arguments){//控制上下文的綁定 }, fire:function(){//用于傳參 self.fireWidth(this,arguments); } } return self;
接下來處理add 和 fire
add方法需要將傳入的參數(shù)成員進(jìn)行切割、遍歷及成員是函數(shù)的添加到執(zhí)行隊(duì)列。
var args =Array.prototype.slice.call(arguments);//數(shù)組化參數(shù) 存入變量 args.forEach(function(fn){//遍歷參數(shù) if(toString.call(fn)==="[object Function]"){//是function的添加到執(zhí)行隊(duì)列 list.push(fn); } })
fire則是接收參數(shù),觸發(fā)fireWidth接受參數(shù) 執(zhí)行處理函數(shù),fireWidth的處理函數(shù)即真正在執(zhí)行fire操作的函數(shù)提取到外部。
var fire = function(data){//控制隊(duì)列執(zhí)行的函數(shù) }
同時(shí)呢 我們需要以下幾個(gè)變量進(jìn)行存儲(chǔ)及判斷使用
list=[];//定義隊(duì)列 index//index 執(zhí)行參數(shù)的下標(biāo) length//參數(shù)長度存放到外邊 減少for循環(huán)內(nèi)的計(jì)算 testing//添加標(biāo)識(shí),是否是第一次執(zhí)行 memory //memery時(shí)存儲(chǔ)已執(zhí)行的處理函數(shù) start //存儲(chǔ)已執(zhí)行的下標(biāo)值 starts// memory時(shí)的已執(zhí)行下標(biāo)值
控制隊(duì)列執(zhí)行函數(shù)根據(jù)memory、傳來的下標(biāo)等、設(shè)置stopOnfalse、 對(duì)執(zhí)行函數(shù)隊(duì)列進(jìn)行判斷及執(zhí)行
memory=options.memory&&data ; index=starts||0; start = 0; testing=true; length=list.length; for(;index當(dāng)設(shè)置once時(shí) 非首次執(zhí)行函數(shù)時(shí)要能夠直接執(zhí)行,fireWidth中進(jìn)行處理
if(!options.once || !testing){ fire(args); }當(dāng)設(shè)置memory時(shí) 監(jiān)測參數(shù),add時(shí)記錄何事處理memory 同時(shí)直接執(zhí)行fire即可
if(memory){ starts = start; fire(memory); }
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://www.ezyhdfw.cn/yun/105463.html