摘要:概念解讀事件函數了解事件通常與函數配合使用,這樣可以通過發生的事件來驅動函數的執行。作用用于管理函數隊列。往內部隊列添加的函數保持唯一,不能重復添加。調用后開放容器,添加容器的處理函數將會立即執行。
概念解讀
事件函數了解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當設置once時 非首次執行函數時要能夠直接執行,fireWidth中進行處理
if(!options.once || !testing){ fire(args); }當設置memory時 監測參數,add時記錄何事處理memory 同時直接執行fire即可
if(memory){ starts = start; fire(memory); }
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/105463.html
摘要:上節我們講了同源策略,這節我們講講如何跨域。當這些從的腳本執行出錯,因為違背了同源策略為了保證用戶信息不被泄露,錯誤信息不會顯示出來,取而代之只會返回一個。 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門,但也僅僅是入門,現在前端開發的定義已經遠遠不止這些。前端小課堂(HTML/CSS/JS),本著提升技術水平,打牢基礎知識的中心思想,我們開課啦(每...
摘要:在我看來它們的關系不會比共用開頭更深了,所以我就重新開了一個頭,但其實是基于前面寫的資源中文文檔英文文檔官方視頻學習歷程當初為了學習,看了許多的材料,中途曾經放棄兩次,但是最后還是勇敢的拿起了它,現在終于勉強弄懂。 0x000 概述 這一章開始講redux,其實是承接前面的react,但其實作為一個框架來說,redux和react并沒有太多的關系,本身是獨立存在的。在我看來它們的關系不...
摘要:提高業務編程能力中提供了很多的方法基本都兼容,我們可以使用這些方法快速開發項目中有的方法提供的思想可以讓我們把項目實現得更優化提高基礎以及一些高級編程思想分析源碼,學習里面類庫封裝的思想和一些方法實現的原理有時間把中提供的常用方法都去實現一 jQuery 提高業務編程能力 JQ中提供了很多的方法(基本都兼容),我們可以使用這些方法快速開發項目 JQ中有的方法提供的思想可以讓我們把...
摘要:特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 本以為自己收藏的站點多,可以很快搞定,沒想到一入匯總深似海。還有很多不足&遺漏的地方,歡迎補充。有錯誤的地方,還請斧正... 托管: welcome to git,歡迎交流,感謝star 有好友反應和斧正,會及時更新,平時業務工作時也會不定期更...
閱讀 3758·2023-04-25 20:00
閱讀 3109·2021-09-22 15:09
閱讀 505·2021-08-25 09:40
閱讀 3412·2021-07-26 23:38
閱讀 2201·2019-08-30 15:53
閱讀 1097·2019-08-30 13:46
閱讀 2788·2019-08-29 16:44
閱讀 2043·2019-08-29 15:32