zepto源碼Callback

linkin 發(fā)布于2019-08-23 10:44 / 1661人閱讀

摘要：如果回調(diào)正在進(jìn)行，則修正回調(diào)任務(wù)的長(zhǎng)度為當(dāng)前任務(wù)列表的長(zhǎng)度，以便后續(xù)添加的回調(diào)函數(shù)可以執(zhí)行。

Callback模塊是用來(lái)管理回調(diào)函數(shù)，也作為deferred延遲對(duì)象得基礎(chǔ)部分，現(xiàn)在一起來(lái)看看他的源碼。
可選參數(shù)：

  Options:
    once: 是否最多執(zhí)行一次，
    memory: 是否記住最近的上下文和參數(shù)
    stopOnFalse: 當(dāng)某個(gè)回調(diào)函數(shù)返回false時(shí)中斷執(zhí)行
    unique: 相同得回調(diào)只被添加一次

這是可選參數(shù)，下面可以進(jìn)行試驗(yàn)：

var a = function (value) {
  console.log("a:" + value);
};
var b = function (value) {
  console.log("b:" + value);
};
var callbacks = $.Callbacks();
callbacks.add(a);
callbacks.fire(["hello"]);
callbacks.add(b);
callbacks.fire("中");

下面是他的輸出結(jié)果：

a: hello,
a:中,
b:中

可以看到得是，當(dāng)我們第二次fire得時(shí)候，a函數(shù)也會(huì)執(zhí)行。
在加入?yún)?shù)進(jìn)行實(shí)驗(yàn)，首先加入memory

var callbacks = $.Callbacks({
  memory: true
});
callbacks.add(a);
callbacks.fire("hello");
callbacks.add(b);
輸出：
a:hello,
b:hello

加入memory參數(shù)，memory記錄上一次觸發(fā)回調(diào)函數(shù)，之后添加的函數(shù)都用這參數(shù)立即執(zhí)行。在來(lái)看once的使用

var callbacks = $.Callbacks({
  once: true
});
callbacks.add(a);
callbacks.fire("hello");
callbacks.fire("中");
輸出：
a:hello

可以看到的是，雖然執(zhí)行了兩次fire方法，但是只輸出了一次結(jié)果。其他兩個(gè)參數(shù)很好理解，細(xì)節(jié)的部分自己去嘗試。

$.Callbacks = function(options) {
  options = $.extend({}, options)
  var memory, 
    fired, 
    firing,
    firingStart,
    firingLength,
    firingIndex,
    list = [],
    stack = !options.once && []
}

再看看各個(gè)參數(shù)的意義，memory會(huì)在記憶模式下記住上一次觸發(fā)的上下文和參數(shù)，fired代表回調(diào)是否已經(jīng)觸發(fā)過(guò)，firing表示回調(diào)正在觸發(fā)，firingStart回調(diào)任務(wù)開(kāi)始的位置，firingLength回調(diào)任務(wù)的長(zhǎng)度，firingIndex當(dāng)前回調(diào)的索引，list表示真實(shí)的回調(diào)隊(duì)列，在不是觸發(fā)一次的情況下，用來(lái)緩存觸發(fā)過(guò)程中沒(méi)有執(zhí)行的任務(wù)參數(shù)。

fire = function(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) {
      memory = false
      break
    }
  }
  firing = false
  if (list) {
    if (stack) stack.length && fire(stack.shift())
    else if (memory) list.length = 0
    else Callbacks.disable()
  }
}

fire函數(shù)是唯一內(nèi)置的函數(shù)，他的作用是用于觸發(fā)list的回調(diào)執(zhí)行，首先看看他傳進(jìn)的參數(shù)，和咱們?cè)谕獠空{(diào)用$.Callbacks的fire還不太一樣，這里的data是一個(gè)數(shù)組，data[0]表示上下文，data[1]是方法調(diào)用的參數(shù)。然后就是各個(gè)參數(shù)的的初始化，memory表示如果options.memory為true，則保存data，fired為true，如果firingStart為0,那么firingIndex 為0，firingStart置為0，正在觸發(fā)的回調(diào)標(biāo)記firing為true。
然后遍歷回調(diào)列表，逐個(gè)執(zhí)行回調(diào)，這個(gè)里邊的if判斷表示的是如果回調(diào)函數(shù)返回的是false并且options.stopOnFalse是false，則清空memory的緩存。遍歷完成后，將執(zhí)行的狀態(tài)改為false。如果list存在，stack也存在，把任務(wù)參數(shù)取出來(lái)，調(diào)用fire函數(shù)執(zhí)行。如果memory存在，則清空列表，否則進(jìn)行回調(diào)執(zhí)行

最終這個(gè)文件返回的是Callbacks，我們來(lái)看看他的具體實(shí)現(xiàn)：

Callbacks = {
  add: function () {
    if (list) {
      var start = list.length,
        add = function (args) {
          $.each(args, funciton(_, arg) {
            if (typeof arg === "function") {
              if (!options.unique || !Callbacks.has(arg)) list.push(arg);
            } else if (arg && arg.length && typeof arg !== "string") add(arg);
          })
        }
      add(arguments)
      if (firing) firingLength = list.length;
      else if (memory) {
        firingStart = start;
        fire(memory)
      }
    }
    return this;
  }
}

這個(gè)函數(shù)主要的作用就是像list里邊push回調(diào)。首先判斷l(xiāng)ist是否存在，如果存在，start賦值為list的長(zhǎng)度，在內(nèi)部添加一個(gè)add方法，內(nèi)部add方法主要是向list添加回調(diào)，如果我們傳入的參數(shù)是數(shù)組，就再次調(diào)用add方法。然后就是調(diào)用add方法，把a(bǔ)rguments傳進(jìn)去。如果回調(diào)正在進(jìn)行，則修正回調(diào)任務(wù)的長(zhǎng)度f(wàn)iringLength為當(dāng)前任務(wù)列表的長(zhǎng)度，以便后續(xù)添加的回調(diào)函數(shù)可以執(zhí)行。如果memory存在，則把開(kāi)始設(shè)置為新添加列表的第一位，然后調(diào)用fire。
我們?cè)賮?lái)看看fireWith的做法：

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;
}

傳入的參數(shù)包括上下文，和參數(shù)列表。函數(shù)執(zhí)行的條件是list存在并且回調(diào)沒(méi)有執(zhí)行或者stack存在，stack可以為空。首先對(duì)args進(jìn)行重新賦值，args[0]是上下文，args[1]是復(fù)制過(guò)來(lái)的列表。如果回調(diào)正在進(jìn)行，向stack里邊添加args，或者就執(zhí)行args。