Detaillierte Implementierung von jquery.Callbacks

Vorwort

jQuery.Callbacks wurde nach Version 1.7 aus dem _Deferred-Objekt extrahiert und wird hauptsächlich zum Hinzufügen, Entfernen, Auslösen und Sperren der Funktionswarteschlange usw. verwendet Operationen und bietet vier Optionen einmal, Speicher, eindeutig und stopOnFalse für eine spezielle Steuerung.

Funktionseinführung

Das Rückrufmodul von jq bietet hauptsächlich Dienste für andere Module. Es ist wie eine sanfte kleine Frau, die still im Hintergrund bezahlt. Deferred ist wie ein Riese, der in jq so prominent ist, aber intern wird er von Callbacks bedient.

Mehrere Zustände von Rückrufen:

einmalig – Die Rückruffunktion wird nur einmal ausgeführt

eindeutig – Die Funktion kann nicht wiederholt zur Rückrufliste hinzugefügt werden

Speicher – Zustandsspeicher, der hauptsächlich in Deferred verwendet wird

stopOnFalse – Wenn die Rückgabe „false“ auftritt, beenden Sie die Rückrufliste und setzen Sie die Ausführung fort

Ich habe es implementiert Ich selbst Mehrere einfache Methoden von Rückrufen

hinzufügen – Fügen Sie eine Funktion zur entsprechenden Rückruffunktionsliste hinzu

Feuer – Lösen Sie den Rückruf aus und die Rückruffunktionsliste führt die Funktionen nacheinander aus

hat - Ob es eine eingehende Funktion in der Rückruffunktionsliste gibt

klar - Löschen Sie die Rückruffunktionsliste

Gesamtstruktur

Um ein gewünschtes Rückrufmodul zu erhalten, müssen wir zunächst Folgendes tun:

var cb = Callback('memory once') // 得到一个拥有记忆功能并只执行一次的回调模块

Da wir verschiedene Instanzen basierend auf einem bestimmten erhalten müssen Zustand, wir Es ist sicher, dass wir ein Objekt zum Speichern des Zustands benötigen

var callbackState = {}

Wir haben „Speicher einmal“ an die Callback-Funktion übergeben Diese beiden Zustände aufzeichnen? Nun, hier wird es als in jq geschriebene Funktion wie folgt implementiert:

var createCallbackState = function (options) {
 var states = options.split(' ')
 var obj = {}
 for (var i = 0; i < states.length; i++) {
  obj[states[i]] = true
 }
 return obj
 }

Der obige Code schaltet den Speicher einmal um 'in {Speicher: wahr, einmal: wahr}Wenn sich dieses Objekt im Status-Cache-Objekt befindet, wird es direkt zurückgegeben. Wenn nicht, wird es zuerst erstellt und dann zurückgegeben.

Als nächstes folgt der gesamte Code der Callback-Funktion.

var Callback = function (options) {
 
 var state = callbackState[options] //获取状态模式
 if (!state) {
  callbackState[options] = state = createCallbackState(options)
 }
 var list = [], // 回调函数列表
  memory,  // 存储是否为 记忆状态
  has = function (fn) {
  for (var i = 0; i < list.length; i++) {
   if (list[i] === fn) {
   return true
   }
  }
  return false
  },
  add = function () {
  var i = 0,
   args = arguments,
   len = args.length
  for (; i < len; i++) {
   if (state.unique && has(args[i])) { // 如果是unique状态下并回调列表已经拥有该函数，则不添加
   continue
   }
   list.push(args[i])
  }
  },
  fire = function (context, args) {
  var i = 0,
   len = list.length,
   item
  for (; i < len; i++) {
   item = list[i]
   if (item.apply(context,args) === false && state.stopOnFalse) { //如果函数运行返回false，并且是stopOnFalse状态，终止循环
   break;
   }
  }
  }
 
 return {
  add: function () {
  add.apply(null,arguments)
  // 如果memory模式并且已经拥有了memory信息，接着出发函数
  if (state.memory && memory) {
   fire(memory[0], memory[1])
   list = []
  }
  },
  fire: function (context, args) {
  // 如果memory模式，并且list是空，代表触发在添加前，保存memory信息
  if (state.memory && !list.length) {
   memory = [context, args]
   return
  }
  fire(context,args)
  if (state.once) {
   this.clear()
  }
  },
  has: function (fn) {
  return has(fn)
  },
  clear: function () {
  list = []
  }
 }
 
 }

Nachdem die Callback-Funktion ausgeführt wurde, Es wird ein Objekt zurückgegeben. Das Objekt enthält dann mehrere einfache Funktionen.

Lassen Sie mich die Implementierung dieses Teils vorstellen.

Zunächst habe ich, wie jq, auch die internen Methoden add, fire und has definiert. Der Hauptgrund ist die logische Notwendigkeit, Once und die Speicherstatuskontrolle in der Methode zu implementieren, die das Objekt zurückgibt Die internen Add- und Fire-Methoden sind eine reine Add- und Trigger-Funktion.

Schauen wir uns zunächst die cb.add-Methode an. Die Add-Methode kann mehrere Funktionen empfangen, daher

add.apply(null,arguments)

verwendet die interne Add-Methode Funktion hinzufügen

Der nächste Teil der Funktion besteht darin, festzustellen, ob sich das Rückrufmodul im Speicherstatus befindet. Schüler, die das verzögerte Modul verstehen, sollten wissen, dass sich dieses Modul im Promise-Modus befindet und die Rückruffunktion für den Erfolg abonniert oder Fehlerstatus, und dann einen bestimmten Zeitpunkt aufrufen, bezieht sich dieser Modus auf den Rückruf im Speicherstatus. Es gibt eine seltsame Sache an diesem Modus. Wenn Sie zuerst erfolgreich veröffentlichen, ist die Rückrufliste jedoch leer. Dann scheitert das Programm nicht an der Veröffentlichung, sondern wartet auf die erfolgreiche Rückruffunktion. Sobald die Rückruffunktion hinzugefügt wurde, wird sie sofort ausgeführt.

ist der folgende Code

// 如果memory模式并且已经拥有了memory信息，立刻触发函数
 if (state.memory && memory) {
 fire(memory[0], memory[1])
 list = []
 }

Tipp: „Wenn Sie zuerst erfolgreich veröffentlichen, aber die Rückrufliste leer ist, wird das Programm dies tun Nicht veröffentlichen. Fehler, aber es wird darauf gewartet, dass die Rückruffunktion hinzugefügt wird. Der folgende Code wird sofort ausgeführt:

var cb = Callback('memory') // 得到记忆功能的回调模块
 
cb.fire() // 触发回调队列
 
cb.add(fn) //添加回调函数，自动执行了！
 
function fn () {
 console.log('fn')
}

Im Nicht-Speicherstatus ist der obige Code ungültig. Zur Ausführung muss es erneut ausgelöst werden.

Nach dem oben Gesagten ist die Feuerfunktion leicht zu verstehen und kann zwei Parameter empfangen: den Funktionskontext und das Funktionsparameterarray.

ist mit dem Speicherstatuscode in add verbunden. Der folgende Code ist die Operation im Speicherstatus während des Feuers Wenn es sich im Speicherzustand befindet und die Rückrufliste leer ist, werden der Funktionsausführungskontext und das Parameterarray gespeichert und beim Hinzufügen sofort ausgeführt.

// 如果memory模式，并且list是空，代表触发在添加前，保存memory信息
  if (state.memory && !list.length) {
   memory = [context, args]
   return
  }

Darüber hinaus ist der Code sehr einfach und leicht zu verstehen. Die Callback-Funktion ist eine sehr einfache Funktion.