zepto源碼Callback

linkin 發布于2019-08-23 10:44 / 1651人閱讀

摘要：如果回調正在進行，則修正回調任務的長度為當前任務列表的長度，以便后續添加的回調函數可以執行。

Callback模塊是用來管理回調函數，也作為deferred延遲對象得基礎部分，現在一起來看看他的源碼。
可選參數：

  Options:
    once: 是否最多執行一次，
    memory: 是否記住最近的上下文和參數
    stopOnFalse: 當某個回調函數返回false時中斷執行
    unique: 相同得回調只被添加一次

這是可選參數，下面可以進行試驗：

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("中");

下面是他的輸出結果：

a: hello,
a:中,
b:中

可以看到得是，當我們第二次fire得時候，a函數也會執行。
在加入參數進行實驗，首先加入memory

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

加入memory參數，memory記錄上一次觸發回調函數，之后添加的函數都用這參數立即執行。在來看once的使用

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

可以看到的是，雖然執行了兩次fire方法，但是只輸出了一次結果。其他兩個參數很好理解，細節的部分自己去嘗試。

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

再看看各個參數的意義，memory會在記憶模式下記住上一次觸發的上下文和參數，fired代表回調是否已經觸發過，firing表示回調正在觸發，firingStart回調任務開始的位置，firingLength回調任務的長度，firingIndex當前回調的索引，list表示真實的回調隊列，在不是觸發一次的情況下，用來緩存觸發過程中沒有執行的任務參數。

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函數是唯一內置的函數，他的作用是用于觸發list的回調執行，首先看看他傳進的參數，和咱們在外部調用$.Callbacks的fire還不太一樣，這里的data是一個數組，data[0]表示上下文，data[1]是方法調用的參數。然后就是各個參數的的初始化，memory表示如果options.memory為true，則保存data，fired為true，如果firingStart為0,那么firingIndex 為0，firingStart置為0，正在觸發的回調標記firing為true。
然后遍歷回調列表，逐個執行回調，這個里邊的if判斷表示的是如果回調函數返回的是false并且options.stopOnFalse是false，則清空memory的緩存。遍歷完成后，將執行的狀態改為false。如果list存在，stack也存在，把任務參數取出來，調用fire函數執行。如果memory存在，則清空列表，否則進行回調執行

最終這個文件返回的是Callbacks，我們來看看他的具體實現：

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

這個函數主要的作用就是像list里邊push回調。首先判斷list是否存在，如果存在，start賦值為list的長度，在內部添加一個add方法，內部add方法主要是向list添加回調，如果我們傳入的參數是數組，就再次調用add方法。然后就是調用add方法，把arguments傳進去。如果回調正在進行，則修正回調任務的長度firingLength為當前任務列表的長度，以便后續添加的回調函數可以執行。如果memory存在，則把開始設置為新添加列表的第一位，然后調用fire。
我們再來看看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;
}

傳入的參數包括上下文，和參數列表。函數執行的條件是list存在并且回調沒有執行或者stack存在，stack可以為空。首先對args進行重新賦值，args[0]是上下文，args[1]是復制過來的列表。如果回調正在進行，向stack里邊添加args，或者就執行args。

云服務器 GPU云服務器 callback objecttype_callback zepto zepto cdn

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96640.html

讀Zepto源碼之fx_methods模塊

摘要：所以模塊依賴于模塊，在引入前必須引入模塊。原有的方法分析見讀源碼之樣式操作方法首先調用原有的方法，將元素顯示出來，這是實現動畫的基本條件。如果沒有傳遞，或者為值，則表示不需要動畫，調用原有的方法即可。 fx 模塊提供了 animate 動畫方法，fx_methods 利用 animate 方法，提供一些常用的動畫方法。所以 fx_methods 模塊依賴于 fx 模塊，在引入 fx_m...

junbaor 2019-08-21 16:59 評論0 收藏0
讀Zepto源碼之Form模塊

摘要：模塊處理的是表單提交。表單提交包含兩部分，一部分是格式化表單數據，另一部分是觸發事件，提交表單。最終返回的結果是一個數組，每個數組項為包含和屬性的對象。否則手動綁定事件，如果沒有阻止瀏覽器的默認事件，則在第一個表單上觸發，提交表單。 Form 模塊處理的是表單提交。表單提交包含兩部分，一部分是格式化表單數據，另一部分是觸發 submit 事件，提交表單。讀 Zepto 源碼系列文章已...

陳江龍 2019-08-21 17:12 評論0 收藏0
Zepto源碼分析（一）核心代碼分析

摘要：源碼分析一核心代碼分析源碼分析二奇淫技巧總結本文只分析核心的部分代碼，并且在這部分代碼有刪減，但是不影響代碼的正常運行。當長度為則不添加內容，否則逐個將逐個到當前實例新增直接返回一個新的構造函數添加初始化方法。 Zepto源碼分析（一）核心代碼分析Zepto源碼分析（二）奇淫技巧總結本文只分析核心的部分代碼，并且在這部分代碼有刪減，但是不影響代碼的正常運行。目錄 * 用閉包封裝Z...

BicycleWarrior 2019-08-20 18:57 評論0 收藏0
讀 zepto 源碼之工具函數

摘要：在遍歷的時候，還對回調函數的返回值進行判斷，如果回調函數返回，立即中斷遍歷。可以遍歷數組類數組或對象中的元素，根據回調函數的返回值，將返回值組成一個新的數組，并將該數組扁平化后返回，會將及排除。 Zepto 提供了豐富的工具函數，下面來一一解讀。源碼版本本文閱讀的源碼為 zepto1.2.0 $.extend $.extend 方法可以用來擴展目標對象的屬性。目標對象的同名屬性會被...

姘擱『 2019-08-20 16:10 評論0 收藏0
讀Zepto源碼之集合操作

摘要：調用來獲取符合條件的集合元素，這在上篇文章讀源碼之神奇的已經有詳細的論述。然后調用方法來合并兩個集合，用內部方法來過濾掉重復的項，方法在讀源碼之內部方法已經有論述。最后也是返回一個集合。接下來幾個篇章，都會解讀 zepto 中的跟 dom 相關的方法，也即源碼 $.fn 對象中的方法。讀Zepto源碼系列文章已經放到了github上，歡迎star: reading-zepto 源碼...

pepperwang 2019-08-20 16:43 評論0 收藏0
讀Zepto源碼之Event模塊

摘要：不支持事件冒泡帶來的直接后果是不能進行事件委托，所以需要對和事件進行模擬。調用函數，分隔出參數的事件名和命名空間。這里判斷是否為函數，即第一種傳參方式，調用函數的方法，將上下文對象作為的第一個參數，如果存在，則與的參數合并。 Event 模塊是 Zepto 必備的模塊之一，由于對 Event Api 不太熟，Event 對象也比較復雜，所以乍一看 Event 模塊的源碼，有點懵，細看下...

vpants 2019-08-20 18:06 評論0 收藏0