這篇文章主要分為以下知識：什麼是Callbacks、Callbacks模型、基本模塊實現、once和auto(memory)、源碼和源碼下載，十分的細致全面，這裡推薦給大家，有需要的小伙伴參考下吧。
代碼的本質突出順序、有序這一概念，尤其在javascript——畢竟javascript是單線程引擎。
javascript擁有函數式編程的特性，而又因為javascript單線程引擎，我們的函數總是需要有序的執行。優秀代碼常常 把函數切割成各自的模塊，然後在某一特定條件下執行，既然這些函數是有序的執行，那麼我們為什麼不編寫一個統一管理的對象，來幫助我們管理這些函數——於是，Callbacks（回調函數）誕生。
什麼是Callbacks
javascript中充斥著函數編程，例如最簡單的window.onload承接的就是一個函數，悲催的是window.onload直接賦值的話只能接收一個函數，如果有好幾個函數想要在onload中執行，那麼我們就需要編寫如下代碼：
代碼如下:
回調函數初衷就是建立在這麼個玩意兒的上面，不再讓我們分散這些函數，而是把這些函數統一整理。可以看見，我們在window.onload中希望針對一個Element做兩件事情：先改變html結構，然後改變這個html的style。兩個函數同樣是針對一個Element操作，而這兩個函數最終的執行都是有序進行的。那麼我們為什麼不編寫一個這樣的對象管理這些函數呢。當然， 這只是回調函數的最基礎的存在意義，我們需要的不僅僅是這樣一個簡單的回調函數對象，我們需要一個更加強大的回調函數。好吧，這只是一個簡單的用例，那麼我可以告訴你這個回調函數除了一個個執行函數之外，它還可以做什麼。
Callbacks本質就是控制函數有序的執行，Javascript是單線程引擎，也就說，javascript同一時間只會有一處代碼在運行——即便是Ajax、setTimeout。 這兩個函數看起來好像都是異步的，其實並非如此，浏覽器在運行javascript代碼的時候，這些代碼都會被有序的壓入一個隊列中，當你運行Ajax的時候，浏覽器會把Ajax 壓入代碼隊列，浏覽器在處理javascript代碼是從這個代碼隊列中一個一個取代碼執行的——Callbacks，迎合了這種單線程引擎。
當然，我們要的，不僅僅是這樣一個簡單的工具對象——在jQuery源碼中，Callbacks提供了一組函數的基本管理，為Deferred（異步隊列）提供了基礎，同時也服務於Queue（同步隊列）。 Deferred用於抹平/扁平化金字塔編程（大量的回調函數嵌套，例如Ajax中需要根據請求返回碼決定執行的代碼）； 而Queue，驅動著jQuery.animate（動畫引擎）。
那麼我們就來編寫一個Callbacks吧。
Callbacks模型
Array（數組）：
既然我們Callbacks要承接一系列函數，那麼必然需要有一個容器。我們可以使用一個數組，並把每一個函數壓到該數組中，需要執行的時候，循環數組項執行。
工作模型：
這個Callbacks需要非常的強大，並不僅僅是壓入函數，然後執行這麼簡單，這個Callbacks應該擁有良好的執行模型。
once：當前Callbacks對象中所有的函數只會執行一次，執行一次完之後就會被釋放掉，我們可以為使用Callbacks對象的用戶提供一個穩定有效的方案，確保函數只會執行一次，之後不再執行，穩定了這些函數的線程。
auto：自動執行模型，這是個有意思的模型，有些函數依賴上一層函數，例如函數b的執行依賴於函數a，那麼我們提供一個自動執行的模型：第一次執行這個Callbacks之後，每次添加函數到Callbacks的時候，自動執行過去添加的那些函數，並把最後一次給定的參數數據傳遞給過去的那些函數，這樣就從Callbacks中抹平了這些依賴函數之間需要反復觸發的關系，這是個有意思的模型。
once&auto：我們可以讓它更強大，同時工作once和auto模型，即：當每次添加函數到Callbacks中的時候，過去的函數都會執行，然後，釋放掉這些過去的函數，下次繼續添加函數的時候，過去的那些函數不會再執行，因為once模型，已經把它們釋放掉了。
API：
add(function) - 添加一個（或多個）函數到Callbacks對象中：當然，如果你並不添加函數只是好奇看看Callbacks，我們也將讓你繼續享受你的樂趣——我們並不會拋出異常，因為這對於我們來說並不擅長。
remove(function) - 移除一個Callbacks中的一個函數：既然有了添加，那麼我們也應該提供反悔的方案，我們是多麼的平易近人，容忍著別人過去所做的一切。
has(function) - 判斷Callbacks中是否包含一個函數：哦？你竟然不確定是否包含這個函數，當初可是你丟進來的啊！你怎麼如此馬虎？不過既然你問我的話，我仍然會告訴你Callbacks是否包含這個函數，我知道你很繁忙，並不能記住和確定所有的事情。
empty() - 清空Callbacks：這些函數對於你失去了意義了麼？什麼？已經執行過你就不想要了？所以你希望可以清空它？好吧，為了內存君我還是忍下你這個需求。
disable() - 廢掉一個Callbacks：為了和別人的代碼穩定的存在，我選擇了自我犧牲——沒錯，這個方法可以廢掉Callbacks，徹底的廢掉，就如同它曾經尚未存在過一般。
disabled() - 判斷這個Callbacks是否已經被廢掉：如果你仍然不相信Callbacks是否真的自我犧牲，那麼這個方法可以讓你安心。
lock(boolean) - 鎖定這個Callbacks對象：你害怕它並不穩定，但是你又不想捨棄它，lock是個不錯的方法，它接收一個Boolean的參數，表示是否需要鎖定這個對象，當然，無參的它用於讓你確定Callbacks是否被鎖定。
fire(data) - 執行這個Callbacks中的函數：我們做的這一切，不都是為了這一刻執行的宿命麼？參數將會成為這些需要執行的函數的參數。
fireWith(context,data) - 執行Callbacks中的函數，並且指定上下文。在fire()裡，所有的函數的Context(上下文)都是Callbacks對象，而fireWidth()，可以讓你重新定義這些要執行的函數的上下文，多麼自由的編程啊，Callbacks為你考慮了一切。
fired() - 判斷這個Callbacks過去是否已經執行過：我們相信，多數時候你並不知道過去做過什麼，但是我們記錄了你做的一切，如果你過去曾經執行過這個Callbacks對象，那麼你休想否認，因為我們知道過去你是否執行了這個Callbacks。
基本模塊實現
簡單的實現：
我們先來簡單的實現一個Callbacks：
代碼如下:
然後我們測試一下這個Callbacks：
代碼如下:
打開浏覽器的控制台我們可以看見運行結果正常。
once和auto(memory)實現
once：
once讓這個callbacks中的函數運行一次之後就不再運行。原理非常的簡單，上面的代碼中，我們可以看見有一個變量list承接函數列表，所以我們只需要把過去執行過的代碼清空即可。我們用一個全局變量，保存當前執行模型，如果是once模型，就在fireWith()裡讓這個list失效即可：
代碼如下:
auto：
auto（memory）模型在jQuery中是以memory命名的，最初被這個命名給混淆了，仔細看了用法才確定改成auto——它的作用就是“第一次fire()之後，後續add()的函數自動執行”，以下情況可以用到：當添加一組函數到Callbacks之後，臨時又需要追加一個函數，那麼即時運行這個新追加的函數——不得不說，為了使用的便利，這個模式變得有點難以理解。實現起來就是在add()的時候判斷是否是auto模型，如果是auto模型，則執行這個函數。 但是，我們需要在第一次fire()之後才自動執行，沒有fire()過的Callbacks並不該被自動執行，並且，每次自動執行後，還需要把最後一次使用的參數傳遞傳遞給這個自動執行的函數。
或許大家會想到如下代碼：
代碼如下:
但是在jQuery裡采用了更奇妙的用法，獲取jQuery作者也自豪這種用法，所以命名這個模型為memory——就是讓上面的變量auto不僅僅表示當前是auto執行模式，並且作為最後一次參數的容器，它既表示了auto，也表示了memory。（下面的代碼非jQuery是根據jQuery代碼思路而寫，非源碼）：
復制代碼 代碼如下:
我們在上一個auto實現的代碼中看到我們丟失了Context，jQuery早在fireWith()中修復了這個bug——在fireWith()中修復參數。jQuery把fireWith()中本來應該執行函數的邏輯給抽離出來，我們暫時將它命名為coreFire()，在原fireWith()中，將參數拼接成一個數組：第一個參數表示上下文，第二個參數表示傳遞進來的參數。然後執行coreFire()。
在add()的時候，jQuery並沒有給變量auto（memory）賦值，而是選擇在coreFire()中給auto（memory）賦值，這樣就保證了第一次fire()之後才會開啟自動執行。
按照上面所說，coreFire()接收的參數其實是一個數組，第一個參數是上下文，第二個參數是外面傳遞進來的參數。同時把這個數組賦值給auto（memory），這樣，變量auto（是否自動執行模式）的定義就變成了memory（記憶最後一次傳遞的參數）。
真是一石二鳥的神思路，神想法，不得不點贊。我定義這個為auto是因為它的本身就是一個自動執行的模型，順便保存了最後一次fire()的參數，而jQuery定義為memory或許也是作者感歎這裡的鬼斧神工吧。
至於once&auto就是把這兩個代碼揉合到一起而已，只需要在coreFire()裡判定如果是auto模式，那麼就把list重置為一個新的數組，否則直接設置為undefined即可。
源碼
這份代碼是自己對應jQuery手寫的一份，將一些jQuery公有的函數都寫了進來，並非代碼片段，所以可以直接引用運行。
代碼如下:
//工具函數
var isIndexOf = Array.prototype.indexOf, //Es6
toString = Object.prototype.toString, //緩存toString方法
toSlice = Array.prototype.slice, //緩存slice方法
isFunction = (function () { //判定一個對象是否是Function
return "object" === typeof document.getElementById ?
isFunction = function (fn) {
//ie下對DOM和BOM的識別有問題
try {
return /^s*bfunctionb/.test("" + fn);
} catch (x) {
return false
}
} :
isFunction = function (fn) { return toString.call(fn) === '[object Function]'; };
})(),
each = function () { //循環遍歷方法
//第一個參數表示要循環的數組，第二個參數是每次循環執行的函數
if (arguments.length < 2 || !isFunction(arguments[1])) return;
//為什麼slice無效？？
var list = toSlice.call(arguments[0]),
fn = arguments[1],
item;
while ((item = list.shift())) {//沒有直接判定length，加速
// 為什麼這裡用call就可以，而apply就不行？
//搞定 - apply的第二個參數必須是一個array對象（沒有驗證array-like是否可以，而call沒有這個要求）
//apply是這樣描述的：如果 argArray（第二個參數） 不是一個有效的數組或者不是 arguments 對象，那麼將導致一個 TypeError。
fn.call(window, item);
}
},
inArray = function () { //檢測數組中是否包含某項，返回該項索引
//預編譯
return isIndexOf ? function (array, elem, i) {
if (array)
return isIndexOf.call(array, elem, i);
return -1;
} : function (elem, array, i) {
var len;
if (array) {
len = array.length;
i = i ? i < 0 ? Math.max(0, len + i) : i : 0;
for (; i < len; i++) {
if (i in array && array[i] === elem) {
return i;
}
}
}
return -1;
}
}();
var Callbacks = function (option) {
option = toString.call(option) === '[object Object]' ? option : {};
//使用閉包，因為每個新建的callbacks都有自己的狀態
var list = [], //回調列表
_list = [], //如果鎖定這個callbacks對象，則清空list，將原list置入_list
fired, //是否執行過
firingStart, //當前回調函數列表執行的函數索引（起點）
firingLength, //回調函數的數組長度
auto, //標志是否自動執行，如果需要自動執行，則auto記憶著最後一次回調的參數（最後一次fire的參數），這是一個很詭異的且奇葩的用法
//這個變量用法很詭異和犀利，既包含了是否指定執行的標志，又記錄了數據
//這個auto配合once簡直就是喪心病狂：【第一次】執行了fire後才會自動執行，配合once可以做到：一次執行，後面不再追加和執行代碼，保證了一組回調數據的穩定和安全
stack = !option.once && [], //一個callbacks棧，如果當前正在執行回調數組，而在執行中又新添了回調函數，那麼把新的回調函數，那麼新的回調函數都會壓入該棧
firing = false, //callbacks是否正在工作/執行
//觸發回調函數
fire = function (data) {
//注意這個data是個數組，如果配置了auto模式，那麼auto永遠不會為false，因為auto會是個數組
auto = option.auto && data; //在這裡，如果配置要求記憶最後的參數，則記憶這個參數（非常犀利的用法，直接取了數據）
fired = true;
firingIndex = firingStart || 0;
firingStart = 0;//清空firingStart（不清空下次執行有出問題啦）
firingLength = list.length; //緩存list長度，外界可以訪問
firing = true; //正在執行回調函數
for (; firingIndex < firingLength; firingIndex++) {
if (list[firingIndex].apply(data[0], data[1]) === false) {
//注意，如果配置了option.auto（自動執行），並且stack（棧）裡存在函數，那麼add()代碼裡有一段對於auto判定會直接執行本方法的代碼
//我們要阻止掉那段代碼，所以設置auto為false
auto = false;
break;
}//當函數返回false，終止執行後續隊列
}
firing = false; //標志狀態已經執行完畢回調函數[stack(棧)裡面的函數尚未執行]
//如果這個棧在沒有配置once的情況下肯定是[]，所以一定存在
//這裡主要作用是，如果沒有配置once，則攔截下面的代碼，如果配置了once，執行完代碼清空數據
if (stack) {
if (stack.length)//先把下面清空list狀態的代碼攔截掉，再判定是否有棧
fire(stack.shift()); //從棧頭部取出，並遞歸fire()方法
}
else if (auto) //代碼走到這裡，證明已經配置了option.once（只執行一次），於是把list清空
list = [];
else //證明沒有配置auto，但是配置了once，那麼祭出終極大法，直接廢了這個callbacks對象
self.disable();
};
var self = {
add: function () {//添加一個回調函數
if (list) {
var start = list.length;
(function addCallback(args) {
each(args, function (item) {
if (isFunction(item)) {//是函數，則壓入回調列表
list.push(item);
//注意typeof 和Object.prototype.toString是不一樣的
} else if (toString.call(item) === '[object Array]') {//如果是個數組，則遞歸壓入回調列表，這個判定拋棄了array-like
addCallback(item);
}
});
})(arguments);
}
if (firing)//如果當前正有回調函數在執行，那麼需要更新當前回調函數列表的length，否則這個新壓入的回調函數就會被掠過。
firingLength = list.length;
else if (auto) {//如果當前沒有執行回調函數，並且要求自動執行
//注意這裡是給firingStart賦值，上面fire方法中正在使用的是firingIndex，這裡不會影響到上面代碼的執行線路
firingStart = start;
//執行我們新加入的小伙伴
fire(auto);
}
return this;
},
fire: function () {//觸發回調函數
self.fireWith(this, arguments);
return this;
},
fireWith: function (context, args) {//觸發回調函數，並指定上下文
//如果配置了once，stack將為undefined，而once又需要保證只執行一次，所以一旦執行過一次，這裡的代碼不會再執行
if (list && (!fired || stack)) {
//修正參數
//在這裡,context索引為0
//而參數列表索引為2
//轉換為數組訪問是因為對象表示更加的消耗資源，在頂層的fire()代碼中有auto[記憶參數，自動執行]這個功能，如果采用對象則開銷了更大的內存
args = [context,
args ?
args.slice && args.slice()
|| toSlice.call(args) :
[]
];
fire(args);
}
return this;
},
remove: function () {//移除一個回調函數
if (list) {
each(arguments, function (item) {
var index;
//可能有多項，index可以在循環中表示檢索的范圍，之前檢索的過的可以不用再檢索
while ((index = inArray(item, list, index)) > -1) {
list.splice(index, 1);
if (firing) {
//保證上面fire中正在執行的函數列表能夠正確運行，fire中設定全局這些變量為的就是這裡可以異步移除
if (index <= firingLength)//修正長度
firingLength--;
if (index <= firingLength)//修正索引
firingIndex--;
}
}
});
}
return this;
},
has: function (fn) {//是否包含一個回調函數
return fn ? inArray(fn, list) > -1 : list && list.length;
},
empty: function () {//清空這個callbacks對象
list = [];
firingLength = 0;
return this;
},
disable: function () {//廢掉這個callbacks對象，後續的回調函數列表不再執行
list = stack = auto = undefined;
return this;
},
disabled: function () {//是否已經廢掉
return !list; //轉換為boolean
},
lock: function (isLock) {//鎖定或解鎖這個callbacks對象
//無參，判斷這個callbacks是否被鎖定
if (isLock == null) return !!_list;
if (isLock) {//鎖
_list = stack && list.concat(stack) || list;
list = undefined;
} else {//解鎖，jQuery並沒有提供解鎖功能，解鎖讓Callbacks變得不穩定
list = _list;
_list = undefined;
}
return this;
},
fired: function () {//這個callbacks是否執行過
//轉換為boolean，包括undefined，null,''等
return !!fired;
}
};
return self;
};
window.$ = window.$ || {};
window.$.Callbacks = window.Callbacks = Callbacks;
}(window));
下載
Github：https://github.com/linkFly6/linkfly.so/blob/master/LinkFLy/jQuery/jQuery.LinkFLy/Callbacks.js
以上就是本文給大家分享的全部內容了，希望大家能夠喜歡。