jQuery 原始碼學習（三）回撥函式

Meils發表於2018-06-10

回撥函式

一、概念

回撥函式是一個通過函式指標來呼叫執行的函式，如果你把一個函式的指標作為引數傳遞出去，那麼這個指標呼叫這個函式的時候，我們就說這是回撥函式。回撥函式不是由該函式的實現方直接呼叫，而是在特定的事件或條件發生時由另外的一方呼叫的，用於對該事件或條件進行響應。

好處： 使用回撥函式進行處理，程式碼就可以繼續進行其他任務，而無需空等。實際開發中，經常在javascript中使用非同步呼叫。

非同步回撥

$(document).ready(callback);
$(document).on(‘click’,callback)

$.ajax({
  url: "aaron.html",
  context: document
}).done(function() { 
        //成功執行
}).fail(function() {
        //失敗執行
);


$(`#clickme`).click(function() {
    $(`#book`).animate({
        opacity: 0.25,
        left: `+=50`,
        height: `toggle`
    }, 5000, function() {
        // Animation complete.
    });
});

同步

var test1 = function(callback) {
    //執行長時間操作
    callback();
}
test1(function() {
    //執行回撥中的方法
});
一個同步(阻塞)中使用回撥的例子，目的是在test1程式碼執行完成後執行回撥callback

所以理解回撥函式最重要的2點：

1、一個回撥函式作為引數傳遞給另一個函式是，我們僅僅傳遞了函式定義。我們並沒有在引數中執行函式。我們並不傳遞像我們平時執行函式一樣帶有一對執行小括號()的函式

2、回撥函式並不會馬上被執行，它會在包含它的函式內的某個特定時間點被“回撥”。

二、觀察者模式

在理解jquery的回撥物件之前我們先來學習一下觀察者模式(SB模式)：

觀察者模式：一個物件作為一個特定任務的觀察者，當這個任務出發或者執行完畢之後通知觀察者(Subscriber)。觀察者也可以叫做訂閱者，它指向被觀察者(Publisher)，當事件發生時， 被觀察者會通知觀察者。

對於$.Callbacks 建立的Callback物件，它的add和fire方法就是，其實就是基於釋出訂閱（Publish/Subscribe）的觀察者模式的設計。

// 模擬一下這種模式
function aa() {
    console.log(`aa`);
}
function bb() {
    console.log(`bb`);
}
var m_db = {
    Callbacks: [],
    add: function(fn) {
        this.Callbacks.push(fn);
    },
    fire: function() {
        this.Callbacks.forEach(function(fn){
            fn();
        })
    }
}
m_db.add(aa);
m_db.add(bb);
m_db.fire();

設計原理

開始構建一個存放回撥的陣列，如this.callbacks= [] 新增回撥時，將回撥push進this.callbacks，執行則遍歷this.callbacks執行回撥，也彈出1跟2了。當然這只是簡潔的設計，便於理解，整體來說設計的思路程式碼都是挺簡單的，那麼我們從簡單的設計深度挖掘下這種模式的優勢。

模式的實際使用

// 首先看一個場景
$.ajax({
    url: ``,
    ..
}).done(function(data) {
    // 第一步處理資料
    
    // 第二步處理DOM
    $(`aaron1`).html(data.a)
    $(`aaron2`).html(data.b)
    $(`aaron3`).html(data.c)   
    
    // 其餘處理
    
})

首先，所有的邏輯都寫在done方法裡面，這樣確實是無可厚非的，但是問題就是邏輯太複雜了。Done裡面有資料處理、html渲染、還可能有其它不同場景的業務邏輯。這樣如果是換做不同的人去維護程式碼，增加功能就會顯得很混亂而且沒有擴充套件性。

$.ajax({
    url: ``,
    ..
}).done(function(data) {
    // 第一步處理資料
    processData(data);
    // 第二步處理DOM
    processDom(data);
    
    // 其餘處理
    processOther(data);
})

這樣看著時好一些了，通過同步執行來一次實現三個方面的處理，每一方面的處理都提取出來，但是這樣的寫法幾乎就是“就事論事”的處理，達不到抽象複用。

var m_cb = {
    callbacks: [],
    add: function(fn){
        this.callbacks.push(fn);
    },
    fire: function(data){
        this.callbacks.forEach(function(fn){
            fn(data);
        })
    }
}
m_cb.add(function(data){
    // 資料處理
})
m_cb.add(function(data){
    // DOM處理
    
})

m_cd.add(function(data){
    // 其餘處理
})
$.ajax({
    url: ``,
    ...
}).done(function(data){
    m_cd.fire(data);
})

這樣使用了觀察者模式之後是不是感覺好多了呢，設計該模式背後的主要動力是促進形成鬆散耦合。在這種模式中，並不是一個物件呼叫另一個物件的方法，而是一個物件訂閱另一個物件的特定活動並在狀態改變後獲得通知。訂閱者也稱為觀察者，而被觀察的物件稱為釋出者或主題。當發生了一個重要的事件時，釋出者將會通知（呼叫）所有訂閱者並且可能經常以事件物件的形式傳遞訊息。

總之、觀察者模式就是將函式/業務處理管理起來，當一定的事件觸發或者時某一任務執行完畢後，一次性執行。

三、$.Callbacks()

對於$.Callbacks 建立的Callback物件，它的add和fire方法就是，其實就是基於釋出訂閱（Publish/Subscribe）的觀察者模式的設計。

$.Callbacks一般的開發者使用的較少，它的開發實現主要時為$.ajax以及$.deferred。

jQuery.Callbacks是jquery在1.7版本之後加入的，是從1.6版中的_Deferred物件中抽離的，主要用來進行函式佇列的add、remove、fire、lock等操作，並提供once、memory、unique、stopOnFalse四個option進行一些特殊的控制。

這個函式常使用的就是在事件觸發機制中，也就是觀察者設計模式的訂閱和釋出模式中，$.Callbacks主要出現在ajax、deferred、queue中。

下面來仔細分析一下該方法的使用吧

1、先來跑一下流程

function aa() {
    console.log(`aa`);
}
function bb() {
    console.log(`bb`);
}

var cb = $.Callbacks();
cb.add(aa);
cb.add(bb);
cb.fire(); 
// aa
// bb

function fn1(value) {
    console.log(value);
}

function fn2(value) {
    fn1("fn2 says: " + value);
    return false;
}

var cb1 = $.Callbacks();
cb1.add(fn1); // 新增一個進入佇列
cb1.fire(`foo`); // 執行一下
// foo
cb1.add(fn2); // 再添一個
cb1.fire(`bar`); // 一次性執行
// bar
// fn2 says: bar
cb1.remove(fn2); // 移除一個
cb1.fire(`111`); // 執行剩下的那一個
// 111

$.Callbacks（）就是一個工廠函式。

jQuery.Callbacks() 的 API 列表如下：

callbacks.add()        ：回撥列表中新增一個回撥或回撥的集合。
callbacks.disable()    ：禁用回撥列表中的回撥。
callbacks.disabled()   ：確定回撥列表是否已被禁用。 
callbacks.empty()      ：從列表中刪除所有的回撥。
callbacks.fire()       ：用給定的引數呼叫所有的回撥。
callbacks.fired()      ：訪問給定的上下文和引數列表中的所有回撥。 
callbacks.fireWith()   ：訪問給定的上下文和引數列表中的所有回撥。
callbacks.has()        ：確定列表中是否提供一個回撥。
callbacks.lock()       ：鎖定當前狀態的回撥列表。
callbacks.locked()     ：確定回撥列表是否已被鎖定。
callbacks.remove()     ：從回撥列表中的刪除一個回撥或回撥集合。

原始碼結構

jQuery.Callbacks = function(options) {
    // 首先對引數進行緩衝
    options = typeof options === "string" ?
        (optionsCache[options] || createOptions(options)) :
        jQuery.extend({}, options);
    // 實現程式碼
    // 函式佇列的處理
    fire = function() {}
    
    // 自身方法
    self = {
        add: function() {},
        remove: function() {},
        has: function(fn) {},
        empty: function() {},
        disable: function() {},
        disabled: function() {},
        lock: function() {},
        locked: function() {},
        fireWith: function(context, args) {},
        fire: function() {},
        fired: function() {}
    };
    
    
    return self;
};

引數處理

// 處理通過空格分隔的字串
var str = "once queue";
var option = {};
$.each(str.match(/S+/g) || [], function (_index, item) {
    option[item] = true;
})
console.log(option);
// {once: true, queue: true}

Callbacks內部維護著一個List陣列。這個陣列用於存放我們訂閱的物件，它是通過閉包來實現長期駐存的。新增回撥時，將回撥push進list，執行則遍歷list執行回撥。

Callbacks 有4個引數。

1. once 的作用是使callback佇列只執行一次。

var callbacks = $.Callbacks(`once`);

callbacks.add(function() {
  alert(`a`);
})

callbacks.add(function() {
  alert(`b`);
})

callbacks.fire(); //輸出結果: `a` `b`
callbacks.fire(); //未執行

// 來看一下具體怎麼實現
// jQuery是在執行第一個fire的時候直接給清空list列表了，然後在add的地方給判斷下list是否存在，從而達到這樣的處理
function Callbacks(options){
    var list = [];
    var self = {};
    self: {
        add: function(fn){
            list.push(fn);
        },
        fire: function(data){
            this.list.forEach(function(item){
                item(data);
            })
            if(options == `once`) {
                list = undefined;
            }
        }
        
    }
    return self;
}

// $jQuery.Callbacks的處理,在fire中呼叫了 self.disable(); 方法
// 禁用回撥列表中的回撥。
disable: function() {
    list = stack = memory = undefined;
    return this;
}

memory 保持以前的值，將新增到這個列表的後面的最新的值立即執行呼叫任何回撥

function fn1(val) {
    console.log(`fn1 says ` + val);
}
function fn2(val) {
    console.log(`fn2 says ` + val);
}
function fn3(val) {
    console.log(`fn3 says ` + val);
}

var cbs = $.Callbacks(`memory`);
cbs.add(fn1);
cbs.fire(`foo`); // fn1 says foo

console.log(`..........`)

cbs.add(fn2);  // 這裡在新增一個函式進入佇列的同時，就立馬執行了這個 回撥了
cbs.fire(`bar`); 
// fn2 says foo 這個東東比較特殊~
// fn1 says bar
// fn2 says bar

console.log(`..........`)
cbs.add(fn3);
cbs.fire(`aaron`);
// fn3 says bar
// fn1 says aaron 
// fn2 says aaron
// fn3 says aaron

// 需要解決的問題一個就是如何獲取上一個引數，以及add後的執行
function Callbacks(options) {
  var list = [];
  var self;
  var firingStart;
  var memory;

  function _fire(data) {
    memory = options === `memory` && data;
    firingIndex = firingStart || 0; // 
    firingStart = 0;
    firingLength = list.length;
    for (; list && firingIndex < firingLength; firingIndex++) {
      list[firingIndex](data)
    }
  }

  self = {
    add: function(fn) {
      var start = list.length;
      list.push(fn)
      // 如果引數是memory
      if (memory) {
        firingStart = start; //獲取最後一值
        _fire(memory); // 同時執行
      }
    },
    fire: function(args) {
      if (list) {
        _fire(args)
      }
    }
  }
  return self;
}

Unique：確保一次只能新增一個回撥(所以在列表中沒有重複的回撥)

function fn1(val) {
  console.log(`fn1 says ` + val);
}
var callbacks = $.Callbacks( "unique" );
callbacks.add( fn1 );
callbacks.add( fn1 ); // repeat addition
callbacks.add( fn1 );
callbacks.fire( "foo" );

stopOnFalse: 當一個回撥返回false 時中斷呼叫

function fn1(value) {
  console.log(value);
  return false;
}

function fn2(value) {
  fn1("fn2 says: " + value);
  return false;
}

var callbacks = $.Callbacks("stopOnFalse");
callbacks.add(fn1);
callbacks.fire("foo");

callbacks.add(fn2);
callbacks.fire("bar");

// foo
// bar

$.callback()的原始碼

jQuery.Callbacks = function( options ) {

    // Convert options from String-formatted to Object-formatted if needed
    // (we check in cache first)
    //通過字串在optionsCache尋找有沒有相應快取，如果沒有則建立一個，有則引用
    //如果是物件則通過jQuery.extend深複製後賦給options。
    options = typeof options === "string" ?
        ( optionsCache[ options ] || createOptions( options ) ) :
        jQuery.extend( {}, options );

    var // Last fire value (for non-forgettable lists)
        memory, // 最後一次觸發回撥時傳的引數

        // Flag to know if list was already fired
        fired, // 列表中的函式是否已經回撥至少一次

        // Flag to know if list is currently firing
        firing,  // 列表中的函式是否正在回撥中

        // First callback to fire (used internally by add and fireWith)
        firingStart, // 回撥的起點

        // End of the loop when firing
        firingLength, // 回撥時的迴圈結尾

        // Index of currently firing callback (modified by remove if needed)
        firingIndex, // 當前正在回撥的函式索引

        // Actual callback list
        list = [], // 回撥函式列表

        // Stack of fire calls for repeatable lists
        stack = !options.once && [],// 可重複的回撥函式堆疊，用於控制觸發回撥時的引數列表

        // Fire callbacks// 觸發回撥函式列表
        fire = function( data ) {
            //如果引數memory為true，則記錄data
            memory = options.memory && data;
            fired = true; //標記觸發回撥
            firingIndex = firingStart || 0;
            firingStart = 0;
            firingLength = list.length;
            //標記正在觸發回撥
            firing = true;
            for ( ; list && firingIndex < firingLength; firingIndex++ ) {
                if ( list[ firingIndex ].apply( data[ 0 ], data[ 1 ] ) === false && options.stopOnFalse ) {
                    // 阻止未來可能由於add所產生的回撥
                    memory = false; // To prevent further calls using add
                    break; //由於引數stopOnFalse為true，所以當有回撥函式返回值為false時退出迴圈
                }
            }
            //標記回撥結束
            firing = false;
            if ( list ) {
                if ( stack ) {
                    if ( stack.length ) {
                        //從堆疊頭部取出，遞迴fire
                        fire( stack.shift() );
                    }
                } else if ( memory ) {//否則，如果有記憶
                    list = [];
                } else {//再否則阻止回撥列表中的回撥
                    self.disable();
                }
            }
        },
        // Actual Callbacks object
        // 暴露在外的Callbacks物件,對外介面
        self = {
            // Add a callback or a collection of callbacks to the list
            add: function() { // 回撥列表中新增一個回撥或回撥的集合。
                if ( list ) {
                    // First, we save the current length
                    //首先我們儲存當前列表長度
                    var start = list.length;
                    (function add( args ) { //jQuery.each，對args傳進來的列表的每一個物件執行操作
                        jQuery.each( args, function( _, arg ) {
                            var type = jQuery.type( arg );
                            if ( type === "function" ) {
                                if ( !options.unique || !self.has( arg ) ) { //確保是否可以重複
                                    list.push( arg );
                                }
                            //如果是類陣列或物件,遞迴
                            } else if ( arg && arg.length && type !== "string" ) {
                                // Inspect recursively
                                add( arg );
                            }
                        });
                    })( arguments );
                    // Do we need to add the callbacks to the
                    // current firing batch?
                    // 如果回撥列表中的回撥正在執行時，其中的一個回撥函式執行了Callbacks.add操作
                    // 上句話可以簡稱：如果在執行Callbacks.add操作的狀態為firing時
                    // 那麼需要更新firingLength值
                    if ( firing ) {
                        firingLength = list.length;
                    // With memory, if we`re not firing then
                    // we should call right away
                    } else if ( memory ) {
                        //如果options.memory為true，則將memory做為引數，應用最近增加的回撥函式
                        firingStart = start;
                        fire( memory );
                    }
                }
                return this;
            },
            // Remove a callback from the list
            // 從函式列表中刪除函式（集）
            remove: function() {
                if ( list ) {
                    jQuery.each( arguments, function( _, arg ) {
                        var index;
                        // while迴圈的意義在於藉助於強大的jQuery.inArray刪除函式列表中相同的函式引用（沒有設定unique的情況）
                        // jQuery.inArray將每次返回查詢到的元素的index作為自己的第三個引數繼續進行查詢，直到函式列表的盡頭
                        // splice刪除陣列元素，修改陣列的結構
                        while( ( index = jQuery.inArray( arg, list, index ) ) > -1 ) {
                            list.splice( index, 1 );
                            // Handle firing indexes
                            // 在函式列表處於firing狀態時，最主要的就是維護firingLength和firgingIndex這兩個值
                            // 保證fire時函式列表中的函式能夠被正確執行（fire中的for迴圈需要這兩個值
                            if ( firing ) {
                                if ( index <= firingLength ) {
                                    firingLength--;
                                }
                                if ( index <= firingIndex ) {
                                    firingIndex--;
                                }
                            }
                        }
                    });
                }
                return this;
            },
            // Check if a given callback is in the list.
            // If no argument is given, return whether or not list has callbacks attached
            // 回撥函式是否在列表中.
            has: function( fn ) {
                return fn ? jQuery.inArray( fn, list ) > -1 : !!( list && list.length );
            },
            // Remove all callbacks from the list
            // 從列表中刪除所有回撥函式
            empty: function() {
                list = [];
                firingLength = 0;
                return this;
            },
            // Have the list do nothing anymore
            // 禁用回撥列表中的回撥。
            disable: function() {
                list = stack = memory = undefined;
                return this;
            },
            // Is it disabled?
            //  列表中否被禁用
            disabled: function() {
                return !list;
            },
            // Lock the list in its current state
            // 鎖定列表
            lock: function() {
                stack = undefined;
                if ( !memory ) {
                    self.disable();
                }
                return this;
            },
            // Is it locked?
            // 列表是否被鎖
            locked: function() {
                return !stack;
            },
            // Call all callbacks with the given context and arguments
            // 以給定的上下文和引數呼叫所有回撥函式
            fireWith: function( context, args ) {
                if ( list && ( !fired || stack ) ) {
                    args = args || [];
                    args = [ context, args.slice ? args.slice() : args ];
                    //如果正在回撥
                    if ( firing ) {
                        //將引數推入堆疊，等待當前回撥結束再呼叫
                        stack.push( args );
                    } else {//否則直接呼叫
                        fire( args );
                    }
                }
                return this;
            },
            // Call all the callbacks with the given arguments
            // 以給定的引數呼叫所有回撥函式
            fire: function() {
                self.fireWith( this, arguments );
                return this;
            },
            // To know if the callbacks have already been called at least once
            // // 回撥函式列表是否至少被呼叫一次
            fired: function() {
                return !!fired;
            }
        };
    return self;
};

未完待續~~

回撥函式
2020-11-14
函式
回撥函式（CallBack）
2024-07-19
函式
JavaScript回撥函式
2020-10-08
JavaScript函式
JavaScript 回撥函式
2018-10-13
JavaScript函式
JS—回撥函式
2018-03-31
JS函式
[JS]回撥函式和回撥地獄
2021-08-06
JS函式
函式指標&回撥函式Callback
2020-11-10
函式指標
回撥函式與函式閉包
2019-05-29
函式
函式回撥（C++）
2024-03-10
函式C++
回撥函式的作用
2019-07-31
函式
Python/OpenCV：回撥函式
2021-08-18
PythonOpenCV函式
TLS回撥函式(Note)
2021-04-25
TLS函式
java 回撥函式示例
2018-08-20
Java函式
jQuery原始碼剖析(四) - Deferred非同步回撥解決方案
2019-07-25
jQuery原始碼非同步
JS之回撥函式（callback）
2020-10-05
JS函式
C++回撥函式用法
2020-04-04
C++函式
回撥函式的理解（一）
2021-06-07
函式
java回撥函式機制
2021-01-04
Java函式
java回撥函式-非同步回撥-簡明講解
2019-01-19
Java函式非同步
【知識點】inline函式、回撥函式、普通函式
2021-07-12
inline函式
jquery ajax 回撥函式的值alert出來[object Object] 解決方法
2020-10-10
jQuery函式Object
C++中的回撥函式
2024-10-15
C++函式
深入理解 JavaScript 回撥函式
2019-11-05
JavaScript函式
setInterval 回撥函式傳引數
2018-10-19
函式
js 徹底理解回撥函式
2018-05-22
JS函式
jQuery原始碼學習之$()
2018-07-21
jQuery原始碼
函式指標的重要用途——回撥函式
2021-12-04
函式指標
Python技法3：匿名函式、回撥函式和高階函式
2021-10-20
Python函式
函式學習三
2020-06-05
函式
C語言函式指標與回撥用函式
2018-05-22
C語言函式指標
JavaScript：鉤子函式與回撥函式的區別
2018-06-13
JavaScript函式
JS指令碼載入後執行相應回撥函式
2019-03-04
JS指令碼函式
Fastadmin fast.api.open回撥函式
2024-09-05
ASTAPI函式
回撥函式的作用與意義
2024-06-27
函式
C 語言回撥函式詳解
2020-04-23
函式
ajax 下載Excel 新增回撥函式
2021-09-09
Excel函式
JavaScript回撥函式的高手指南
2021-01-30
JavaScript函式
jQuery原始碼學習之event
2018-08-14
jQuery原始碼