摘要:源碼學習之的通過回調實現異步,其實現核心是。回調函數隊列中的函數返回時停止觸發回調函數隊列只能被觸發一次記錄上一次觸發隊列傳入的值,新添加到隊列中的函數使用記錄值作為參數,并立即執行。實際是,內部則調用了在定義的局部函數。
jQuery源碼學習之Callbacks
jQuery的ajax、deferred通過回調實現異步,其實現核心是Callbacks。
使用方法使用首先要先新建一個實例對象。創建時可以傳入參數flags,表示對回調對象的限制,可選值如下表示。
stopOnFalse:回調函數隊列中的函數返回false時停止觸發
once:回調函數隊列只能被觸發一次
memory:記錄上一次觸發隊列傳入的值,新添加到隊列中的函數使用記錄值作為參數,并立即執行。
unique:函數隊列中函數都是唯一的
var cb = $.Callbacks("memory"); cb.add(function(val){ console.log("1: " + val) }) cb.fire("callback") cb.add(function(val){ console.log("2: " + val) }) // console輸出 1: callback 2: callback
Callbacks 提供了一系列實例方法來操作隊列和查看回調對象的狀態。
add: 添加函數到回調隊列中,可以是函數或者函數數組
remove: 從回調隊列中刪除指定函數
has: 判斷回調隊列里是否存在某個函數
empty: 清空回調隊列
disable: 禁止添加函數和觸發隊列,清空回調隊列和上一個傳入的值
disabled: 判斷回調對象是否被禁用
lock: 禁用fire,若memory非空則同時add無效
locked: 判斷是否調用了lock
fireWith: 傳入context和參數,觸發隊列
fire: 傳入參數觸發對象,context是回調對象
源碼解析$.Callback()方法內部定義了多個局部變量和方法,用于記錄回調對象的狀態和函數隊列等,返回self,在self實現了上述回調對象的方法,用戶只能通過self提供的方法來更改回調對象。這樣的好處是保證除了self之外,沒有其他修改回調對象的狀態和隊列的途徑。
其中,firingIndex為當前觸發函數在隊列中的索引,list是回調函數隊列,memory記錄上次觸發的參數,當回調對象實例化時傳入memory時會用到,queue保存各個callback執行時的context和傳入的參數。self.fire(args)實際是self.fireWith(this,args),self.fireWith內部則調用了在Callbacks定義的局部函數fire。
... // 以下變量和函數 外部無法修改,只能通過self暴露的方法去修改和訪問 var // Flag to know if list is currently firing firing, // Last fire value for non-forgettable lists // 保存上一次觸發callback的參數,調用add之后并用該參數觸發 memory, // Flag to know if list was already fired fired, // Flag to prevent firing // locked==true fire無效 若memory非空則同時add無效 locked, // Actual callback list // callback函數數組 list = [], // Queue of execution data for repeatable lists // 保存各個callback執行時的context和傳入的參數 queue = [], // Index of currently firing callback (modified by add/remove as needed) // 當前正觸發callback的索引 firingIndex = -1, // Fire callbacks fire = function() { ... }, // Actual Callbacks object self = { // Add a callback or a collection of callbacks to the list add: function() { ... }, ... // Call all callbacks with the given context and arguments fireWith: function( context, args ) { if ( !locked ) { args = args || []; args = [ context, args.slice ? args.slice() : args ]; // :前為args是數組,:后是string queue.push( args ); if ( !firing ) { fire(); } } return this; }, // Call all the callbacks with the given arguments fire: function() { self.fireWith( this, arguments ); return this; }, ... }
通過self.add添加函數到回調隊列中,代碼如下。先判斷是否memory且非正在觸發,如果是則將fireIndex移動至回調隊列的末尾,并保存memory。接著使用立即執行函數表達式實現add函數,在該函數內遍歷傳入的參數,進行類型判斷后決定是否添加到隊列中,如果回調對象有unique標志,則還要判斷該函數在隊列中是否已存在。如果回調對象有memory標志,添加完畢之后還會觸發fire,執行新添加的函數。
add: function() { if ( list ) { // If we have memory from a past run, we should fire after adding // 如果memory非空且非正在觸發,在queue中保存memory的值,說明add后要執行fire // 將firingIndex移至list末尾 下一次fire從新add進來的函數開始 if ( memory && !firing ) { firingIndex = list.length - 1; queue.push( memory ); } ( function add( args ) { jQuery.each( args, function( _, arg ) { // 傳參方式為add(fn)或add(fn1,fn2) if ( jQuery.isFunction( arg ) ) { /** * options.unique==false * 或 * options.unique==true&&self中沒有arg */ if ( !options.unique || !self.has( arg ) ) { list.push( arg ); } } else if ( arg && arg.length && jQuery.type( arg ) !== "string" ) { // 傳參方式為add([fn...]) 遞歸 // Inspect recursively add( arg ); } } ); } )( arguments ); //arguments為參數數組 所以add的第一步是each遍歷 //添加到list后若memory真則fire,此時firingIndex為回調隊列的最后一個函數 if ( memory && !firing ) { fire(); } } return this; }
fire、fireWith方法內部實際調用了局部函數fire,其代碼如下。觸發時,需要更新fired和firing,表示已觸發和正在觸發。通過for循環執行隊里中的函數。結束循環后,將firingIndex更新為-1,表示下次觸發從隊列中的第一個函數開始。遍歷在fireWith中更新過的queue,queue是保存數組的數組,每個數組的第一個元素是context,第二個元素是參數數組。執行函數時要是否返回false且回調對象有stopOnFalse標志,如果是則停止觸發。
// Fire callbacks fire = function() { // Enforce single-firing // 執行單次觸發 locked = locked || options.once; // Execute callbacks for all pending executions, // respecting firingIndex overrides and runtime changes // 標記已觸發和正在觸發 fired = firing = true; // 循環調用list中的回調函數 // 循環結束之后 firingIndex賦-1 下一次fire從list的第一個開始 除非firingIndex被修改過 // 若設置了memory,add的時候會修改firingIndex并調用fire // queue在fireWith函數內被更新,保存了觸發函數的context和參數 for ( ; queue.length; firingIndex = -1 ) { memory = queue.shift(); while ( ++firingIndex < list.length ) { // Run callback and check for early termination // memory[0]是content memory[1]是參數 if ( list[ firingIndex ].apply( memory[ 0 ], memory[ 1 ] ) === false && options.stopOnFalse ) { // Jump to end and forget the data so .add doesn"t re-fire // 當前執行函數范圍false且options.stopOnFalse==true 直接跳至list尾 終止循環 firingIndex = list.length; memory = false; } } } // 沒設置memory時不保留參數 // 設置了memory時 參數仍保留在其中 // Forget the data if we"re done with it if ( !options.memory ) { memory = false; } firing = false; // Clean up if we"re done firing for good if ( locked ) { // Keep an empty list if we have data for future add calls if ( memory ) { list = []; // Otherwise, this object is spent } else { list = ""; } } },
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/96004.html
摘要:源碼學習之用于合并對象,可選擇是否深復制。盡管官方文檔明確指出第一個參數是的調用情況并不支持,但是這個版本的源碼中,判斷第一個參數的類型雖有限定是類型,但卻未對其值真假加以限定。調用方式源碼和指向同一個函數,在函數內部,對調用情況進行區分。 jQuery源碼學習之extend $.extend用于合并對象,可選擇是否深復制。使用時,第一個參數為合并后的對象。如果要進行深拷貝,則參數1為...
摘要:回調隊列中的元素是對象,代表一個事件回調,擁有多個屬性,如等等,其中是回調函數,在觸發時通過傳遞,具體的在后面講。類型是時鍵表示事件名,規則同上,鍵值表示事件觸發時的回調函數。 jQuery源碼學習之event jQuery的事件機制為異步回調,事件監聽的屬性、參數和回調的等保存在Data實例中,在元素上保存該對象的引用。有方法handle,內部執行dispatch;有屬性events...
摘要:是與服務器交換數據并更新部分網頁的藝術,在不重新加載整個頁面的情況下。對象是的核心,所有現代瀏覽器均支持對象和使用。用于在后臺與服務器交換數據。及時有效地幫助學員解決疑難問題,提高學員的學習積極性。 Asynchronous JavaScript and XML(異步的 JavaScript 和 XML)。 AJAX...
摘要:抽象模式使用的裝飾者模式允許我們在運行時或者在隨后一個點上動態地將兩個或兩個以上的對象和它們的屬性一起擴展或合并為一個單一對象。定義三個對象目的是為了裝飾對象將的額外功能附加到上。 抽象decorator模式 使用jQuery的裝飾者模式 jQuery.extend()允許我們在運行時或者在隨后一個點上動態地將兩個或兩個以上的對象(和它們的屬性)一起擴展(或合并)為一個單一對象。 定義...
摘要:的支持的方法有幾個主要的,和,比如官方有一個例子這兩個作為函數調用的生成從基本可以看出,函數生成了一個對象,這個對象的方法是添加回調函數,而方法則是執行回調函數。 歡迎來我的專欄查看系列文章。 講真,Sizzle 的源碼真的太壓抑了,以至于寫 Sizzle 文章的這段時間里都非常的痛苦,剛開始覺得它還挺有意思的,越到后面越覺得代碼很難讀懂,煩。 寒假也過完了,在家里待了兩周的時間,感覺...
閱讀 1554·2021-11-19 09:55
閱讀 2778·2021-09-06 15:02
閱讀 3534·2019-08-30 15:53
閱讀 1071·2019-08-29 16:36
閱讀 1230·2019-08-29 16:29
閱讀 2286·2019-08-29 15:21
閱讀 621·2019-08-29 13:45
閱讀 2679·2019-08-26 17:15